Token Architecture
Three-tier structure where components always reference semantic tokens.
Token Reference
Each token includes Light/Dark mode values and WCAG AA contrast ratio (CR). Tokens can be edited and previewed in real time via Figma.
text
content-default
Headings, body copy
content-secondary
Nav items, sub-headings
content-muted
Placeholder, disabled
content-accent
Headings, body copy
link
Hyperlink text
link-hover
Hyperlink text (hover)
content-subtle
Large text / UI · AA 3:1 tuned (not a palette step)
content-faint
Disabled / decorative · WCAG-exempt
surfaces
surface-default
Cards, panels, containers
surface-canvas
Page canvas background
surface-raised
Slightly elevated surface
surface-highlight
Highlighted / accent surface
surface-overlay
Dropdowns, drawers, popovers
borders
edge-default
Table, section, component borders
edge-muted
Low-emphasis dividers
info
content-info
Info / note / accent colored text
surface-info
Info / note background
edge-info
Info / note border
success
content-success
Success text
content-success-accent
Success text without background
surface-success
Success background
edge-success
Success border
warning
content-warning
Warning text
content-warning-accent
Warning text without background
surface-warning
Warning background
edge-warning
Warning border
error
content-error
Error / danger text
surface-error
Error / danger background
edge-error
Error / danger border
graph-azure
graph-salmon
graph-olive
graph-pink
graph-steel
graph-teal
graph-amber
graph-sky
graph-macaron