Unser Design System: Fünf Designkonzepte für Foodblogs

Wir arbeiten täglich an Foodblogs und wissen: Das richtige Design macht den Unterschied. Deswegen haben wir ein interaktives Design System gebaut, das fünf verschiedene Designkonzepte zeigt — alle live umschaltbar, alle mit echten Komponenten.

Design System ansehen

Was ist ein Design System?

Stell dir ein Design System vor wie ein Baukasten für deine Website. Statt jede Seite von Grund auf zu gestalten, definierst du einmal die grundlegenden Bausteine — und baust damit alles Weitere zusammen. Ein Design System besteht aus drei Ebenen:

1. Farben — die Stimmung deines Blogs

Farben sind das Erste, was Besucher wahrnehmen. Sie erzeugen Stimmung, bevor ein einziges Wort gelesen wird. In einem Design System definiert man nicht einfach „ein Rot", sondern ein ganzes Farbsystem: eine Primärfarbe, eine dunklere Variante für Hover-Effekte, eine hellere für Akzente, Hintergrundfarben, Textfarben und Rahmenfarben.

Unser Klassisch-Theme nutzt zum Beispiel:

• Primärfarbe: ein warmes Gold (#B8860B) — edel, wie der Einband eines Kochbuchs
• Textfarbe: ein dunkles Braun (#3D3225) — sanfter als reines Schwarz, passt zur warmen Palette
• Hintergrund: ein zartes Creme (#FFFDF8) — der Unterschied zu reinem Weiß ist subtil, aber spürbar

Im Vergleich dazu das Moderne Theme:

• Primärfarbe: Waldgrün (#2D6A4F) — ruhig, natürlich, skandinavisch
• Textfarbe: ein tiefes Dunkelblau (#1A1A2E) — modern und kontrastreich
• Hintergrund: reines Weiß (#FFFFFF) — maximaler Weißraum, nichts lenkt ab

Und das Verspielte Theme geht einen ganz anderen Weg:

• Primärfarbe: leuchtendes Fuchsia (#D946EF) — mutig, fröhlich, unübersehbar
• Akzentfarbe: Türkis (#06B6D4) — der perfekte Kontrast zu Pink
• Hintergrund: ein warmes Zitronengelb (#FEFCE8) — wie Sonnenschein auf Papier

All diese Farben werden als sogenannte CSS Custom Properties definiert — das heißt, man ändert an einer einzigen Stelle den Wert, und die komplette Website passt sich an. Genau das passiert, wenn du im Design System zwischen den Themes umschaltest.

2. Typografie — die Stimme deines Blogs

Wenn Farben die Stimmung sind, dann ist die Schrift die Stimme. Eine Serif-Schrift wie Georgia klingt anders als eine moderne Sans-Serif wie System-UI. Und eine verspielte Schrift wie Fredoka erzählt nochmal eine ganz andere Geschichte.

In einem Design System legt man fest:

• Schriftfamilie für Überschriften und Fließtext
• Schriftgewichte — wie fett oder leicht die Schrift erscheint
• Größen für jede Hierarchie-Ebene (H1 bis H6, Fließtext, Kleintext)
• Zeilenhöhe und Abstände — wie viel Luft der Text zum Atmen hat

Das klassische Theme nutzt Georgia — eine Serifenschrift, die Wärme und Beständigkeit ausstrahlt. Die Überschriften sind fett (700), aber nicht zu schwer. Das passt zu einem Blog, der Tradition und Handwerk vermittelt.

Das Flat-Theme nutzt Segoe UI — nüchtern und klar. Dazu kommen Großbuchstaben (Uppercase) bei Labels und Sektionstiteln mit extra Buchstabenabstand (Letter-Spacing). Das ergibt einen technischen, magazine-artigen Look.

Das Verspielte Theme kombiniert Fredoka für Überschriften mit Nunito für den Fließtext. Beide sind abgerundet und freundlich. Die Überschriften sind extra-fett (700) und wirken fast wie handgemalt.

3. Komponenten — die Bausteine deiner Seiten

Auf den Farben und der Typografie bauen die Komponenten auf — die konkreten UI-Elemente, aus denen jede Seite besteht:

• Buttons in vier Varianten: Primary (auffällig), Secondary (dezent), Outline (nur Rahmen) und Ghost (fast unsichtbar, bis man drüber fährt)
• Karten für Rezepte, Blog-Beiträge und Services — jede mit Hover-Effekt, der zum Theme passt
• Formulare mit Eingabefeldern, Dropdowns, Checkboxen und einem kompletten Kontaktformular
• Navigation mit Header-Bar, Breadcrumbs, Pagination und Tabs
• Tags und Badges für Kategorien wie „Vegetarisch", „Schnelle Küche" oder „Glutenfrei"

Das Entscheidende: Jede dieser Komponenten nutzt nur die vorher definierten Design-Tokens. Ein Button kennt kein hartkodiertes „#B8860B" — er kennt nur var(--ds-primary). Wechselt man das Theme, ändern sich die Variablen, und alle Komponenten passen sich automatisch an.

Warum fünf Themes?

Jeder Foodblog hat eine andere Persönlichkeit. Ein Blog über traditionelle süddeutsche Küche braucht ein anderes Design als ein veganer Street-Food-Blog. Unsere fünf Themes decken ein breites Spektrum ab:

Diese Unterschiede wirken subtil, wenn man sie einzeln betrachtet — aber zusammen ergeben sie komplett unterschiedliche Welterfahrungen. Ein Button mit 0px Radius und Uppercase-Text fühlt sich fundamental anders an als derselbe Button mit 20px Radius in einer Handschrift-Font.

Vom Design System zur fertigen Rezeptseite

Ein Design System bleibt nicht abstrakt — es wird auf echten Seiten lebendig. Wie das konkret aussieht, könnt ihr euch an unserer Beispiel-Rezeptseite anschauen: die Cremige Tomatensuppe mit Basilikum. Hier seht ihr, wie Farben, Typografie und Komponenten zusammenspielen — von der Überschrift über die Zutatenliste bis zum Zubereitungsbereich.

Alle Rezeptseiten basieren auf denselben Design-Tokens. Das heißt: Ändert man die Primärfarbe, passt sich nicht nur ein einzelner Button an, sondern die gesamte Rezeptseite — Karten, Links, Akzente, alles.

Weitere Beispielrezepte findet ihr in unserem Rezeptindex.

Was bedeutet das für deinen Foodblog?

Ein Design System ist kein Luxus für große Firmen. Auch für einen Foodblog lohnt es sich, die visuellen Grundlagen einmal sauber zu definieren:

• Konsistenz: Jede Seite fühlt sich gleich an — vom Rezept über die Kategorieübersicht bis zum Kontaktformular
• Geschwindigkeit: Neue Seiten bauen sich fast von allein, weil alle Bausteine schon existieren
• Flexibilität: Will man in sechs Monaten den Look auffrischen, ändert man die Design-Tokens — nicht hunderte einzelner Seiten
• Professionalität: Besucher merken den Unterschied zwischen „zusammengewürfelt" und „durchdacht", auch wenn sie es nicht benennen können

Ausprobieren

Unser Design System ist eine interaktive Seite — ihr könnt die fünf Themes live durchschalten und sehen, wie sich Farben, Schriften und Komponenten verändern. Am besten einmal selbst anschauen:

Design System öffnen

Wenn euch eines der Designkonzepte gefällt oder ihr eine individuelle Variante für euren Foodblog möchtet, schaut euch gerne unser Angebot an — oder schreibt uns direkt an: business@foodblogliebe.de