Design Tokens
A comprehensive overview of typography and semantic color tokens used in the design system.
Fonts
Core font families that define primary typography.
The quick brown fox jumps over the lazy dog. — font-sans
The quick brown fox jumps over the lazy dog. — font-serif
The quick brown fox jumps over the lazy dog. — font-mono
Colors
ENVO — Brand
Black
brand-ink
#110929
Cobalt
brand
#4e20f5
Green
brand-green
#00806d
ENVO — Surface
Light Gray
surface-app
#f8f7fc
Light Blue
surface-interactive
#f2f2ff
ENVO — Accent
Lavender
accent-lavender
#bebff8
Neon Green
accent-mint
#89fac2
Neon Yellow
accent-yellow
#fff7b2
Neon Pink
accent-pink
#ffbce8
ENVO Token Reference
| Light | Dark | Token | CSS variable | Copy |
|---|---|---|---|---|
| brand | --color-brand | |||
| brand-foreground | --color-brand-foreground | |||
| brand-ink | --color-brand-ink | |||
| brand-green | --color-brand-green | |||
| brand-green-foreground | --color-brand-green-foreground | |||
| surface-app | --color-surface-app | |||
| surface-interactive | --color-surface-interactive | |||
| accent-lavender | --color-accent-lavender | |||
| accent-mint | --color-accent-mint | |||
| accent-yellow | --color-accent-yellow | |||
| accent-pink | --color-accent-pink |