experience-and-design-systemlisted

# 10 — Experience and Design System Build anti-AI-slop premium interfaces: dark-first OKLCH color, fluid `clamp()` type, DTCG tokens, View Transitions on every public-facing surface. **Apple Test** — after every design: two elements compete → remove one; crowded → add whitespace; busy type → reduce sizes, increase weight contrast; final feel: effortless, inevitable. ## CSS Patterns - Overlay `rgba(0,0,0,0.81)` · Text shadow `1px 1px 1px rgba(255,255,255,0.333)` · Box shadow `2px 2px 2px rgba(0,0,0,0.69)` - Border-radius 5px interactive, 10px containers (never 0, never pill) - Hero padding 40px · Max text 720px · Line-height 1.4 - Letter-spacing: 0.4px labels, 0.5px nav, 1px titles, 1.4px CTAs - CTA uppercase always · Button 700 always · Reference: Linear, Notion, Stripe ## Typography - Body: Sora 400/500 · Headings: Space Grotesk 600/700 · Mono: JetBrains Mono 400/500 · Display: Clash Display 700 (hero only) - Variable fonts: WOFF2, subset, self-host (never Google Fonts CDN), `font-display:swap` - Body min 16px (prefer 18) · Line-height 1.6 body, 1.1-1.2 headings · Letter-spacing -0.02em >2rem · Max 65ch - Never skip levels. Scale: Minor Third 1.2 general, Perfect Fourth 1.333 marketing - `text-wrap:balance` headings, `text-wrap:pretty` paragraphs ```css :root { --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1