How we think about UI
val-thinking
ValDesk is an instrument panel for a Chief of Staff running five people's worth of work. Not a SaaS marketing surface, not a dashboard, not a productivity app — the place an operator lives all day. Five working principles, twenty anti-patterns, one design contract.
01
Restraint over decoration
Color is status, never flair. Gradients, glows, drop shadows on chrome, particles — banned.
02
Density without cramming
13px body, 4px base. Operators see 20 live items at once. White space is structural.
03
Calm by default, loud on failure
A healthy system is quiet. When something breaks, the surface lights critical-red.
04
Monospace for data
Every number, ID, timestamp uses Geist Mono with tabular-nums and slashed-zero.
05
Status is never color-alone
Pills carry a dot. Toasts carry a leading glyph. A monochrome screenshot still reads.
Status pills · color tells a story
Five states + info. Pill carries a dot when live.
healthyactivewarningcriticalneutralinfo
Buttons
Primary is the one call to action. Secondary is the workhorse.
Form controls
Hairline borders, 28px control height, dark input fills.
Type scale · Geist + Geist Mono
10 · 11 · 12 · 13 (body) · 15 · 18 · 22 · 28
28 · hero metric
22 · metric value
18 · section heading
15 · emphasized body / dialog title
13 · body default
12 · metadata, dense rows
11 · uppercase mono label
10 · micro · kbd · status strip
Surface palette · tonal stepping, no shadows
Each step ≈ +4 L*. Elevation by light, not by drop shadow.
App background
--bg-app
Chrome (nav bars, rails)
--bg-chrome
Canvas (main content)
--bg-canvas
Raised (popovers, dialogs)
--bg-raised
Overlay (hover / selected)
--bg-overlay
Sunken (code, traces)
--bg-sunken