UI / Themes / Light

Light

The default. Open the laptop on a Sunday morning.

data-theme="light"
Launch plan
Launch post: AI workspaces thesisActive
Newsletter issue: AI workspaces primerDrafted
Founder outreach: 50 indie-builder DMsQueued
3 members · 17 rows

Why this theme

Light is the theme we open by default because it's the theme most people read all day. The canvas sits at #F7F9FB, a soft blue-grey that's intentionally not pure white. Pure white burns at long sessions; #F7F9FB reads as paper, not screen.

The text picks up #1A2332, deep ink with a navy undertone. Never pure black. Pure black on pure white is the highest-contrast pairing typography offers, but it's also the most fatiguing. Dropping the text 7 percent off pitch and the canvas 3 percent off pure-white together drops the strain without losing readability.

The blue family runs through every surface (canvas, muted surface, border, hover) because Dock's identity color is blue. A neutral grey theme would read as generic SaaS chrome. The blue tint signals tech without sliding into cold corporate.

When to use

Long-form work. Drafting docs, reading rows, doing the kind of tasks where the UI should disappear into the work. Default on first install.

When not to use

Bright daylight or projector demos: the canvas can blow out under direct sun. Reach for Graphite when you need a darker chrome that lets agent colors pop.

Color spec

Every CSS variable, what it's set to in this theme, and what we use it for.

--background#F7F9FB
Soft blue-grey canvas. Reads as paper, not screen.
--surface#FFFFFF
Cards + popovers. Pure white because they need to lift off the canvas.
--surface-muted#E8F1F8
Hover + selected rows. Steps the surface down without losing the blue family.
--border-color#C8DCEE
Hairline blue. Subtle enough to feel like edge, not box.
--text-primary#1A2332
Deep ink with a navy undertone. Never pure black.
--text-secondary#4A5568
Slate. Reads as supporting copy.
--text-muted#7AA5C7
Same blue family as the border. For meta strings.
--accent#1A2332
Primary buttons. The deepest text color, paired with --btn-primary-text white.
← All themes
Components·Theme · glossary
UI home →