Color Palette
The color palette is built around an indigo base, conveying technology and modernity. Two distinct palettes are provided: one optimized for light backgrounds and another for dark backgrounds, ensuring readability and contrast in both modes.
Light mode
| Role | Hex | Usage |
|---|---|---|
| Primary | #4F46E5 | Links, buttons, active elements |
| Dark | #4338CA | Hover states |
| Darker | #3730A3 | Active/pressed states |
| Darkest | #312E81 | High-emphasis elements |
| Light | #6366F1 | Secondary highlights |
| Lighter | #818CF8 | Backgrounds, badges |
| Lightest | #A5B4FC | Subtle backgrounds, borders |
Dark mode
| Role | Hex | Usage |
|---|---|---|
| Primary | #A78BFA | Links, buttons, active elements |
| Dark | #8B5CF6 | Hover states |
| Darker | #7C3AED | Active/pressed states |
| Darkest | #6D28D9 | High-emphasis elements |
| Light | #C4B5FD | Secondary highlights |
| Lighter | #DDD6FE | Backgrounds, badges |
| Lightest | #EDE9FE | Subtle backgrounds, borders |
Light mode
#4F46E5
Primary
#4338CA
Dark
#3730A3
Darker
#312E81
Darkest
#6366F1
Light
#818CF8
Lighter
#A5B4FC
Lightest
Dark mode
#A78BFA
Primary
#8B5CF6
Dark
#7C3AED
Darker
#6D28D9
Darkest
#C4B5FD
Light
#DDD6FE
Lighter
#EDE9FE
Lightest
Usage guidelines
- Always use the light palette on light backgrounds and the dark palette on dark backgrounds.
- The primary color is the default for interactive elements: links, buttons, and focused inputs.
- Use darker variants for hover and active states, and lighter variants for subtle backgrounds.
- Avoid using palette colors for large text blocks — use the default text colors provided by the theme.
- Ensure a minimum contrast ratio of 4.5:1 for text over colored backgrounds (WCAG AA).