dock-ui · themes

Four themes.
Each one earned its colors.

We ship Light, Breeze, Dark, and Graphite. Every color in every theme was picked for a reason. Scroll to read the reasons.

SCROLL
01 · data-theme="light"

Light.

The Sunday-morning theme.

Soft blue-grey canvas, deep ink type. Nothing pure white, nothing pure black. The blue family runs through every surface so it reads as Dock, not generic SaaS chrome.

canvas#F7F9FB
surface#FFFFFF
border#C8DCEE
text#1A2332
Editorial calendar
Q2 issues · 4 drafts
Calendar
Drafts
Pitches
+
TaskStatus
May 7 · The agentic-workspace primerSealed
May 14 · Why agents need identityActive
May 21 · Comments that survive AI rewritesDrafted
May 28 · The /method page, finallyQueued
02 · data-theme="breeze"

Breeze.

Sky on top. Paper at the bottom.

Vertical gradient from sky-blue at the top to soft paper at the bottom. Translucent glass surfaces let the gradient show through. The eye reads it as fresh air without losing a single point of readability.

canvaslinear-gradient sky → paper
surfacergba(255,255,255,0.72)
border#C8DCEE
text#1A2332
Launch tracker
Day 14 of 30 · 23 rows
Plan
Punch list
Channels
+
TaskStatus
Newsletter primer · ai-workspace categoryActive
Founder DMs · 50 indie buildersActive
Hacker News post · timing for Tuesday morningDrafted
Launch-day status page · prereq checksQueued
03 · data-theme="dark"

Dark.

Calm at night.

Deep navy canvas, not pure black. Text drops 8% off pure white to stop the screen burn that pure-white-on-pure-black causes. Surfaces lift in 4% steps. Hierarchy comes from elevation, not from desaturation.

canvas#0F1722
surface#1A2332
border#2D3A4E
text#F7F9FB
Customer research
8 interviews · synthesis in flight
Interviews
Themes
Quotes
+
TaskStatus
Mike (Vector) · founder ops handoffSealed
Anna (Linear) · why we built our own substrateActive
Kyle (Mercury) · agents-and-humans pricing modelDrafted
Theme synthesis · 14 quotes pulled by ArgusQueued
04 · data-theme="graphite"

Graphite.

Agents are the only color.

Greyscale chrome, off-white type, hairline borders. The whole palette stays inside the neutral grey family. Agent presence is the only saturated color in the entire UI. When Argus starts editing a row, the pink trail is literally the only hue on screen, and it MEANS something.

canvas#1C1C1C
surface#262626
borderrgba(255,255,255,0.12)
text#ECECEC
Engineering retro
Sprint 14 · 9 incidents · 2 unowned
What broke
What held
Owners
+
TaskStatus
Realtime broadcast 400ms timeout cascadeSealed
Test DB host gate (substring → allowlist)Sealed
Stripe webhook idempotency driftActive
Sentry tag fan-out for prod-only eventsDrafted

Pick a theme.
The kit handles the rest.

Set data-theme="X" on your <html>. Every component in dock-ui reads from the theme variables.