Tokens
Semantic tokens that reference primitives. These define the meaning of design values in context.
Layer Colors
Background colors for different layers and states in the UI.
base--layer-base
color.neutral.950
surface--layer-surface
color.neutral.900
overlay--layer-overlay
color.neutral.800
spotlight--layer-spotlight
color.neutral.700
input--layer-input
color.neutral.1000
hover--layer-hover
color.opacity.light.base
active--layer-active
color.opacity.light.secondary
hype--layer-hype
color.brand.500
glow--layer-glow
color.brand.200
fade--layer-fade
fade.50
Text Colors
Text colors for content on layer backgrounds.
primary--onLayer-text-primary
color.neutral.50
secondary--onLayer-text-secondary
color.neutral.400
tertiary--onLayer-text-tertiary
color.neutral.500
link--onLayer-text-link
color.neutral.50
Border Colors
Border colors for elements on layer backgrounds.
base--onLayer-border-base
color.opacity.light.base
secondary--onLayer-border-secondary
color.opacity.light.secondary
focus--onLayer-border-focus
color.brand.500
Icon Colors
Icon colors for elements on layer backgrounds.
base--onLayer-icon-base
color.neutral.50
secondary--onLayer-icon-secondary
color.neutral.400
Button — Primary
Colors for primary button states.
base--button-primary-base
color.neutral.50
text--button-primary-text
color.neutral.950
hover--button-primary-hover
color.neutral.100
active--button-primary-active
color.neutral.200
Button — Secondary
Colors for secondary button states.
base--button-secondary-base
color.opacity.light.base
text--button-secondary-text
color.neutral.300
hover--button-secondary-hover
color.opacity.light.base
active--button-secondary-active
color.opacity.light.secondary