A monochrome, dark-only control-surface system, extracted from a five-screen UI study. Chrome only — no product content. The whole system runs on one grayscale ladder, one inverse accent, and one row height. Color is reserved entirely for the user's own content.
Depth is a 5-step surface ladder. Each raised layer is one step lighter than its parent — no drop shadows on chrome. The only glow in the system belongs to interactive handles.
There is no hue anywhere in the chrome. The primary action inverts: white surface, near-black ink. Anything colored on screen is user content — which is exactly why the chrome stays gray.
Parameters are full-width rows you can grab anywhere: label left, value right, and the row itself is the slider track. No tiny thumbs, no separate tracks — a 48px target every time.
Sections are named with small uppercase labels (11px, +0.14em) and separated by hairlines — never by boxes or background changes. Structure whispers; controls speak.
Values are right-aligned, tabular-numeral, unit-suffixed (21°, 1.550, 600), and one ink step brighter than their labels. Scanning a column of values never zigzags.
Selected and active means +1 surface step and brighter ink. Hover is a half-step. Disabled drops ink to faint but never changes the surface. One rule covers every component.
Two ladders — surfaces and ink — plus a hairline and the inverse pair. That's the entire palette.
Surface ladder
Ink ladder & inverse
bg-0 → bg-1 → bg-2 → bg-3 — nesting reads as depth with zero shadows
panel · bg-1
control · bg-2
One family — Geist (with Geist Mono for token annotations) — does everything. Hierarchy comes from size, weight, tracking, and ink step, never from a second face. Numerals are tabular wherever they align.
A base-4 scale, and one number to remember: 48. Rows, buttons, inputs and segmented controls all share the same height, so any stack of controls lands on the same rhythm automatically.
Radii step with the surface ladder — the bigger and higher the surface, the rounder it gets. Nested radii shrink so inner corners stay optically concentric (segment radius = container radius − padding).
Phosphor Icons, Fill weight — solid glyphs, ~20–22px, drawn in currentColor. Icons sit at ink-low and brighten with their label — they never carry color of their own.
Live specimens — sliders scrub, segments switch, checks toggle, the pad drags. Every one is built purely from the tokens above.
The signature control: the entire 48px row is the drag surface. The fill is one ladder step up (bg-3) and keeps the row radius; label ink-mid, value ink-hi tabular. Drag horizontally — or focus and use arrow keys.
bg-2 · fill bg-3 · r-md · h 48 · pad-x 16One pattern covers tabs, option pickers and on/off toggles — there are no switches in this system. Active segment steps up to bg-3 with ink-hi; container keeps 3px inner padding so nested radii stay concentric.
container bg-2 r-md p-3 · active bg-3 r-9 · h 48Four tiers of commitment. Primary is the inverse pair — the loudest thing chrome is allowed to be. Ghost for secondary, dashed for deferred/creative acts ("save as…"), text for escape hatches.
h 48 · r-md · 600 / 500 weight · full-width in panelsTracked-caps label + chevron, separated by hairlines only. Chevron rotates 90° when expanded. Sections collapse to keep long inspectors scannable.
11px 600 +0.14em caps · ink-low · hairline dividers52px rows, transparent at rest; hover and selection step up to bg-2. Chevron at ink-faint signals drill-in. No underlines, no accent bars — the ladder does the talking.
h 52 · r-md · rest transparent · selected bg-2 + ink-hiIcon over a 12px label, stacked and centered. The active item earns a bg-2 card; everything else floats label-less-quiet at ink-low. Rail width ≈ 96px.
icon 22 · label 12/500 · active bg-2 r-mdSame 48px control body as everything else. Leading icon at ink-faint, placeholder ink-faint, and a ⌘K chip (bg-3, r-xs) advertising the shortcut.
bg-2 r-md h 48 · kbd chip bg-3 r-xs 12px24px rounded-square box (r 7), one ladder step up when checked, white 2.6px check. Used for feature lists and multi-select — tap targets span the full row.
box 24 r-7 · checked bg-3 · check ink-hi 2.6pxIndex at ink-faint, 34px thumbnail (r-sm), name truncates with ellipsis, quiet icon actions on the right. Note: the thumbnail is the only colored pixel — content keeps its color, chrome never does.
h 52 · thumb 34 r-sm · idx tabular ink-faintThe badge borrows the inverse pair — same voice as the primary button, so it reads as "important" without introducing a hue. Kbd chips stay on-ladder at bg-3.
badge inverse pill 13/650 · kbd bg-3 r-xsFloats one ladder step above its panel; rows are quiet until hovered (bg-3, shown on the third row). Tracked-caps labels and icon rows live inside menus under the same rules as panels. External actions carry a trailing glyph.
bg-2 r-lg p-8 · row h 46 r-10 · hover bg-3Drill-in headers balance the back button with an empty slot of equal width so the title stays optically centered. Icon buttons are 38px and quiet; only the account button is round and pre-raised.
title 15/600 centered · iconbtn 38 r-10 · avatar round bg-2Browse-grid items: square thumbnail, centered caption. Selection wraps thumbnail and caption in a bg-2 card and lifts the caption to ink-hi — the same +1 ladder rule as everywhere else. Click to switch.
pad 7 r-md · thumb r-sm square · caption 12.5 centeredA 2-axis input for spatial parameters. Hairline rule-of-thirds grid on bg-0; the handle is a 16px white dot with the system's only glow — light emitting light. Drag it.
grid hairline · dot 16 + glow 14/28% · r-mdOne or two lines that explain the surface the user is looking at.
Progress as a tracked-caps step counter, title, muted body, then the full button hierarchy in one row: text escape left, ghost + primary right.
bg-1 r-lg p 22 · step 11px caps ink-faintModals sit at bg-0/bg-1 with r-xl and a centered 24px title; the close X floats top-right at ink-low. The vertical recipe: title → segmented chooser → identity line with inverse badge → display-size number → full-width primary → checklist → faint reassurance footer. Every element is a component from this page — modals introduce nothing new.
r-xl · pad 24–26 · title centered 24/700 · one primary per modalMotion is functional and brief — state changes, not theater. Two durations cover the system.
Copy-paste starting point — the same variables this page is built from.
:root {
/* surface ladder — elevation is lightness */
--bg-0: #0f0f0f; /* canvas */
--bg-1: #171717; /* panel / modal */
--bg-2: #222222; /* control at rest */
--bg-3: #2e2e2e; /* active / fill / selected */
--bg-4: #3a3a3a; /* hover on raised */
--hairline: rgba(255,255,255,.08);
/* ink ladder */
--ink-hi: #f2f2f2; --ink-mid: #b3b3b3;
--ink-low: #8a8a8a; --ink-faint: #5f5f5f;
/* inverse pair — the only accent */
--inverse-bg: #ffffff; --inverse-ink: #101010;
/* radius */
--r-xs: 6px; --r-sm: 8px; --r-md: 12px;
--r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
/* size & rhythm (base-4) */
--row-h: 48px; --gap-row: 10px;
--pad-control: 16px; --pad-panel: 20px;
--gap-section: 32px;
/* type: Geist for everything; hierarchy via size/weight/ink */
--font-ui: "Geist", -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
--font-mono: "Geist Mono", ui-monospace, monospace;
/* display 56/700/-2% · title-lg 24/700 · title 19/650
label 15/400 ink-mid · value 15/500 ink-hi tabular
section 11/600/+14% CAPS · caption 13 · micro 12/500 */
/* motion */
--ease: cubic-bezier(.25,.1,.25,1);
--t-fast: 120ms; --t-med: 180ms;
}