Colors
The color system provides semantic tokens that adapt to light and dark themes.
Surfaces
Background colors for pages, containers, and layout regions.
Page
page
Shell
shell
Container
container
Card
card
Sunken
sunken
Modal
modal
Standout
standout
Component
Interactive element backgrounds with hover and active states.
Default
component
Hover
component-hover
Active
component-active
On Sunken
component-on-sunken
On Inverted
component-on-inverted
Subtle
component-on-container-subtle
Strong
component-on-container-strong
Transparent
Transparent backgrounds for ghost and overlay elements.
Default
transparent
Hover
transparent-hover
Active
transparent-active
Foreground
Text and icon colors used across the interface.
Primary
primary-foreground
Secondary
secondary-foreground
Tertiary
tertiary-foreground
Disabled
disabled-foreground
Brand
Primary brand colors for actions, focus states, and accents.
Solid
brand-solid
Solid Hover
brand-solid-hover
Solid Active
brand-solid-active
Subtle
brand-subtle
Subtle Hover
brand-subtle-hover
Foreground
brand-foreground
On Solid
on-brand-solid-foreground
On Subtle
on-brand-subtle-foreground
Positive
Success states and confirmations.
Solid
positive-solid
Solid Hover
positive-solid-hover
Subtle
positive-subtle
Foreground
positive-foreground
On Solid
on-positive-solid-foreground
On Subtle
on-positive-subtle-foreground
Warning
Caution states and non-critical alerts.
Solid
warning-solid
Solid Hover
warning-solid-hover
Subtle
warning-subtle
Foreground
warning-foreground
On Solid
on-warning-solid-foreground
On Subtle
on-warning-subtle-foreground
Danger
Destructive actions, errors, and critical states.
Solid
danger-solid
Solid Hover
danger-solid-hover
Solid Active
danger-solid-active
Subtle
danger-subtle
Subtle Hover
danger-subtle-hover
Foreground
danger-foreground
On Solid
on-danger-solid-foreground
On Subtle
on-danger-subtle-foreground
Inverted
High-contrast elements that invert the current theme.
Solid
inverted-solid
Solid Hover
inverted-solid-hover
Solid Active
inverted-solid-active
Foreground
on-inverted-foreground
Standout Primary
on-standout-primary-foreground
Standout Secondary
on-standout-secondary-foreground
Border
Dividers, outlines, and separators between elements.
Default
border-default
Subtle
border-subtle
Strong
border-strong
Inverted
border-inverted
Brand Default
brand-border-default
Brand Subtle
brand-border-subtle
Brand Focus
brand-border-focus
Positive
positive-border-default
Warning
warning-border-default
Danger
danger-border-default
Danger Subtle
danger-border-subtle
Disabled
Non-interactive and disabled element states.
Background
disabled
Foreground
disabled-foreground