Token System

Why tokens matter

The token system makes one codebase serve 3 brands. Component SCSS uses token variables → each brand provides different values → same SCSS produces different visual output. Breaking the token contract breaks multi-brand.

Token hierarchy

Raw ($core-ouds-*)       → never use in components
  ↓
Semantic ($ouds-space-*) → use for non-color values
  ↓
Component ($ouds-btn-*)  → preferred when available
  ↓
CSS custom props (--bs-color-*) → use for ALL colors (dark mode)