Design
Spacing, Radii, Shadows, Motion
Die geometrischen Grundlagen — kompakter als typische SaaS-Templates, organischer als Material Design.
Spacing-System
Token Wert Verwendung
──────────────────────────────────────
xs 0.5rem Inline-Gaps, Badge-Padding
sm 1rem Card-interne Abstände
md 1.5rem Grid-Gaps, Section-Übergänge
lg 2.5rem Section-Padding horizontal
xl 5rem Section-Padding vertikalWichtig: Die V1-Redesign hatte zu viel vertikalen Whitespace. Sections bekommen
padding: 5rem 2.5remstatt7rem. Hero ist92vhstatt100vh. Alles etwas dichter, kompakter — ohne eng zu wirken.
Max-Width Container: 1080px (nicht 1200px — kompakteres, fokussierteres Layout).
Border-Radii
Komponente Radius
──────────────────────────────────
Hero/CTA Buttons 100px (pill) — .fj-btn
UI/Form Buttons 16px — <Button> Komponente
Cards 20px
Icon-Container 14px
Chat-Bubbles 18px (6px an Ecke des Absenders)
Eingabefelder 100px (pill) oder 12px
Badges 100pxSchatten & Tiefe
Zustand Box-Shadow
──────────────────────────────────────────────────
Ruhezustand keine
Hover (Cards) 0 12px 40px rgba(45, 58, 36, 0.06)
Buttons 0 4px 20px rgba(107, 127, 94, 0.2)
Buttons:hover 0 8px 30px rgba(107, 127, 94, 0.3)Keine harten Schatten. Alles diffus, organisch.
Animationen
Typ Easing Dauer
──────────────────────────────────────────────
Fade-up (Seite) ease-out 1s
Chat-Bubbles ease-out + delay 0.6s (gestaffelt 0.5s Intervall)
Hover-Translate ease 0.4s
Color-Transitions ease 0.3s
Pulse (Badge-Dot) infinite 2s
Card bottom-bar ease (scaleX) 0.4sQuelle: DesignGUIDE/fragjulia-design-brief-v3.md §§ 2.4–2.7.