Stat cards with accent stripes + a 7-day bar chart cycling the palette.
All palette slots
Dashboard
7d
Live
Sessions
8,412
+12%
Revenue
$24.1K
+6%
Signups
214
−3%
Churn
1.8%
−0.4%
Daily active · last week
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Pricing grid
Three tiers, each claiming a palette slot. Middle one lifts for emphasis.
Palette slots 1 · 2 · 3
Tier 1
Solo
$12/mo
Unlimited palettes
Shared vaults
CLI export
Start free
Recommended
Tier 2
Team
$48/mo
Unlimited palettes
Shared vaults
CLI export
Get Team
Tier 3
Studio
Custom
Unlimited palettes
Shared vaults
CLI export
Talk to us
Brand identity
Logo mark, wordmark, and palette swatch row — the atomic design kit.
Primary + all
◐
Est. 2026
Northbound
A color-led brand system, painted from your palette. Same type, same layout — the only thing that moves is the hue.
01FF5470
02FDE047
0306B6D4
041E293B
05F8FAFC
Mobile app
Nav bar, feed cards, floating action — how the palette reads in product.
Primary + cycling accents
09:41
Home⋯
Update #12m
A tight palette makes product feel deliberate.
Update #23m
A tight palette makes product feel deliberate.
Update #34m
A tight palette makes product feel deliberate.
+
Home
Explore
Saved
You
Data viz
Donut + legend — five slices cycling the palette.
All palette slots
Where did the month go?
Design tokens38%
Brand systems24%
Motion guides18%
Components12%
Other8%
Poster
Album-cover framing — conic gradient behind a tight typographic block.
All colours · conic
Issue №007
Colour as Argument
colors.codes
Gradient study
Linear ramp meets conic dial — how the palette reads when the colours blend into one another.
All colours
Linear · 135°
Conic · 0deg
How the visualizer works
Palette slots, not fixed variables
Every template pulls from your palette by slot. The lightest color becomes surface, the rest keep their authored order as primary, secondary, accent, and cycling brand slots. Text flips to black or white per background via WCAG-grade contrast — so even wild palettes stay legible.
The URL is the palette: edit a chip and /visualizer/ff5470-fde047-06b6d4-1e293b-f8fafc updates in step. Copy the link, paste it anywhere, and the receiver lands on the same mockups rendered with your colours.