Token architecture, component specifications, and design system creation. Invoke when creating design tokens, CSS variable systems, spacing/typography scales, component specs, or systematic design patterns.
Token architecture, component specifications, and systematic design.
Primitive (raw values)
|
v
Semantic (purpose aliases)
|
v
Component (component-specific)
Example:
/* Primitive */
--color-blue-600: #2563EB;
/* Semantic */
--color-primary: var(--color-blue-600);
/* Component */
--button-bg: var(--color-primary);
| Property | Default | Hover | Active | Disabled |
|---|---|---|---|---|
| Background | primary | primary-dark | primary-darker | muted |
| Text | white | white | white | muted-fg |
| Border | none | none | none | muted-border |
| Shadow | sm | md | none | none |
/* CORRECT - uses token */