Design systems

Gamma is the workspace system the explorer ships in. Surfaces stay close to white so the component under review carries the contrast, and a single cobalt accent marks action and focus. Shadows are tinted from the ink so elevation reads as depth rather than dirt.

• One accent. Cobalt marks action and focus; nothing else competes with the preview.
• Ink-tinted depth. Every shadow is a blue-gray lifted from the text color.
• Nine-pixel controls, twelve-pixel panels. Small radii keep the workspace precise.
• Motion explains state. Standard easing for changes, a soft spring only for elastic controls.

Nocturne is designed dark first and stays dark; it does not follow the page theme. Surfaces step up in three blue-black tones, text is off-white rather than pure white, and one desaturated teal carries action, focus, and live indicators. Timing is fast and shadows are deep and colorless.

• Single mode. The system is authored in the dark and ignores the light theme.
• Three steps of blue-black. Canvas, surface, and well are close in value so the accent stays loud.
• Sea-glass, not neon. The teal is desaturated enough to sit on screens all day.
• Fast and flat. Sub-200ms transitions and no overshoot; feedback should feel mechanical.

Atelier separates the display voice from the interface voice: headings set in Newsreader carry the character, while Instrument Sans keeps controls plain. The canvas is a cool stone rather than cream, the accent is a deep moss green, and radii stay small so the page feels printed rather than inflated. Transitions are long enough to be noticed and never overshoot.

• Two voices. Serif display for headings, humanist sans for everything a person operates.
• Cool stone, not cream. A faint green-gray canvas keeps the moss accent from going warm.
• Small radii. Six-pixel controls and eight-pixel panels read as print, not app.
• Unhurried motion. Longer durations, exponential ease-out, no spring.

Signal spends its boldness on shape and one color. Buttons are full pills, panels are twenty-pixel rounded, and the vermilion accent is tuned to 4.7:1 on white so it can label as well as fill. Bricolage Grotesque gives headings character at display sizes while staying plain in controls. Springs are real but brief.

• Pills identify actions. Anything you press is fully rounded; anything you read is twenty-pixel rounded.
• Vermilion that passes. The accent is deep enough to be text, so links and quiet buttons stay on brand.
• One face at two sizes. Bricolage Grotesque tightens at display size and relaxes in controls.
• Brief springs. Overshoot on arrival, then still; nothing loops.

Ledger treats every surface as a table. The canvas is a cool gray so white panels read as cells, the deep cyan accent is reserved for the current row and the primary action, and shadows are almost absent because hairlines already separate everything. Radii stay under six pixels, and transitions finish before a person notices them.

• Borders, not shadows. Elevation is a hairline; the mid shadow is a whisper.
• Nearly square. Four-pixel controls and six-pixel panels; no pills anywhere.
• Zero tracking. Figures must align across rows, so headings are not tightened.
• Fastest motion, no spring. State changes complete in under 150ms.