Semantic tokens give meaning to raw primitives. They answer the question: 'What role does this token play in the user interface?'
Common Semantic Categories include:
color-bg-canvas (main background), color-bg-surface (cards, containers), color-bg-sunken (wells, inputs).color-text-primary (high contrast), color-text-secondary (body copy), color-text-muted (captions, disabled).color-feedback-success-bg, color-feedback-danger-text.color-interactive-default, color-interactive-hover, color-interactive-pressed.In Light Mode: color-bg-canvas = #F9FAFB and color-text-primary = #111827.
In Dark Mode: color-bg-canvas = #0F172A and color-text-primary = #F8FAFC.
Level 3 · Design Tokens & Foundations