Token Naming

General rules

Layer	Prefix	Example (code)	Example (Figma)
Primitive	`--color-green-600`	`var(--color-green-600)`	`primitive/color/green/600`
Semantic	`--color-action-primary`	`var(--color-action-primary)`	`semantic/color/action/primary`
Component	`--button-primary-bg`	`var(--button-primary-bg)`	`component/button/primary/bg`

Kebab segments in code are split into separate Figma path parts:

Code name	Figma path
`color-action-primary`	`semantic/color/action/primary`
`button-primary-bg-hover`	`component/button/primary/bg/hover`
`color-green-50`	`primitive/color/green/50`

Semantic color token naming follows a {domain}-{variant} pattern:

Domain	Variants
`surface`	(default), `alt`, `muted`
`text`	`primary`, `muted`, `subtle`, `inverse`
`action`	`primary`, `primary-hover`, `secondary`
`border`	`default`, `subtle`, `strong`
`status`	`success`, `error`, `warning`, `info` + `-soft`, `-strong`
`link`	(default), `hover`

Numeric scale: spacing.0 through spacing.24, plus half-steps (0.5, 1.5, 2.5, 3.5).

Named layers instead of magic numbers: