Components

Navigation, Footer, Feature-Cards, Trust-Strip, Buttons — die wiederkehrenden Bausteine.

Fixed top, backdrop-filter: blur(20px), halbtransparenter --warm-white Hintergrund
Logo: "frag" in --forest, "Julia" in --sage, Cormorant Garamond 600
Links: Chat | Community | Wissen | Magazin | Julia
DM Sans 500, --text-secondary, Underline-Animation on hover
CTA-Button rechts: "Profil" (eingeloggt) oder "Julia fragen" (ausgeloggt), Pill, --sage Hintergrund
Mobile: Burger-Menu mit --cream Hintergrund, Illustration #5 (Quilt) als dezentes BG-Element

3-Spalten-Grid: Produkt | Wissen | Rechtliches
Logo-Wiederholung mit Tagline
Bottom-Bar: "Daten in der EU · DSGVO-konform" (NICHT "Made für Deutschland" — zu marketingsprachlich)
Trennlinie: rgba(168, 184, 154, 0.12)

Section-Header Pattern

Overline: --sage, uppercase, 0.75rem, spaced
Title: Cormorant Garamond 500, --forest
Subtitle: DM Sans, --text-secondary, max-width 520px
Spacing: Overline → Title: 1rem; Title → Subtitle: 1rem; Subtitle → Content: 3rem

Feature-Cards

Aktuelle Variante — keine Icon-Container mehr:

Hintergrund: --cream-light
Border: 1px solid rgba(168, 184, 154, 0.12)
Linke Farblinie: 3px solid, pro Card eine eigene Farbe (ersetzt Icons)
Radius: 20px
Padding: 2.2rem
Hover: translateY(-3px) + Box-Shadow + bottom-bar scaleX in --terracotta
KEINE abgerundeten Icon-Container — die wirken generisch / SaaS

Feature-Card-Farblinien:
  Frag Julia   →  3px left --sage
  Community    →  3px left --olive
  Wissen       →  3px left --sand
  Magazin      →  3px left --blush

Alternative: SVG-Illustrationen (#4, #1, #3, #10) bei 32px direkt inline, ohne Container.

Trust-Strip

Nur Text mit kleinen farbigen Dots (6px), keine abgerundeten Quadrat-Container:

Format: ● EU-Datenschutz ● Evidenzbasiert ● Anonym ● 24/7
Dots in --sage-light, Text in --text-secondary
Hintergrund: --cream

Buttons — zwei Systeme

1. Hero / CTA Buttons — `.fj-btn` (pill, 100px radius)

Primär (CTA):   bg --terracotta, color white, pill, padding 1rem 2rem, Pfeil-Icon
                → Terracotta = Handlungsfarbe, unterscheidet sich von der Info-Farbe Sage
Sekundär:       transparent, border 1px --sage/20%, color --text-secondary, pill
Ghost:          nur Text + Pfeil "→", color --sage
Info / Nav:     bg --sage, color white (für Nav-CTA, nicht für Haupt-CTAs)

2. UI / Form Buttons — `<Button>` React-Komponente (rounded-md, 16px radius)

Primary:      bg --sage, color --bg, hover: --olive
Secondary:    bg --bg, color --sage, border --sage
Ghost:        transparent, border --border, hover: --surface
Subtle:       transparent, color --bg, border white/22% (für dunkle Hintergründe)

Verwendet --fj-radius-md (16px) statt pill. Für Formulare, kleinere UI-Elemente und In-Page-Aktionen.

Quelle: DesignGUIDE/fragjulia-design-brief-v3.md §2.8.