Gray scale
Every page uses one neutral scale, Carbon’s grays. The values flip with the theme, so bg-neutral-50 is a light gray in light mode and a dark gray in dark mode. Never hard-code bg-white or text-black for page chrome.
| Token | Class | Use | |
|---|---|---|---|
surface | *-surface | Page background | |
neutral-50 | *-neutral-50 | Layer 01 · flat cards | |
neutral-100 | *-neutral-100 | Layer 02 · hover | |
neutral-200 | *-neutral-200 | Border subtle | |
neutral-300 | *-neutral-300 | Border, disabled | |
neutral-500 | *-neutral-500 | Helper text | |
neutral-600 | *-neutral-600 | Secondary text | |
neutral-950 | *-neutral-950 | Primary text |
Semantic colors
Color carries meaning. Each status has a strong value for text and icons and a -subtle value for backgrounds. Status is never shown with color alone: pair it with an icon or a label.
| Role | Tokens | Use | |
|---|---|---|---|
| Interactive | brand-blue · link | Primary buttons, links, focus, selection | |
| Success | success · success-subtle | Completed, connected, saved | |
| Warning | warning · warning-subtle | Needs attention soon | |
| Danger | danger · danger-fill · danger-subtle | Errors and destructive actions | |
| Info | info · info-subtle | Neutral notices | |
| AI | ai · ai-fill · ai-subtle | Only AI content and AI actions |
The AI purple
Do
Use purple for AI suggestions and AI actions.
Don’t
Don’t use purple as decoration or for regular actions.
Brand colors
The four logo colors appear only in the logo and in brand illustration, never as UI state.
#2D5BFF
#F2482E
#FFB000
#16B364