1. Fonts 

Im Divi 5 → Varia­ble Mana­ger → Fonts

Varia­blen­na­me Wert
CDH / Font / Headline DM Serif Dis­play
CDH / Font / Body Inter

Die The­me-Grund­ein­stel­lung eben­falls:

  • Hea­ding Font → DM Serif Dis­play
  • Body Font → Inter

Design Varia­bles las­sen sich direkt mit den Typo­gra­fie-Fel­dern von Divi ver­bin­den.

 

2. Schriftgrößen als globale Variablen 

Die­se Opti­on Group Pre­sets sind ange­legt

Varia­ble Wert
CDH / Type / H1 clamp(42px, 5vw, 60px)
CDH / Type / H2 clamp(32px, 3.5vw, 44px)
CDH / Type / H3 clamp(25px, 2.5vw, 32px)
CDH / Type / H4 clamp(20px, 1.8vw, 24px)
CDH / Type / Lead clamp(18px, 1.5vw, 20px)
CDH / Type / Body 17px
CDH / Type / Small 14px
CDH / Type / Label 13px

Divi 5 unter­stützt bei Num­ber Varia­bles CSS-Funk­tio­nen wie clamp() und calc(), sodass wir Respon­si­ve Typo­gra­phy ohne drei sepa­ra­te Desk­top-/Ta­blet-/Mo­bil­wer­te rea­li­sie­ren kön­nen.

3. Typografie-Presets

Die­se Opti­on Group Pre­sets sind ange­legt

H1 – Seitentitel

DM Serif Dis­play

  • Weight: 400
  • Size: CDH / Type / H1
  • Line Height: 1.05
  • Let­ter Spa­cing: -0.01em

Bei­spie­le:

Vitel­lo Ton­n­a­to
Unse­re Rezep­te
Ita­lie­ni­sche Küche

H2 – Abschnitt

DM Serif Dis­play

  • Weight: 400
  • Size: CDH / Type / H2
  • Line Height: 1.10

Bei­spie­le:

Neu­es­te Rezep­te
Lan­des­kü­chen
Belieb­te Gerich­te

H3 – Unterüberschrift

DM Serif Dis­play

Weight: 400
Size: CDH / Type / H3
Line Height: 1.15

Bei­spie­le:

Zuta­ten
Zube­rei­tung
Nähr­wer­te

H4

Hier wechs­le ich bewusst zu Inter:

  • Inter
  • 600
  • CDH / Type / H4
  • Line Height 1.25

Für funk­tio­na­le Unter­glie­de­run­gen.

Body

Inter

  • Weight: 400
  • Size: 17 px
  • Line Height: 1.65

Das sind bei 17 px unge­fähr 28 px Zei­len­hö­he – sehr ange­nehm für län­ge­re Rezept­tex­te.

Lead / Ein­lei­tung

Inter

  • Weight: 400
  • Size: 18–20 px
  • Line Height: 1.6

Für Rezept­be­schrei­bun­gen oder Ein­lei­tungs­tex­te.

Meta

Inter Medi­um 500

  • 14 px
  • Line Height 1.4

Bei­spiels­wei­se:

45 Minu­ten · Mit­tel · 4 Por­tio­nen

Label

Inter Semi­Bold 600

  • 13 px
  • Line Height 1.3
  • Let­ter Spa­cing 0.06em

Bei­spiels­wei­se:

ITALIEN
HAUPTGERICHT
28 REZEPTE

4. Spacing-System

Hier soll­ten wir auf­hö­ren, irgend­wo will­kür­lich 37 px, 63 px oder 18 px ein­zu­tra­gen.

Wir ver­wen­den eine fes­te Ska­la.

Varia­ble Wert
CDH / Space / XXS 4px
CDH / Space / XS 8px
CDH / Space / S 12px
CDH / Space / M 16px
CDH / Space / L 24px
CDH / Space / XL 32px
CDH / Space / 2XL 48px
CDH / Space / 3XL 64px
CDH / Space / 4XL 96px

Genau für sol­che Spa­cing Sca­les sind Divis Num­ber Varia­bles gedacht.

5. Content-Breite

Eben­falls als Varia­blen.

