Design
Color
Farbpalette und Sektions-Rhythmus — V2 "Julias Decke".
Farbpalette
KERN (70% der Farbfläche)
Token Hex Verwendung
──────────────────────────────────────────────────────────
--forest #2D3A24 Primärtext, Headlines, dunkelster Ton, Quote-Section-BG
--olive #4A5D3A Sekundärer Akzent, Hover-States
--sage #6B7F5E Primärfarbe (Info-Buttons, Links, Akzente)
--sage-light #A8B89A Dezente Akzente, Badges, Divider
--mint #B8C8B0 Hintergrund-Akzente, Glow-Effekte
--cream #F5EDE0 Card-Hintergründe, CTA-Flächen, Evidence-Section-BG
--cream-light #FAF6F0 Sekundärer Card-Hintergrund
--warm-white #F8F4ED ← Seiten-Hintergrund (NICHT #FFF)
SUPPORT (20%)
──────────────────────────────────────────────────────────
--sand #D4C4A8 Warme Akzente, Card-Borders
--blush #E8D8C8 Tertiäre Akzente, Magazin-Kategorie
AKZENT (10% — sparsam, nie dominant)
──────────────────────────────────────────────────────────
--terracotta #C4826E CTA-Buttons, Handlungsfarbe, Hover-Bottom-Bars
--terracotta-light #D4A594 Kategorie-Badges (emotionale Themen)
--terracotta-muted #E8CFC6 Hintergrund-Akzent für Alltag-Section
TEXT
──────────────────────────────────────────────────────────
--text-primary #2D3A24 Fließtext-Hauptfarbe
--text-secondary #5A6B50 Subtexte, Beschreibungen
--text-muted #607553 Platzhalter, Metadaten (WCAG AA ≥4.5:1)Farblogik
- Sage = Information, Orientierung, Marke
- Terracotta = Handlung, Emotion, Akzent (CTA-Buttons, emotionale Kategorien)
- Forest = Ruhe, Kontrast (Dark Quote Section)
- Cream-Töne = Hintergrund-Rhythmus (siehe unten)
Wichtig: Terracotta wird NICHT überall verwendet. Nur an maximal 3–4 Stellen pro Seite. Es ist der Komplementärkontrast zum Sage-Grün und kommt direkt aus dem Moodboard (Kinderzeichnung, Strampler-Streifen).
Sektions-Rhythmus
Die Seite wechselt rhythmisch zwischen drei Hintergrundtönen. Das gibt dem Scrollen Struktur:
Section Hintergrund Effekt
──────────────────────────────────────────────────────────────────
Hero --warm-white Standard
Trust-Strip --cream Leicht dunkler
Features --warm-white Standard
Quote (Julia) --forest DUNKLER BREAK ←
Alltag Sage-Tint * Farbiger
Evidence --cream Leicht dunkler
FAQ --warm-white Standard
CTA-Footer --cream Leicht dunklerSage-Tint für Alltag-Section:
background: linear-gradient(180deg,
rgba(168, 184, 154, 0.06) 0%,
rgba(168, 184, 154, 0.12) 50%,
rgba(168, 184, 154, 0.06) 100%
);Zusätzlich: horizontale 1px Trennlinien (rgba(168, 184, 154, 0.12)) an Sektionsgrenzen, wo der Farbwechsel allein nicht reicht.
Quelle: DesignGUIDE/fragjulia-design-brief-v3.md §2.1 (Farbpalette) + §2.2 (Sektions-Rhythmus). Token-Definitionen (TypeScript + CSS) in packages/ui/src/tokens.ts bzw. packages/ui/src/styles/tokens.css.