Color System
Core color variables for the design system
All Available Colors
Base Colors
White
var(--base-white)
Black
var(--base-black)
Brand Colors
primary
Usage:
var(--primary-{gradient})25
50
100
200
300
400
500
600
700
800
900
Semantic Colors
error
Usage:
var(--error-{gradient})25
50
100
200
300
400
500
600
700
800
900
success
Usage:
var(--success-{gradient})25
50
100
200
300
400
500
600
700
800
900
warning
Usage:
var(--warning-{gradient})25
50
100
200
300
400
500
600
700
800
900
Gray Scales
gray blue
Usage:
var(--gray-blue-{gradient})25
50
100
200
300
400
500
600
700
800
900
gray cool
Usage:
var(--gray-cool-{gradient})25
50
100
200
300
400
500
600
700
800
900
gray iron
Usage:
var(--gray-iron-{gradient})25
50
100
200
300
400
500
600
700
800
900
gray modern
Usage:
var(--gray-modern-{gradient})25
50
100
200
300
400
500
600
700
800
900
gray neutral
Usage:
var(--gray-neutral-{gradient})25
50
100
200
300
400
500
600
700
800
900
gray true
Usage:
var(--gray-true-{gradient})25
50
100
200
300
400
500
600
700
800
900
gray warm
Usage:
var(--gray-warm-{gradient})25
50
100
200
300
400
500
600
700
800
900
gray
Usage:
var(--gray-{gradient})25
50
100
200
300
400
500
600
700
800
900
Blue Variants
blue dark
Usage:
var(--blue-dark-{gradient})25
50
100
200
300
400
500
600
700
800
900
blue light
Usage:
var(--blue-light-{gradient})25
50
100
200
300
400
500
600
700
800
900
blue
Usage:
var(--blue-{gradient})25
50
100
200
300
400
500
600
700
800
900
cyan
Usage:
var(--cyan-{gradient})25
50
100
200
300
400
500
600
700
800
900
indigo
Usage:
var(--indigo-{gradient})25
50
100
200
300
400
500
600
700
800
900
Purple Variants
fuchsia
Usage:
var(--fuchsia-{gradient})25
50
100
200
300
400
500
600
700
800
900
purple
Usage:
var(--purple-{gradient})25
50
100
200
300
400
500
600
700
800
900
violet
Usage:
var(--violet-{gradient})25
50
100
200
300
400
500
600
700
800
900
Warm Colors
orange dark
Usage:
var(--orange-dark-{gradient})25
50
100
200
300
400
500
600
700
800
900
orange
Usage:
var(--orange-{gradient})25
50
100
200
300
400
500
600
700
800
900
pink
Usage:
var(--pink-{gradient})25
50
100
200
300
400
500
600
700
800
900
rose
Usage:
var(--rose-{gradient})25
50
100
200
300
400
500
600
700
800
900
yellow
Usage:
var(--yellow-{gradient})25
50
100
200
300
400
500
600
700
800
900
Nature Colors
green light
Usage:
var(--green-light-{gradient})25
50
100
200
300
400
500
600
700
800
900
green
Usage:
var(--green-{gradient})25
50
100
200
300
400
500
600
700
800
900
moss
Usage:
var(--moss-{gradient})25
50
100
200
300
400
500
600
700
800
900
teal
Usage:
var(--teal-{gradient})25
50
100
200
300
400
500
600
700
800
900
Color Usage Guidelines
Brand Colors
- Primary colors should be used for main actions and key UI elements
- Use lighter shades (25-100) for backgrounds and hover states
- Use middle shades (400-600) for interactive elements
- Use darker shades (700-900) for text and emphasis
Semantic Colors
- Success: Use for positive actions, confirmations, and success states
- Warning: Use for cautionary messages and actions requiring attention
- Error: Use for error messages, destructive actions, and critical alerts
Gray Scales
Each gray variant has specific use cases:
- Gray: Default neutral color scale
- Gray Blue: Professional and corporate interfaces
- Gray Modern: Contemporary and clean designs
- Gray Neutral: Balanced and versatile
- Gray Iron: Industrial and robust interfaces
- Gray True: Pure grayscale without undertones
- Gray Warm: Softer, more natural feel
Color Accessibility
For WCAG 2.1 compliance:
- Use 500-900 shades for text on light backgrounds
- Use 25-200 shades for text on dark backgrounds
- Maintain minimum contrast ratio of 4.5:1 for normal text
- Maintain minimum contrast ratio of 3:1 for large text
Implementation Examples
css
/* Primary Button */
.button-primary {
background-color: var(--primary-600);
color: var(--base-white);
}
/* Success Toast */
.toast-success {
background-color: var(--success-50);
border: 1px solid var(--success-200);
color: var(--success-700);
}
/* Warning Alert */
.alert-warning {
background-color: var(--warning-50);
border: 1px solid var(--warning-300);
color: var(--warning-700);
}
/* Error Message */
.message-error {
background-color: var(--error-50);
border: 1px solid var(--error-200);
color: var(--error-700);
}
/* Text Styles */
.text-heading {
color: var(--gray-900);
}
.text-body {
color: var(--gray-700);
}
.text-muted {
color: var(--gray-500);
}Tailwind Integration
This will make all color variables available as Tailwind classes Refer: Tailwind Setup
Usage
css
.element {
color: var(--primary-500);
background: var(--primary-50);
border-color: var(--primary-200);
}Variables
| Category | Variable | Value | Description |
|---|---|---|---|
| Primary | --primary-500 | #2970ff | Main brand color |
| Success | --success-500 | #16b364 | Positive actions |
| Warning | --warning-500 | #f79009 | Warning states |
| Error | --error-500 | #f04438 | Error states |
| Gray | --gray-500 | #5d6b98 | Neutral color |
| Blue | --blue-500 | #2e90fa | Information |
| Purple | --purple-500 | #7a5af8 | Accent color |
| Pink | --pink-500 | #ee46bc | Accent color |
Common Use Cases
| Use Case | Variable | Example |
|---|---|---|
| Primary Button | --primary-600 | Background color |
| Text Color | --gray-900 | Main text |
| Background | --gray-50 | Page background |
| Border | --gray-200 | Subtle borders |
| Success State | --success-500 | Success messages |
| Error State | --error-500 | Error messages |