Semantic Colors
Semantic colors communicate status and meaning in the user interface. Each color has a fixed meaning — consistent across all components.
Status colors
| Status | Color | HEX | Background | Usage |
|---|---|---|---|---|
| Success | Green | #22C55E | #DCFCE7 | Success messages, confirmations |
| Warning | Yellow | #EAB308 | #FEF9C3 | Warnings, advisories |
| Error | Red | #EF4444 | #FEE2E2 | Errors, critical messages |
| Info | Blue | #3B82F6 | #DBEAFE | Information, tips |
The -100 / -500 / -700 triad
Each status color follows a three-step token triad that covers the standard use case "lightly tinted background with darker text of the same hue" — without designers/developers having to guess their own combinations.
| Step | Role | Usage |
|---|---|---|
-100 | Surface | Toast background, callout body, badge fill on light theme |
-500 | Primary color | Icon, status dot, border, ring, focus outline |
-700 | Readable text | AAA-compliant text on the -100 surface |
Full values
| Token | HEX | OKLCH | Preview |
|---|---|---|---|
--success-100 | #DCFCE7 | oklch(94% 0.06 150) | |
--success-500 | #22C55E | oklch(70% 0.16 150) | |
--success-700 | #15803D | oklch(50% 0.14 150) | |
--warning-100 | #FEF9C3 | oklch(95% 0.07 90) | |
--warning-500 | #EAB308 | oklch(78% 0.16 80) | |
--warning-700 | #A16207 | oklch(58% 0.14 75) | |
--error-100 | #FEE2E2 | oklch(94% 0.04 25) | |
--error-500 | #EF4444 | oklch(64% 0.22 25) | |
--error-700 | #B91C1C | oklch(50% 0.20 25) | |
--info-100 | #DBEAFE | oklch(94% 0.04 230) | |
--info-500 | #3B82F6 | oklch(70% 0.13 230) | |
--info-700 | #1D4ED8 | oklch(48% 0.16 255) |
Why exactly these three steps?
With -100 background and -700 text, the triad covers ~80 % of all status components in practice: badges, toasts, callouts, inline form-validation hints, status cells in tables. -500 provides the mid-lightness for icons, status dots, and borders. Additional intermediate steps are rarely needed — when they are, they can be derived from the OKLCH scale methodology (Methodology).
Application examples
Badges
Semantic colors are used in badges as a combination of light background + dark text in the same hue:
Notification boxes
Color pairs (background + text)
| Status | Background | Text color | Preview |
|---|---|---|---|
| Success | #DCFCE7 | #15803D | Active |
| Warning | #FEF9C3 | #A16207 | Pending |
| Error | #FEE2E2 | #B91C1C | Critical |
| Info | #DBEAFE | #1D4ED8 | Default |
CSS Custom Properties
Triad tokens (HEX)
The canonical tokens follow the <status>-<step> schema and are usable directly in any modern UI component.
:root {
/* Success */
--success-100: #DCFCE7; --success-500: #22C55E; --success-700: #15803D;
/* Warning */
--warning-100: #FEF9C3; --warning-500: #EAB308; --warning-700: #A16207;
/* Error */
--error-100: #FEE2E2; --error-500: #EF4444; --error-700: #B91C1C;
/* Info */
--info-100: #DBEAFE; --info-500: #3B82F6; --info-700: #1D4ED8;
}Triad tokens (OKLCH parallel)
:root {
--success-100-oklch: oklch(94% 0.06 150);
--success-500-oklch: oklch(70% 0.16 150);
--success-700-oklch: oklch(50% 0.14 150);
--warning-100-oklch: oklch(95% 0.07 90);
--warning-500-oklch: oklch(78% 0.16 80);
--warning-700-oklch: oklch(58% 0.14 75);
--error-100-oklch: oklch(94% 0.04 25);
--error-500-oklch: oklch(64% 0.22 25);
--error-700-oklch: oklch(50% 0.20 25);
--info-100-oklch: oklch(94% 0.04 230);
--info-500-oklch: oklch(70% 0.13 230);
--info-700-oklch: oklch(48% 0.16 255);
}Legacy aliases (backwards compatibility)
Existing components partly use the older --brand-* aliases. These remain available for backwards compatibility and map onto the canonical triad:
:root {
--brand-success: var(--success-500);
--brand-warning: var(--warning-500);
--brand-error: var(--error-500);
--brand-info: var(--info-500);
--brand-success-bg: var(--success-100);
--brand-warning-bg: var(--warning-100);
--brand-error-bg: var(--error-100);
--brand-info-bg: var(--info-100);
--brand-success-text: var(--success-700);
--brand-warning-text: var(--warning-700);
--brand-error-text: var(--error-700);
--brand-info-text: var(--info-700);
}Recommendation for new components
Use the canonical triad (--success-100/-500/-700 etc.) — it's the single source of truth and can be referenced in OKLCH notation without alias indirection. The --brand-* aliases stay around for legacy code but should not be referenced directly in new development.