Component tokens
Top layer of a 3-tier token system: component-specific scope. Examples: `button-primary-bg-default`, `button-primary-bg-hover`, `card-padding-md`. Reference semantic tokens (never primitives directly) and embody the visual API of a given component. DTCG spec + Subatomic course (Brad & Ian Frost) make it the canonical top layer.
Strengths
- Encapsulates component variants, the DS fully controls visual expression
- Allows reskinning a component without touching the semantic layer
- DTCG spec: type example via `$type: 'color'` + `$value: '{color.action.primary}'`
Limitations
- Combinatorial explosion if poorly scoped, `button-primary-bg-default-hover-disabled` etc.
- Maintenance overhead for small DS, rule of thumb: do not create them before 30 components
Best for
- DS with >100 components or multi-brand needing component variants
- Teams who must reskin regularly (seasons, partnerships, sub-brands)