Design Tokens
Nine visual systems. One token format.
Clean
data-theme="ds-clean"Background
Foreground
Primary
Border
Background Subtle
Aa01
Velvet
data-theme="ds-velvet"Background
Foreground
Primary
Border
Background Subtle
Aa01
Brutalist
data-theme="ds-brutalist"Background
Foreground
Primary
Border
Background Subtle
Aa01
Editorial
data-theme="ds-editorial"Background
Foreground
Primary
Border
Background Subtle
Aa01
Onyx
data-theme="ds-onyx"Background
Foreground
Primary
Border
Background Subtle
Aa01
Aurum
data-theme="ds-aurum"Background
Foreground
Primary
Border
Background Subtle
Aa01
Neon
data-theme="ds-neon"Background
Foreground
Primary
Border
Background Subtle
Aa01
Nature
data-theme="ds-nature"Background
Foreground
Primary
Border
Background Subtle
Aa01
Swiss
data-theme="ds-swiss"Background
Foreground
Primary
Border
Background Subtle
Aa01
Semantic Token Reference
How semantic color tokens resolve across each design system.
TokenCleanVelvetBrutalistEditorialOnyxAurumNeonNatureSwiss
--color-semantic-background--color-semantic-foreground--color-semantic-primary--color-semantic-border--color-semantic-background-subtle