Colors
The CruxMD color palette features organic greens, teals, and golds balanced with neutral slates and ivories. Click any swatch to copy the hex value.
Core Palette
Brand (Vibrant Forest)
Slate (Darks)
Cloud (Grays)
Ivory (Lights)
Accent Colors
Secondary accents that complement the forest brand palette. Jade Green signals success; Glacier Teal and Midnight Pine provide depth for interactive states and visual hierarchy.
Utility
Semantic Tokens
These CSS variables adapt automatically between light and dark modes.
Design Notes
- Dark mode accent — Intentionally neutral (Slate) rather than warm for better contrast and reduced eye strain
- Secondary = Border — In light mode, secondary background matches border color for seamless subtle backgrounds
Light Mode
--background
Page background
--foreground
Primary text
--card
Card background
--primary
Primary actions
--secondary
Secondary bg
--muted
Muted background
--muted-foreground
Muted text
--accent
Accent background
--border
Border color
--destructive
Error states
--ring
Focus ring
Dark Mode
--background
Page background
--foreground
Primary text
--card
Card background
--primary
Primary actions
--secondary
Secondary bg
--muted
Muted background
--muted-foreground
Muted text
--accent
Accent background
--border
Border color
--destructive
Error states
--ring
Focus ring
Clinical Insight Colors
Color-coded severity levels for clinical alerts and insights. Each type has specific background and foreground colors for proper contrast.
Light Mode
General information
Caution indicators
Urgent alerts
Favorable findings
Dark Mode
General information
Caution indicators
Urgent alerts
Favorable findings
Chart Colors
A harmonious palette for data visualization. Dark mode uses lighter variants for better contrast on dark backgrounds.