Design Tokens
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes.
Color Palette
Our color system uses semantic tokens that adapt to light and dark themes.
Primary
Used for primary actions and focus states
primary-50
primary-100
primary-200
primary-300
primary-400
primary-500
primary-600
primary-700
primary-800
primary-900
Secondary
Used for secondary actions and hover states
secondary-50
secondary-100
secondary-200
secondary-300
secondary-400
secondary-500
secondary-600
secondary-700
secondary-800
secondary-900
Semantic Colors
Background
Used for page and component backgrounds
background
muted
Foreground
Used for text and icons
foreground
muted-foreground
Usage in Code
tsx
// Using color tokens in Tailwind classes
<div className="bg-background text-foreground">
<p className="text-primary">Primary text</p>
<p className="text-secondary">Secondary text</p>
<p className="text-muted-foreground">Muted text</p>
</div>
// Using CSS variables directly
<div style={{ backgroundColor: 'var(--background)', color: 'var(--foreground)' }}>
<p style={{ color: 'var(--primary)' }}>Primary text</p>
</div>