Color Palette¶

Single source of truth for Tidemill colors. Implemented in:

Brand¶

Name	Hex	Usage
Amber 500	`#F59E0B`	Primary brand, UI primary, colorway lead
Orange 600	`#EA580C`	Hub fill, favicon, past-due status
Orange 500	`#F97316`	Logo blade gradient start
Orange 700	`#C2410C`	Logo blade gradient end
Amber 500	`#F59E0B`	Logo accent blade gradient start
Amber 600	`#D97706`	Logo accent blade gradient end
Orange 500	`#F97316`	Logo wordmark text

Role	Hex	Mapped to
Positive / Growth	`#16A34A`	new, active, converted, GRR
Expansion	`#2563EB`	expansion, NRR
Contraction	`#EAB308`	contraction
Churn / Negative	`#DC2626`	churn, canceled, expired, logo churn
Special	`#8B5CF6`	reactivation, ARPU
Brand accent	`#F59E0B`	trialing, revenue churn
Warning	`#EA580C`	past due
Neutral	`#78716C`	starting MRR, pending, grey
Dark	`#1C1917`	ending MRR

Default cycle for charts with multiple series, in order:

#	Hex	Name
1	`#F59E0B`	amber
2	`#2563EB`	blue
3	`#16A34A`	green
4	`#8B5CF6`	violet
5	`#DC2626`	red
6	`#0891B2`	cyan
7	`#DB2777`	pink
8	`#84CC16`	lime
9	`#78716C`	stone

Orange ramp used by Plotly colorscale_sequential:

Position	Hex	Tailwind
0.00	`#FFF7ED`	orange-50
0.25	`#FED7AA`	orange-200
0.50	`#FB923C`	orange-400
0.75	`#EA580C`	orange-600
1.00	`#431407`	orange-950

Discrete buckets (green = good retention, red = poor):

Threshold	Hex	Tailwind
>= 90%	`#DCFCE7`	green-100
>= 70%	`#BBF7D0`	green-200
>= 50%	`#FEF08A`	yellow-200
>= 30%	`#FED7AA`	orange-200
< 30%	`#FECACA`	red-200

Defined in frontend/src/index.css:

Property	Value	Purpose
`--color-primary`	`#F59E0B`	Buttons, links, focus rings
`--color-primary-foreground`	`#ffffff`	Text on primary
`--color-accent`	`#FFFBEB`	Hover/highlight backgrounds
`--color-accent-foreground`	`#1C1917`	Text on accent
`--color-destructive`	`#DC2626`	Danger actions
`--color-ring`	`#F59E0B`	Focus outlines
`--color-border`	`#e5e5e5`	Default borders
`--color-muted`	`#f5f5f5`	Page background

Warm grays used for text, grids, and borders:

Hex	Tailwind	Usage
`#E7E5E4`	stone-200	Grid lines
`#D6D3D1`	stone-300	Axis lines
`#78716C`	stone-500	Secondary text, neutral data
`#44403C`	stone-700	Body text, hover labels
`#1C1917`	stone-900	Titles, headings

All in docs/assets/:

File	Variant
`icon-color.svg`	Orange/amber gradient icon
`icon-bw.svg`	Black icon
`icon-white.svg`	White icon (dark backgrounds)
`logo-color.svg`	Icon + wordmark, color
`logo-bw.svg`	Icon + wordmark, black
`logo-white.svg`	Icon + wordmark, white
`favicon.svg`	Flat orange/amber for browser tabs