Home›Color Systems
Preview
css
Success
Warning
Error
Info
Code
css
:root {
  /* Success */
  --color-success:     #22C55E;
  --color-success-bg:  rgba(34, 197, 94, 0.10);

  /* Warning */
  --color-warning:     #F59E0B;
  --color-warning-bg:  rgba(245, 158, 11, 0.10);

  /* Error */
  --color-error:       #EF4444;
  --color-error-bg:    rgba(239, 68, 68, 0.10);

  /* Info */
  --color-info:        #3B82F6;
  --color-info-bg:     rgba(59, 130, 246, 0.10);
}
Related Blocks
css
Accessibility Contrast
WCAG AA/AAA compliant color pair table.
css
Brand Color System
A complete hierarchy for primary, secondary, and accent colors.
css
Dark Mode Pair
Color pairs that switch automatically for light and dark mode.