Implementation

Framework-Empfehlung

• Next.js (App Router) auf Vercel
• Tailwind CSS mit Custom-Theme aus dem Tokensystem
• Framer Motion für Animationen
• Radix UI Primitives für Akkordeon, Toggle, Dialog

Tailwind-Konfiguration

// tailwind.config.js (auszugsweise)
theme: {
  extend: {
    colors: {
      forest: '#2D3A24',
      olive: '#4A5D3A',
      sage: { DEFAULT: '#6B7F5E', light: '#A8B89A' },
      mint: '#B8C8B0',
      cream: { DEFAULT: '#F5EDE0', light: '#FAF6F0' },
      sand: '#D4C4A8',
      blush: '#E8D8C8',
      'warm-white': '#F8F4ED',
      terracotta: { DEFAULT: '#C4826E', light: '#D4A594', muted: '#E8CFC6' },
    },
    fontFamily: {
      serif: ['Cormorant Garamond', 'serif'],
      sans: ['DM Sans', 'sans-serif'],
    },
    borderRadius: {
      card: '20px',
      pill: '100px',
      icon: '14px',
    },
    maxWidth: {
      container: '1080px',
      prose: '720px',
      chat: '680px',
    }
  }
}

apps/web nutzt heute Tailwind v4 mit @theme inline in globals.css — das obige Objekt ist der äquivalente Legacy-Schnitt. Quelle der Wahrheit ist weiterhin der :root-Block in globals.css bzw. die geteilten Tokens unter packages/ui/src/tokens.ts.

Performance

• Fonts: display=swap, preconnect zu Google Fonts
• Bilder: WebP / AVIF mit Fallback, lazy-loading
• Animationen: prefers-reduced-motion respektieren
• Lighthouse-Ziel: ≥90 in allen Kategorien

Barrierefreiheit

• Alle interaktiven Elemente keyboard-navigierbar
• Focus-Styles: 2px solid --sage, 2px Offset
• Farbkontrast: mindestens AA (forest auf cream ≥ 4.5:1 — prüfen)
• aria-label auf Icon-Buttons
• Akkordeon: aria-expanded, aria-controls
• Chat: aria-live="polite" für neue Nachrichten

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