Semantic Tokens
Purpose-driven color tokens organized by usage. These tokens automatically adapt between light and dark modes.
Background / Surface
Base surface colors for layouts and containers
Background / Action
Interactive element backgrounds
Background / Input
Form input backgrounds
Background / Status
Status indicator backgrounds
Background / Selection
Selection state backgrounds
Background / Overlay
Overlay and scrim backgrounds
Text / Content
Content text colors
Text / Status
Status indicator text
Text / Action
Interactive text colors
Text / Amount
Financial amount text colors
Icon / Content
Icon content colors
Icon / Status
Status indicator icons
Icon / Action
Interactive icon colors
Icon / Accent
Accent icon colors
Icon / Amount
Financial amount icon colors
Icon / Selection
Selection state icons
Border / Base
Base border colors
Border / Status
Status indicator borders
Border / Input
Form input borders
Border / Selection
Selection state borders
Border / Action
Action border colors
Shadow / Black
Standard black elevation shadows
Shadow / White
Lighter white elevation offsets for dark mode
Gradients
Gradient color combinations built from semantic gradient-stop tokens. Click any gradient to copy its CSS.