Design System
Visual reference for theme colors, typography, and utilities.
Color Tokens
Surface
Theme AwareLight
--color-surface
--color-on-surface
Dark
--color-surface-dark
--color-on-surface-dark
Surface Alt
Theme AwareLight
--color-surface-alt
--color-on-surface
Dark
--color-surface-dark-alt
--color-on-surface-dark
Primary
Theme AwareLight
--color-primary
--color-on-primary
Dark
--color-primary-dark
--color-on-primary-dark
Secondary
Theme AwareLight
--color-secondary
--color-on-secondary
Dark
--color-secondary-dark
--color-on-secondary-dark
Status Colors
Info
--color-info
--color-on-info
Success
--color-success
--color-on-success
Warning
--color-warning
--color-on-warning
Danger
--color-danger
--color-on-danger
Text Colors
Muted
The quick brown fox jumps over the lazy dog.
Secondary copy, helper text, and captions.
--color-on-surface-muted
--color-on-surface-dark-muted
On Surface
The quick brown fox jumps over the lazy dog.
Primary body copy and paragraphs.
--color-on-surface
--color-on-surface-dark
Strong
The quick brown fox jumps over the lazy dog.
Emphasis text, stats, and bold highlights.
--color-on-surface-strong
--color-on-surface-dark-strong
Typography Scale
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Font Families
Body Font
Grumpy wizards make toxic brew
--font-body
Title Font
Grumpy wizards make toxic brew
--font-title
Mono Font
const code = true;
font-mono