Design System
The same tokens, typography, spacing, and motion that make apple.com feel premium and effortless. Every page has an AI-readable markdown twin at /md
/md
All CSS variables — colors, typography, spacing, motion, layout. Single source of truth.
Full color palette with light mode, dark mode, accent, and semantic colors.
SF Pro type scale — hero through caption. Weights, sizes, and tracking.
8px base grid system. Section padding, component spacing, layout rhythm.
Easing curves, durations, and scroll animation system.
Buttons, cards, navigation, layout utilities, and section patterns.