Varia­ble Wert
CDH / Layout / Content 1200px
CDH / Layout / Text 760px
CDH / Layout / Narrow 640px

Für Fließ­tex­te und Rezept­be­schrei­bun­gen soll­te die Text­zei­le nicht über die gesam­te 1200-px-Sei­te lau­fen.

Die 760 px sor­gen für deut­lich ange­neh­me­re Les­bar­keit.

6. Border-Radius

Ich wür­de den Auf­tritt freund­lich gestal­ten, aber nicht in die der­zeit typi­sche SaaS-Welt mit rie­si­gen 30-px-Run­dun­gen abrut­schen las­sen.

Unse­re Ska­la:

Varia­ble Wert
CDH / Radius / Small 4px
CDH / Radius / Medium 8px
CDH / Radius / Large 12px
CDH / Radius / Card 12px
CDH / Radius / Pill 999px

Verwendung

Rezept­kar­ten: 12 px
Lan­des­kü­chen-Kacheln: 12 px
Bil­der: 8–12 px
Form­fel­der: 6–8 px
Kate­go­rie-Bad­ges: Pill

7. Schatten

Ich wür­de den Auf­tritt freund­lich gestal­ten, aber nicht in die der­zeit typi­sche SaaS-Welt mit rie­si­gen 30-px-Run­dun­gen abrut­schen las­sen.

Unse­re Ska­la:

Card Shadow
0 6px 24px rgba(0,0,0,0.08)

Card Hover
0 12px 32px rgba(0,0,0,0.12)

Soft Shadow
0 3px 12px rgba(0,0,0,0.06)

Kei­ne schwar­zen, schwe­ren Schlag­schat­ten.

8. Rezeptkarten

Das wird eines unse­rer wich­tigs­ten Ele­ment Pre­sets.

CDH / Card / Recipe

Bild

  • Sei­ten­ver­hält­nis unge­fähr 4:3
  • object-fit: cover
  • Radi­us oben: 12 px

Kar­te

  • Radi­us: 12 px
  • Hin­ter­grund: hell
  • Shadow: Soft
  • Over­flow hid­den

Innen­ab­stand

24 px

Kate­go­rie

Inter 600
13 px
Ver­sa­li­en
Let­ter spa­cing 0.06em

Titel

DM Serif Dis­play
26–30 px
Line Height 1.15

Beschrei­bung

Inter 16–17 px
Line Height 1.55

Meta

Inter 14 px

Hover

Kar­te:

translateY(-4px)

Schat­ten etwas stär­ker.

Bild:

scale(1.03)

Tran­si­ti­on unge­fähr:

300ms ease

Also Bewe­gung, aber kein ner­vö­ses Her­um­hüp­fen.

9. Landesküchen-Karten

Für die bereits geplan­te Ansicht:

CDH / Card / Country

Gro­ßes Food- oder Län­der­bild.

Dar­über bezie­hungs­wei­se dar­un­ter:

Italien

DM Serif Dis­play
30–34 px

42 REZEPTE

Inter Semi­Bold
13 px

Let­ter spa­cing:

0.06em

Die kom­plet­te Kar­te klick­bar.

Hover:

  • Bild ganz leicht ver­grö­ßern
  • Over­lay mini­mal ver­än­dern
  • Kar­te 3–4 px anhe­ben

Das eig­net sich sowohl für Lan­des­kü­chen als auch für den ent­spre­chen­den Abschnitt auf der Start­sei­te.

10. Buttons

Wir defi­nie­ren zwei Haupt­va­ri­an­ten

Primary Button

Inter Semi­Bold 600

15 px

Pad­ding:

14px 24px
Bor­der Radi­us:
6px
Kei­ne unnö­ti­ge Pil­len­form.

Hover

leicht dunk­ler
translateY(-1px)

Secondary Button

Glei­che Typo­gra­fie.

  • trans­pa­ren­ter Hin­ter­grund
  • 1 px Bor­der
  • pas­sen­de Text-/Pri­mär­far­be

Damit bekom­men wir bei­spiels­wei­se:

Rezept anse­hen

und sekun­där:

Alle Rezep­te

