Design language

Three layers, one seam

The stylesheet separates brand (the mark, the grain, the type — constants no palette may set), palette (a --bg/--fg/--accent triplet everything else derives from), and scheme (light/dark polarity). The seam means a renderer palette can restyle a diagram plate without touching the logo or the shell — the same isolation the editor uses when its palette dropdown changes render output but never the app chrome.

Colour

The shell is warm stone and ink; one derived ramp covers text, borders, and surfaces. Ink steps keep WCAG AA: soft 8.0:1, faint 5.3:1 on the ground.

The pine accent carries links, buttons, and focus. It sits in the hue region no diagram palette's accent occupies (the renderer accents cluster warm at 21–58° and cool at 217–318°), so chrome and artwork never read as one palette. The brand chip is its own token pair — --brand-pine/--brand-on — outside the palette layer entirely.

Functional colour

Four hues carry meaning only, each with a solid ink for text and a 14% tint for fills. On this ground the inks measure success 5.9:1, info 4.8:1, warn 5.4:1, danger 6.3:1. Success is a true leaf green held at least 20° of OkLCH hue from the pine accent, so a link and a confirmation never read as the same colour.

Typography

Charter carries reading, Avenir carries controls, SF Mono carries code and data. Headings track tighter as they grow (--track-heading −0.018em, --track-display −0.022em) and balance their line breaks; body text wraps pretty at a 46.25rem measure. Anywhere digits change — render times, scales, tables — tabular-nums keeps them from shifting the layout.

Space, radii, and nesting

Spacing runs a 4px-based scale (--sp-1 4px → --sp-9 56px). Radii come in three sizes plus a pill; nested corners are derived, not matched: inner = outer − border − padding, written as a calc() so the derivation is visible in the stylesheet.

Elevation

Shadows are layered — a hairline ring, a near shadow, a far ambient — because one heavy blur reads flat. Controls sit on a ring alone; cards add the near layer; popovers add the far one.

Motion

Three durations, one curve. Presses run --dur-press 0.1s, control state changes --dur-control 0.16s, page-level fades --dur-ui 0.2s, all on --ease-out cubic-bezier(0.22, 1, 0.36, 1) — fast start, soft landing, the curve for anything answering the user. Every press lands at scale(0.96). Popovers enter from their anchor and visually return along the same path in 90ms, while their semantic close and focus release happen immediately.

• Start from the current visible value; a new gesture cancels and takes over immediately.
• Only momentum-bearing gestures may coast. Click-triggered controls never bounce or overshoot.
• Reduced motion keeps brief opacity and colour feedback, never translation or scale; rendering itself never animates.
• No new translucent surfaces: existing overlays offer opaque reduced-transparency and contrast fallbacks.

Iconography

Interface icons are hairline strokes with round caps and joins: stroke-width 2 up to 14px, 1.75 from 15px, so optical weight stays even as size grows. The graph mark is exempt — it is brand art with its own drawn weights, isolated in the brand layer.

Voice

Interface copy states what happened and, on failure, what to do next.

• Confirmations are calm sentences: SVG saved. PNG copied (2×). — periods, no exclamation marks, a real multiplication sign.
• Errors name the unmet condition: Load or write a diagram before exporting. rather than an apology.
• Status is concrete: Verified: no warnings, Rendered in 12ms — a measurement, not an adjective.

Diagram styles and palettes (hand-drawn, watercolor, paper, dusk, tokyo-night, …) are documented in Styles and palettes; they style rendered diagrams and stay out of this shell by construction.