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

Google Sans Flex supplies body text, headings and interface text. Google Sans Code supplies code and quotations. Body text is 17px with a 24px line height; article headings are 20px with a 24px line height. Page titles and interface sizes use the scale above. Article blocks share one full-width column.

Callouts

An idea highlights a principle or approach. A note supplies context or a qualification.

Make the hidden decisions explicit.

The example uses the supplied log and its stated category rules.

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.

Controlled verification workflowA controller binds authority and source, discovers scope, and validates the prepared run. Four independent finders then run concurrently, feeding two cross-challenge checkpoints which fan in to report validation. Candidates are atomized, deduplicated and admitted with provenance frozen and the finder hidden. One cold verifier per admitted candidate then runs concurrently, fanning in to deterministic evaluation, a run receipt, and a validated advisory. Three validation gates can instead stop the run with retained evidence.fail closedFan-out: four independent finders, separate contextsCross-challenge, one per laneFan-out: one cold verifier per admitted candidate, run concurrentlyBind authority and sourceIdentity and requirement identitiesDiscover scope, construct manifestsValidate the prepared runProduction finder ACold source-only passProduction finder BIndependent second passTest finder ATest-evidence scopeTest finder BIndependent challengeObserver-soundness checkpoint AObserver-soundness checkpoint BValidate reports, reconcile coverageAtomize and deduplicate candidatesAdmit candidatesFreeze provenance, enforce the cap, hide the finderCold verifier 1Try to refuteCold verifier 2Try to refuteCold verifier 3Try to refuteCold verifier nOne per candidateDeterministic evaluation and assemblyRun receipt and detailed matrixEND: return validated advisoryFAIL: stop with retained evidence
  • Controller
  • Bounded worker
  • Validation gate
  • Artifact
  • Terminal
  • Fail-closed stop
  • Repeats per candidate

Hover or focus any step for detail.

A controlled verification workflow, drawn from a production spec-to-test pipeline.Controller in blue, bounded worker in purple, validation gate in teal, artifact in amber. The dashed rail is the fail-closed path: an incomplete run cannot become a clean result.