Semantic Color Tokens — Success, Warning, Error, and Info States

Semantic Color Token Design

Semantic color tokens map abstract meaning to specific color values. They answer the question "what color means success?" rather than "where do I use green?"

Core Semantic Roles

Every design system needs at least four semantic color roles:

:root {
  /* Success */
  --colors-success: #16a34a;
  --colors-success-light: #bbf7d0;
  --colors-success-dark: #15803d;
  --colors-on-success: #ffffff;

  /* Warning */
  --colors-warning: #ca8a04;
  --colors-warning-light: #fef08a;
  --colors-warning-dark: #a16207;
  --colors-on-warning: #000000;

  /* Error / Danger */
  --colors-error: #dc2626;
  --colors-error-light: #fecaca;
  --colors-error-dark: #b91c1c;
  --colors-on-error: #ffffff;

  /* Info */
  --colors-info: #2563eb;
  --colors-info-light: #bfdbfe;
  --colors-info-dark: #1d4ed8;
  --colors-on-info: #ffffff;
}

Background and Foreground Pairs

Each semantic color needs background and foreground variants. The -light variant works as a subtle background (like toast notifications), while the base color works for icons and borders:

• Toast background: var(--colors-error-light)
• Toast border: var(--colors-error)
• Toast text: var(--colors-error-dark)

Usage in Components

Semantic tokens shine when used consistently across components:

.alert-error {
  background-color: var(--colors-error-light);
  border-color: var(--colors-error);
  color: var(--colors-error-dark);
}

Accessibility Consideration

Always pair semantic colors with contrast-safe text colors. The --on-* pattern (e.g., --on-error) guarantees readable text regardless of the underlying color.