Color Palette¶
The KMG color palette is built on the Argon Dashboard theme, extended with KMG brand colors.
Primary Colors¶
| Color | Name | Hex | Usage |
|---|---|---|---|
| Primary | #5e72e4 |
Primary actions, links, active states | |
| Success | #2dce89 |
Success states, confirmations | |
| Info | #11cdef |
Informational messages | |
| Warning | #fb6340 |
Warning states | |
| Danger | #f5365c |
Error states, destructive actions |
Neutral Colors¶
| Color | Name | Hex | Usage |
|---|---|---|---|
| Dark | #344767 |
Headings, body text | |
| Secondary | #67748e |
Secondary text, labels | |
| Light | #e9ecef |
Borders, dividers | |
| Background | #f8f9fa |
Page backgrounds |
Usage Guidelines¶
- Use Primary for interactive elements: buttons, links, focused inputs
- Use Success/Danger for status indication, never as decorative colors
- Use Dark (#344767) for all body text, never pure black
- Ensure sufficient contrast ratios (see Accessibility)
- Use the Argon gradient classes (
bg-gradient-primary, etc.) for card headers and accents
CSS Classes¶
Primary gradient
Success gradient
Info gradient
Primary text
Success text
Danger text
<!-- Background colors -->
<div class="bg-gradient-primary">Primary gradient</div>
<div class="bg-gradient-success">Success gradient</div>
<div class="bg-gradient-info">Info gradient</div>
<!-- Text colors -->
<span class="text-primary">Primary text</span>
<span class="text-success">Success text</span>
<span class="text-danger">Danger text</span>