Colors
Semantic tokens grouped by what they are for.
Backgrounds
Layered page surfaces.
ColorClass
ValueAlpha
Surfaces
Elevated UI that sits above the page: cards, menus, popovers.
ColorClass
ValueAlpha
Text
Foreground steps for hierarchy.
ColorClass
ValueAlpha
Borders
Hairlines and edges.
ColorClass
ValueAlpha
Brand
Primary actions and selected states.
ColorClass
ValueAlpha
Decorative
Named hues for text, strokes, and marks. They flip with the theme so each stays legible; the chart slots hold the value that does not.
ColorClass
ValueAlpha
Status
Semantic feedback pairs. Use the foreground and background from the same status.
ColorClass
ValueAlpha
Notifications
Strong action colors and focus.
ColorClass
ValueAlpha