Living reference
Style Guide
Design tokens, type scale, and the diagram vocabulary, on one page so the theme can be changed and checked in one place.
Everything here reads from the token file. Changing a token changes this page and the rest of the site together, which is the point of keeping colour and type in one place.
Colour
Surfaces and text
--color-bg--color-surface--color-surface-sunken--color-border--color-border-strong--color-text--color-text-muted--color-text-faint
Accent
--color-accent--color-accent-hover--color-accent-wash
Diagram nodes
--diagram-controller--diagram-worker--diagram-validation--diagram-artifact--diagram-ok--diagram-fail
Type scale
- Programming With Intent
--step--1 - Programming With Intent
--step-0 - Programming With Intent
--step-1 - Programming With Intent
--step-2 - Programming With Intent
--step-3 - Programming With Intent
--step-4
Headings are serif, body and interface are sans. The scale is fluid, so these shift with viewport width.
Diagrams
Diagrams are authored SVG, never generated images. Labels are real text, so a crawler and a retrieval agent can read them. Colours come from tokens, so a diagram follows the site into dark mode without separate artwork.
Workflow diagrams reuse one node vocabulary, so the same colour means the same thing across articles.
- Controller
- Bounded worker
- Validation gate
- Artifact
- Terminal
- Fail-closed stop
- Repeats per candidate
Hover or focus any step for detail.
Bounded by