Colors
The Fluxive Blueprint Theme uses a curated palette of cool grays for the foundation and electric blues for accents.
Primary Palette
The primary brand color is a vibrant electric blue, used for primary actions, links, and focus states.
| Token | Hex | Usage |
|---|---|---|
blue-600 | #2563eb | Primary Brand Color. Used for buttons, active states, and key highlights. |
blue-500 | #3b82f6 | Secondary accent, hover states for primary buttons. |
blue-400 | #60a5fa | Lighter accent, used for subtle emphasis or dark mode highlights. |
blue-600
blue-500
blue-400
Neutral Palette (Dark Mode)
We avoid pure black (#000000). Instead, we use rich, deep grays with a slight cool tint to reduce eye strain and provide a premium feel.
| Token | Hex | Usage |
|---|---|---|
gray-900 | #111827 | App Background. The deepest layer of the interface. |
gray-800 | #1f2937 | Surface / Card Background. Used for sidebars, cards, and elevated areas. |
gray-700 | #374151 | Borders, dividers, and secondary surface elements. |
gray-500 | #6b7280 | Muted text, metadata, and icons. |
gray-300 | #d1d5db | Secondary Text. Body text in some contexts. |
gray-900
gray-800
gray-700
Text Colors
High contrast is essential for readability, but we soften it slightly to match the dark theme.
- Primary Text:
#f9fafb(Near White) - Used for headings and main body content. - Secondary Text:
#d1d5db(Light Gray) - Used for descriptions and supporting text. - Muted Text:
#9ca3af(Medium Gray) - Used for placeholders and disabled states.