fragJulia
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 dunkler

Sage-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.

On this page