So sieht das Design System des Foodblogliebe Themes aus Zurück zur Übersicht

Design System Softly

Ein warmes, minimalistisches Designsystem für Foodblogliebe. Fokus auf Typografie, taktile Texturen und sanfte Farben.

Farben

Die Palette kombiniert das Marken-Plum mit sanften Hintergrundtönen (Sage, Lavender) und warmem Gold als Akzent.

Brand Colors

Plum (Primary)
#b83b69
--color-primary
Plum Dark
#922f53
--color-primary-dark
Gold (Accent)
#b8860b
--color-accent

Softly Theme Palette

Soft White (Bg)
#FDFCF8
--color-bg
Sage
#E8EFE8
--color-sage
Lavender
#EFEDF4
--color-lavender
Soft Black
#292524
--color-text

Typografie

Outfit für Überschriften und Fließtext, Reenie Beanie für handgeschriebene Akzente.

Headline 1 — Outfit Bold

Headline 2 — Outfit Bold

Headline 3 — Outfit SemiBold

Headline 4 — Outfit SemiBold

Headline 5 — Outfit SemiBold
Headline 6 — Uppercase

Das ist der Standard-Fließtext. Hier ist ein Akzent in Cursive. Die Typografie ist modern, geometrisch und gut lesbar. Zeilenhöhe und Abstände sorgen für ein luftiges Leseerlebnis.

"Foodblogliebe ist mehr als nur Rezepte. Es ist eine Gemeinschaft für Kreative."

Icons

Alle Icons kommen aus einem einzigen SVG-Sprite (partials/icon_sprite.html, in base.html eingebunden). Eingebunden wird immer per <svg class="ds-icon"><use href="#icon-..."/></svg>, die Farbe kommt über currentColor vom umgebenden Text.

Größen

ds-icon (1em)
ds-icon-sm (16px)
ds-icon-md (18px)
ds-icon-lg (24px)

Alle Symbole

icon-facebook
icon-pinterest
icon-whatsapp
icon-email
icon-list
icon-link
icon-comment
icon-book
icon-lock
icon-check
icon-x
icon-chevron-left
icon-chevron-right
icon-phone
icon-calendar
icon-send
icon-user
icon-globe
icon-edit
icon-arrow-right
icon-refresh
icon-heart
icon-instagram
icon-youtube
icon-tiktok
icon-clock
icon-star
icon-chef-hat
icon-search
icon-eye
icon-pointer
icon-trend-up
icon-layers
icon-tag
icon-alert
icon-target
icon-file-text

Buttons & Links

Text Links haben einen Underline-Effekt und nutzen die Primärfarbe.

Tag 1RezeptVegan

Menü-Button

.nav-cta hebt genau einen Eintrag im Hauptmenü als Button hervor, etwa die Newsletter-Anmeldung oder die Rezeptsuche. Er wird über die Navigation in config.yaml gesetzt und im Header als li.nav-cta-item ausgegeben. Auf dem Handy steht er mit etwas Abstand unter den übrigen Menüpunkten.

Icon-Badge

.fa-icon-badge ist das abgerundete Feld mit Icon über Infokarten, etwa für Küchentipps, Vorratshaltung oder Saisonthemen. Das Icon nimmt die Primärfarbe an, der Hintergrund ist eine helle Plum-Fläche.

Karten

Karten haben weiche Schatten, große Radien (2rem) und einen Hover-Lift-Effekt.

FOTOGRAFIE12. Jan 2026

10 Tipps für bessere Food-Fotos

Licht, Komposition und Styling: So setzt du deine Gerichte perfekt in Szene.

BACKEN

Saftiger Zitronenkuchen

Ein Klassiker, der immer gelingt. Mit extra viel Zitrone und Guss.

Molecules

Kleine, wiederverwendbare UI-Elemente wie Social Buttons, Badges und Autoren-Infos.

Social Sharing

Status Badges

VeröffentlichtEntwurfNeu

Author & Rating

KatharinaFood Stylist

Chips & Rezept-Metadaten

Kleine Bausteine, die auf jeder Rezeptkarte wiederkehren: der Kategorie-Chip auf dem Bild und die Metadaten-Zeile mit Zubereitungszeit, Schwierigkeit und Bewertung.

Kategorie-Chip

Kuchen

.rp-chip sitzt absolut positioniert oben links auf dem Rezeptbild und nennt die Kategorie. Der Container darum braucht position: relative; hier steht eine Sage-Fläche stellvertretend für das Bild.

Metadaten-Zeile

60 Min.einfach4,8 (126)

.rp-card-meta mit icon-clock, icon-chef-hat und der Bewertung .rp-rating in Gold. Bricht auf schmalen Karten automatisch um.

Formulare