11. Navigation

Die Navi­ga­ti­on bleibt kom­plett Inter

Desktop

Inter 600
15 px
Line Height 1

Ich wür­de kei­ne DM Serif Dis­play im Menü ver­wen­den.

Die Seri­fen­schrift soll ihre Wir­kung bei redak­tio­nel­len Inhal­ten ent­fal­ten.

12. Formulare

Inter 16 px

Form­fel­der:

  • Höhe ca. 48–52 px
  • Radi­us 6–8 px
  • Bor­der 1 px
  • Hin­ter­grund sehr hell
  • Pad­ding 14–16 px

Labels:

Inter 600
14 px

Divi 5 bie­tet auch für For­mu­lar­fel­der eige­ne Typografie‑, Bor­der- und Shadow-Grup­pen, sodass wir hier­für eben­falls ein Pre­set anle­gen kön­nen.

13. Bilder

Ich wür­de eine fes­te Regel auf­stel­len:

Rezeptbilder

4:3

Hero-/Titelbilder

16:9 oder etwa 2:1

Landesküchen

3:2 bezie­hungs­wei­se 4:3

Personen

4:5

Und mög­lichst nicht unter­schied­li­che Sei­ten­ver­hält­nis­se wild inner­halb eines Grids mischen.

14. Das komplette System im Überblick

CDH
│
├─ COLORS
│ ├─ Pri­ma­ry
│ ├─ Secon­da­ry
│ ├─ Accent
│ ├─ Text
│ ├─ Text Muted
│ ├─ Back­ground
│ ├─ Sur­face
│ └─ Bor­der
│
├─ FONTS
│ ├─ Head­line → DM Serif Dis­play
│ └─ Body → Inter
│
├─ TYPE
│ ├─ H1
│ ├─ H2
│ ├─ H3
│ ├─ H4
│ ├─ Lead
│ ├─ Body
│ ├─ Small
│ └─ Label
│
├─ SPACE
│ ├─ XXS → 4px
│ ├─ XS → 8px
│ ├─ S → 12px
│ ├─ M → 16px
│ ├─ L → 24px
│ ├─ XL → 32px
│ ├─ 2XL → 48px
│ ├─ 3XL → 64px
│ └─ 4XL → 96px
│
├─ RADIUS
│ ├─ Small → 4px
│ ├─ Medi­um → 8px
│ ├─ Lar­ge → 12px
│ └─ Pill → 999px
│
└─ LAYOUT
├─ Con­tent → 1200px
├─ Text → 760px
└─ Nar­row → 640px

Opti­on Group Pre­sets sind in Divi 5 bewusst modul­über­grei­fend wie­der­ver­wend­bar, wäh­rend Ele­ment Pre­sets anschlie­ßend den kom­plet­ten Modul­typ defi­nie­ren kön­nen.

15. Die Farbpalette

1. Kernfarben aus dem Logo

Rol­le Name HEX Ein­satz
Pri­ma­ry Cham­pa­gner-Gold #FDD58F Haupt­mar­ken­far­be, But­tons, High­lights, Icons
Accent Zitro­nen­gelb #FFF155 Akzen­te, Labels, klei­ne Her­vor­he­bun­gen
Secon­da­ry / Dark Tief­schwarz #000000 Logo-Hin­ter­grund, dunk­le Flä­chen, star­ke Kon­tras­te

2. Ergänzende Systemfarben

Damit die Sei­te nicht nur aus Schwarz und Gelb besteht, brau­chen wir ruhi­ge Begleit­far­ben:

Rol­le Name HEX Ein­satz
Text Soft Black #161616 Stan­dard-Fließ­text
Text Muted Warm Gray #6C6558 Meta­da­ten, sekun­dä­re Infos
Back­ground Warm Ivo­ry #FFF9EF Sei­ten­hin­ter­grund
Sur­face Light Cream #FFF4DE Kar­ten, Boxen, her­vor­ge­ho­be­ne Flä­chen
Bor­der Soft Sand #E8D8B3 Lini­en, Rah­men, Tren­nun­gen

3. Hover- und Zustandsfarben

Für But­tons und Inter­ak­tio­nen:

