Semantic Color Tokens
Explore how semantic tokens map between light and dark modes for consistent design across themes.
Background Colors
Colors used for backgrounds of UI elements and containers.
Text & Border Colors
Colors used for text content, typography, borders, and outlines.
Surface Colors
Colors used for UI surfaces like cards, modals, and panels.
Semantic Color Equivalents
See how semantic tokens map between light and dark modes for consistent design
text Tokens
Colors used for text content and typography
D
default
Semantic token
Light Mode
neutral.900
Dark Mode
neutral.50
#111827
#111827
M
muted
Semantic token
Light Mode
neutral.600
Dark Mode
neutral.300
#4B5563
#4B5563
S
subtle
Semantic token
Light Mode
neutral.600
Dark Mode
neutral.400
#4B5563
#6B7280
I
inverted
Semantic token
Light Mode
neutral.50
Dark Mode
neutral.900
#F9FAFB
#F9FAFB
O
on-primary
Semantic token
Light Mode
primary.50
Dark Mode
primary.50
#EBF8FF
#003A6B
O
on-secondary
Semantic token
Light Mode
secondary.50
Dark Mode
secondary.50
#F3EEFF
#251070
O
on-success
Semantic token
Light Mode
success.50
Dark Mode
success.50
#ECFDF5
#064E3B
O
on-warning
Semantic token
Light Mode
warning.50
Dark Mode
warning.50
#FFFBEB
#78350F
O
on-error
Semantic token
Light Mode
error.50
Dark Mode
error.50
#FEF2F2
#7F1D1D
O
on-info
Semantic token
Light Mode
info.50
Dark Mode
info.50
#ECFDFF
#164E63