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: