Design Tokens
The foundational values — color, type, and spacing — that define the visual language of the site.
Type Scale
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Typefaces
Aa Bb Cc 0123
--font-body · System font stack
-apple-system, BlinkMacSystemFont, Segoe UI, Roboto…
Aa Bb Cc 0123
--font-heading · Montserrat
Used for all headings when font is loaded.
Spacing Scale
Color Tokens
Default — Text
--default-text-strong
--default-text
--default-text-medium
--default-text-weak
--default-text-strong-inverse
--default-text-inverse
--default-text-medium-inverse
--default-text-weak-inverse
Default — Surface
--default-surface
--default-surface-secondary
--default-surface-medium
--default-surface-weak
--default-surface-inverse
--default-surface-strong-inverse
--default-surface-medium-inverse
--default-surface-weak-inverse
Default — Border
--default-border-strong
--default-border
--default-border-weak
--default-border-inverse
--default-border-strong-inverse
--default-border-weak-inverse
Default — Background
--default-background
--default-background-strong
--default-background-weak
--default-background-inverse
--default-background-strong-inverse
--default-background-weak-inverse
Action
--action-background
--action-link
--action-link-hover
--action-link-visited
--action-link-inverse
--action-text
--action-text-inverse
--action-border
--action-border-weak
Success
--success-text
--success-background
Warning
--warning-text
--warning-background
Danger
--danger-text
--danger-background