Design System
All IO design tokens as CSS variables. Single source of truth for every component.
All tokens live in design-system/tokens.css. Import once, use everywhere.
--color-bg-primary (#fff), --color-bg-secondary (#f5f5f7), --color-bg-dark (#000), --color-bg-dark-secondary (#1d1d1f)
--color-text-primary (#1d1d1f), --color-text-secondary (#6e6e73), --color-text-on-dark (#f5f5f7), --color-text-on-dark-dim (#86868b)
--color-accent (#0071e3), --color-accent-on-dark (#2997ff)
Hero 80px, Display 56px, Title1 48px, Title2 28px, Title3 21px, Headline 17px (600), Body 17px (400), Subhead 15px, Footnote 13px, Caption 12px, Label 11px
--space-2 (8px base), --space-4 (16px), --space-6 (24px), --space-8 (32px), --space-12 (48px), --space-16 (64px), --space-20 (80px), --space-30 (120px)
--container-narrow (640px), --container-default (980px), --container-wide (1200px)
--radius-sm (8px), --radius-md (12px), --radius-lg (18px), --radius-xl (24px), --radius-pill (980px)
--ease-io cubic-bezier(0.25, 0.46, 0.45, 0.94), --duration-fast (150ms), --duration-base (300ms), --duration-slow (500ms)