experience-and-design-systemlisted

# 10 — Experience and Design System ## The Apple Test After every design: would Apple's design team find this acceptable? - Two elements compete: remove one - Crowded: whitespace - Busy type: reduce sizes, increase weight contrast - Final: 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 to needed chars, self-host (never Google Fonts CDN), `font-display:swap` ```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.25rem); --text-xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.1rem + 2vw, 2rem); --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem); --text-4xl: clamp(2.5rem, 1.5rem + 5vw, 4.5rem); --text-hero: clamp(3rem, 2rem + 5vw, 6rem); } ``` - Body min 16px (prefer 18) · Line-height 1.6 body, 1.1-1.2 headings · Letter-spaci