Semantic Colors

Semantic colors communicate status and meaning in the user interface. Each color has a fixed meaning — consistent across all components.

Status colors

Success

#22C55E

Warning

#EAB308

Error

#EF4444

Info

#3B82F6

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:

Success Warning Error Information

Notification boxes

Success

This operation completed successfully.

Warning

Please review the entered data.

Error

The operation could not be completed.

Information

More details can be found in the documentation.

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.