document-design-system
Figure gallery
Every figure below consumes the same tokens as the page. Change data-theme on the root element and all of them follow.
Diagram · hand-authored SVG
Architecture
Position carries coupling, so this one is drawn, not laid out.
Diagram · change view
What changes, and what does not
Before above after on shared columns; a ledger names each change by node id.
Diagram · deployment map
Where does it run?
Cluster, then namespace, then workload; dependencies stay outside the boundary.
Diagram · dependency graph
What waits on what?
Directed and acyclic, in date order; the one accent is the critical path.
Diagram · Mermaid prerendered
Sequence
Order is dictated by the protocol, so auto-layout is honest here.
Chart · ranked bars
Concentration
Sorted descending, zero baseline, one focal bar.
Chart · columns
Cohorts
Chronological, never sorted by value — that would destroy the axis.
Chart · line
Time series
Straight segments; a spline would invent readings between points.
Chart · waterfall bridge
How the total is built
Signed steps that must sum to the total; the excluded change is dashed, never added.
Ledger · hand-authored SVG
Used against a limit
1.84M of 2.50M units (74%) · 660K remaining
A linear track beats a gauge — same value, stated precisely.