UI / Themes / Breeze

Breeze

Gradient sky, glass surfaces. Same readability as Light, more visually alive.

data-theme="breeze"
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

Breeze is Light with a sky over it. The canvas runs a vertical gradient from #C8DCEE at the top down to #F7F9FB at the bottom, the same family as the Light canvas but with a sky-blue ceiling. The eye reads it as fresh air without losing any of the working comfort Light offers.

Surfaces flip from solid to translucent. Cards sit at rgba(255, 255, 255, 0.72) so the gradient bleeds through, and any sticky element layers cleanly over content underneath. This is the theme where Dock's glass aesthetic shows up most: the marketing nav's glass dropdowns, the modal scrim, the workspace tab bar all read as layered, not painted.

Why a gradient and not a flat tint. Flat tints across a 1920px viewport feel oppressive at the top edge. The gradient gives the eye somewhere to land at the top of the page (sky) and somewhere to settle at the bottom (paper). It works the way a window with sky outside works.

When to use

Marketing pages, landing-shaped surfaces, anything where you want the visual to feel a little alive. Also good for first-impression demos when you're showing the kit to someone for the first time.

When not to use

Dense data work where the gradient is just visual noise behind a wall of cells. Switch to Light.

Color spec

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

--backgroundlinear-gradient(180deg, #C8DCEE 0%, #F7F9FB 100%)
Sky-to-paper gradient. The defining feature of the theme.
--surfacergba(255, 255, 255, 0.72)
Translucent white. The gradient shows through; cards layer.
--surface-mutedrgba(232, 241, 248, 0.6)
Translucent blue. Hover + selected rows still pick up the sky.
--surface-opaque#FFFFFF
Opaque twin for sticky overlays (sheet header). Stops content ghosting through.
--border-color#C8DCEE
Same blue family as Light. Reads cleanly against the gradient.
--text-primary#1A2332
Same deep ink as Light. Readability is non-negotiable.
← All themes
Components·Theme · glossary
UI home →