Design system

Apply with design when implementing UI: components, pages, or design systems. Every color, type, and motion choice should trace back to these rules.

Token architecture

All colors map to a small set of primitives. No random hex values.

• Foreground: Text hierarchy (primary, secondary, muted).
• Background: Surface elevation (base, raised, overlay).
• Border: Separation hierarchy (subtle, default, emphasis).
• Brand: Identity and primary accent.
• Semantic: Destructive, warning, success (and optional info).

Use tokens in code (CSS variables, theme objects); never hardcode hex for UI.

Typography