🎨 Color Management System Demo

Gradient Cards (Alert Component Style)

✓ Success

Beautiful green gradient background with left border accent

âš  Warning

Beautiful orange gradient background with left border accent

✕ Error

Beautiful red gradient background with left border accent

ℹ Info

Beautiful blue gradient background with left border accent

.card-success {
  background: var(--gradient-success);
  border-left-color: var(--color-success-border);
}

Button Colors

.btn-primary {
  background-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

Color Palette

--color-primary
--color-success
--color-warning
--color-error
--color-info
--color-secondary

Opacity Variants

10%
30%
50%
70%
90%
.overlay {
  background-color: rgba(var(--color-primary-rgb), 0.1);
}