Colors
Foundation palette and semantic color tokens for surfaces, text, interactive states, and strokes.
Surface
Surface tokens establish depth, contrast, and baseline backgrounds.
| Color token | Use case | Class name |
|---|---|---|
Background | Page and canvas backgrounds. | --openui-background |
Foreground | Card and container surfaces. | --openui-foreground |
Popover Background | Floating surfaces like popovers and menus. | --openui-popover-background |
Sunk | Inset areas and subtle pressed backgrounds. | --openui-sunk |
Elevated | Raised layers and elevated fills. | --openui-elevated |
Overlay | Backdrop overlays behind modals and drawers. | --openui-overlay |
Highlight | Hover emphasis on neutral surfaces. | --openui-highlight |
Inverted Background | High-contrast inverse surface. | --openui-inverted-background |
Info Background | Informational status backgrounds. | --openui-info-background |
Success Background | Success status backgrounds. | --openui-success-background |
Alert Background | Warning status backgrounds. | --openui-alert-background |
Danger Background | Danger and error status backgrounds. | --openui-danger-background |
Purple Background | Purple semantic backgrounds. | --openui-purple-background |
Pink Background | Pink semantic backgrounds. | --openui-pink-background |
Surface components preview coming soon.
Text
Text tokens support hierarchy and semantic messaging states.
| Color token | Use case | Class name |
|---|---|---|
Neutral Primary | Primary readable text. | --openui-text-neutral-primary |
Neutral Secondary | Secondary descriptive copy. | --openui-text-neutral-secondary |
Neutral Tertiary | Subtle helper text. | --openui-text-neutral-tertiary |
Neutral Link | Default link text. | --openui-text-neutral-link |
Brand | Brand-colored text accents. | --openui-text-brand |
Accent Primary | Primary text on accent backgrounds. | --openui-text-accent-primary |
Accent Secondary | Secondary text on accent backgrounds. | --openui-text-accent-secondary |
Accent Tertiary | Tertiary text on accent backgrounds. | --openui-text-accent-tertiary |
White | Explicit white text utility. | --openui-text-white |
Black | Explicit black text utility. | --openui-text-black |
Text components preview coming soon.
Accent
Accent interaction tokens define visual states for primary actions.
| Color token | Use case | Class name |
|---|---|---|
Accent Default | Primary accent action default fill. | --openui-interactive-accent-default |
Accent Hover | Primary accent action hover fill. | --openui-interactive-accent-hover |
Accent Pressed | Primary accent action pressed fill. | --openui-interactive-accent-pressed |
Accent Disabled | Primary accent action disabled fill. | --openui-interactive-accent-disabled |
Accent components preview coming soon.
Destructive
Destructive interaction tokens define visual states for destructive actions.
| Color token | Use case | Class name |
|---|---|---|
Destructive Accent Default | Destructive action default fill. | --openui-interactive-destructive-accent-default |
Destructive Accent Hover | Destructive action hover fill. | --openui-interactive-destructive-accent-hover |
Destructive Accent Pressed | Destructive action pressed fill. | --openui-interactive-destructive-accent-pressed |
Destructive Accent Disabled | Destructive action disabled fill. | --openui-interactive-destructive-accent-disabled |
Destructive components preview coming soon.
Stroke
Stroke tokens define default and semantic borders across components.
| Color token | Use case | Class name |
|---|---|---|
Default | Default outlines and separators. | --openui-border-default |
Interactive | Interactive element borders. | --openui-border-interactive |
Interactive Emphasis | High emphasis outlines. | --openui-border-interactive-emphasis |
Interactive Selected | Selected state borders. | --openui-border-interactive-selected |
Accent | Accent borders and outlines. | --openui-border-accent |
Accent Emphasis | High-emphasis accent borders. | --openui-border-accent-emphasis |
Info | Info border state. | --openui-border-info |
Info Emphasis | Info-emphasis border state. | --openui-border-info-emphasis |
Alert | Alert border state. | --openui-border-alert |
Alert Emphasis | Alert-emphasis border state. | --openui-border-alert-emphasis |
Success | Success border state. | --openui-border-success |
Success Emphasis | Success-emphasis border state. | --openui-border-success-emphasis |
Danger | Danger border state. | --openui-border-danger |
Danger Emphasis | Danger-emphasis border state. | --openui-border-danger-emphasis |
Stroke components preview coming soon.
Color swatches
Complete swatch palette shown below the semantic variable tokens.