Design language
The tokens, type, and motion the site and editor share — documented with the same variables that render this page. Diagram themes are deliberately absent: they colour the artwork, never this shell.
Three layers, one seam
The stylesheet separates brand (the mark, the grain, the type — constants no theme may set), theme (a --bg/--fg/--accent triplet everything else derives from), and scheme (light/dark polarity). The seam means a renderer theme can restyle a diagram plate without touching the logo or the shell — the same isolation the editor uses when its theme 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 theme'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 theme 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 with a short fade-and-scale from the corner that anchors them and exit instantly; prefers-reduced-motion flattens all of it.
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 themes (hand-drawn, watercolor, paper, dusk, tokyo-night, …) are documented in theming; they style rendered diagrams and stay out of this shell by construction.