Rol­le Name HEX
Pri­ma­ry Hover Dar­ker Gold #E9C175
Accent Hover Dar­ker Lemon #EBDD42
Dark Hover Char­co­al Black #1A1A1A 
CDH / Color / Primary        → #FDD58F
CDH / Color / Primary Hover  → #E9C175
CDH / Color / Accent         → #FFF155
CDH / Color / Accent Hover   → #EBDD42
CDH / Color / Dark           → #000000
CDH / Color / Text           → #161616
CDH / Color / Text Muted     → #6C6558
CDH / Color / Background     → #FFF9EF
CDH / Color / Surface        → #FFF4DE
CDH / Color / Border         → #E8D8B3

16. Einsatz der Farben

1. Seitenhintergrund

Back­ground #FFF9EF

Das gibt der Sei­te Wär­me und einen kuli­na­ri­schen, leicht cre­mi­gen Cha­rak­ter. Rei­nes Weiß wäre mir hier zu kühl.

2. Text

  • Stan­dard­text: Text #161616
  • Sekun­dä­re Infos: Text Muted #6C6558

Damit bleibt alles gut les­bar, ohne dass die Sei­te zu hart wirkt.

3. Headlines

Die Head­lines in DM Serif Dis­play wür­de ich meist in:

  • Dark #000000
    oder
  • Text #161616

set­zen.

Für ein­zel­ne High­lights kann man Pri­ma­ry #FDD58F ein­set­zen, aber nur spar­sam.

4. Karten / Rezeptboxen

Für Kar­ten wür­de ich neh­men:

  • Hin­ter­grund: Sur­face #FFF4DE
  • Bor­der: Bor­der #E8D8B3
  • Text: Text #161616

Das wirkt freund­li­cher als rein wei­ße Kar­ten.

5. Buttons

Primary Button

  • Hin­ter­grund: Pri­ma­ry #FDD58F
  • Text: Dark #000000
  • Hover: Pri­ma­ry Hover #E9C175

Secondary Button

  • Hin­ter­grund: Dark #000000
  • Text: Pri­ma­ry #FDD58F
  • Hover: Dark Hover #1A1A1A

Accent Button / Badge

  • Hin­ter­grund: Accent #FFF155
  • Text: Dark #000000
  • Hover: Accent Hover #EBDD42

Ganz wichtige Kontrastregel

Die bei­den hel­len Mar­ken­far­ben sind wun­der­schön — aber:

Nie weiße Schrift auf Gold oder Gelb

also kein Weiß auf #FDD58F oder #FFF155.

Das ist kon­trast­arm und schlecht les­bar.

Statt­des­sen immer:

  • schwar­zer / sehr dunk­ler Text auf Gold/Gelb
  • gol­de­ner Text auf schwar­zem Hin­ter­grund

Das passt per­fekt zum Logo.

Farbverteilung auf der Website

Ich wür­de unge­fähr mit die­ser Gewich­tung arbei­ten:

  • 70 % hel­le Flä­chen
    (Background, Surface)
  • 20 % dunk­le Typo­gra­fie und dunk­le Funk­ti­ons­flä­chen
    (Text, Dark)
  • 10 % Mar­ken- und Akzent­far­ben
    (Primary, Accent)

So bleibt die Sei­te ele­gant und nicht zu laut.

Anwendung auf die Elemente

Rezeptkarten

  • Kar­te: Surface
  • Titel: Text
  • Meta: Text Muted
  • Kate­go­rie-Badge: Accent
  • CTA-But­ton: Primary

Landesküchen-Kacheln

  • Bild + dunk­les Over­lay
  • Titel: #FFFFFF oder Primary
  • Rezep­tan­zahl-Badge: Accent mit dunk­lem Text

Header / Navigation

  • Hin­ter­grund: Background oder #FFFFFF
  • Menü­punk­te: Text
  • Hover: Primary
  • Akti­ver Menü­punkt: Dark oder Primary

Footer

Hier darf es dunk­ler wer­den:

  • Hin­ter­grund: Dark
  • Über­schrif­ten: Primary
  • Text: #F7E7C1 oder #FFFFFF
  • Links Hover: Accent