Palette & Tokens
8 color families, each with 12 purposeful steps. Click any swatch to copy the Tailwind utility class.
12-Step Palette Grid
1
App background
2
Subtle background
3
UI element bg
4
Hovered element bg
5
Active / Selected
6
Subtle border
7
Default border
8
Strong border / Focus
9
Solid fill (anchor)
10
Hovered solid fill
11
Low-contrast text
12
High-contrast text
Blue
Primary, Active, Info
Green
Success, Approved, Positive
Amber
Warning, Pending, Attention
Red
Critical, Denied, Urgent
Violet
Accent, P2P, Escalated
Teal
Clinical, Verification
Orange
Appeals, Escalation
Slate
Neutral, Structural
Step Purposes
Each step in the 12-step scale serves a specific UI purpose, from backgrounds to text.
Backgrounds
Steps 1–2
App canvas and subtle surface fills
Component Fills
Steps 3–5
Rest, hover, and active states
Borders
Steps 6–8
Subtle, default, and focused outlines
Solid Fills
Steps 9–10
Brand anchor and hovered solid colors
Text
Steps 11–12
Low-contrast and high-contrast text colors
Usage Guide
Code snippets for common patterns using the design token system.
Subtle tint card
<div className="bg-haven-blue-2 border border-haven-blue-5 text-haven-blue-11 rounded-lg p-4"> <p className="text-haven-blue-12 font-semibold">Title</p> <p>Description text</p> </div>
Gradient stat card
<div className="bg-linear-to-br from-[hsl(var(--gradient-green-deep-from))] to-[hsl(var(--gradient-green-deep-to))] text-white rounded-xl p-5"> <p className="text-white/80">Approval Rate</p> <p className="text-2xl font-bold">78.3%</p> </div>
Status badge
<span className="bg-haven-green-2 text-haven-green-11 rounded-full px-2.5 py-0.5 text-xs font-medium"> Approved </span>
Opacity modifier (Tailwind)
<div className="bg-haven-blue-9/50"> {/* 50% opacity */}
<div className="bg-haven-blue-9/10"> {/* 10% opacity */}
</div>
</div>