An annotated-document system for civic accountability: a cool paper-green canvas, white evidence cards, one 150° green ramp that carries structure and data, a highlighter-yellow rationed to four roles, and a serif/sans/mono split where the serif speaks, the sans explains and the mono cites.
Review in this order: 09 · Applied UI first — it loads the source home page and every applied surface in one place, so you can see whether the system holds. Then 01 · Color and 07 · Data encoding, which carry the two decisions everything else follows from.
The source home page and all four kit surfaces, loaded live in frames, with a seven-point check list.
20 tokens with computed OKLch and measured contrast; the green ramp, the volt budget, the one amber break.
The prototype 197-match ALERG field, its encoding rules, its accessibility contract, split bar and count-up.
Three stacks, thirteen steps, the serif-figure rule, and the marker swipe.
The unrounded document rhythm, every asymmetric grid, and all four breakpoints.
Seven radii, four green-tinted shadows, and the six durations — replayable at true speed.
Five button variants on light and dark, the stamp vocabulary, the legend chip, and the derived form fields.
Filing panel, filing-tab card, annotated-document grid, method rows, standards strip, dark ledger, record table.
Wordmark lockups, topline ribbon, register scale, the data-exact record motif, and the derived runtime icons.
Added when the system was re-measured against the linked pipeline
(the lorain-data repo) — evidence no earlier pass had read.
It turned up a seven-state status vocabulary the two-state stamp could not express, a stricter definition
of "receipt", and a stated WCAG 2.2 AA target.
Primitives name a colour; roles name a job. The semantic layer, volt's four roles named, the seven-state lifecycle mapped onto two colours, the identity-grade ramp, and the migration table.
An opt-in dark theme built from surfaces the system already owned — the same components in both themes, every pair measured, and the rules that reverse in dark.
Added after the system was assembled, to test one thing the package asserted but had never verified: that "all three type stacks resolve locally" was good enough. It was not — the display face is now self-hosted. This card is the record of why.
Added by the readiness audit. 390px is a product requirement that sits below every breakpoint the source declared, so it was an assumption until this card rendered it.
| Path | What it is |
|---|---|
| DESIGN.md | The system — context, color, type, spacing, layout, components, motion, voice, anti-patterns |
| README.md | How to reuse the package outside this run |
| SKILL.md | Agent-facing build instructions and hard rules |
| colors_and_type.css | 20 primitives + the semantic role layer + the dark theme + three type stacks |
| tokens.css | Spacing, layout, radius, elevation, motion |
| IMPLEMENTATION.md | Layer order, role naming, theming, status mapping, porting, pre-ship checklist |
| ui_kits/app/ | Applied kit: 5 pages, app.css, app.js, README |
| tools/ | audit-readiness.py — 14 checks, run before publishing · export-artifacts.py — regenerates the exports below |
| brand.json · variables.css theme.json · kit.html · kit.dark.html | Generated exports — the conventional filenames, each written from a canonical source. Never edited by hand; check 14 fails the package if one drifts. |
| assets/ · build/ | Wordmarks, ribbon, register scale, record motif, mark; derived runtime icons |
| examples/ | Byte-preserved copy of the source home page |
| context/ | Source handoff and full provenance — what was read, what was excluded, why |
This system was derived from one file at the user's instruction:
index.html, the redesigned home page, so it can be applied outward to the
remaining pages. index-v1.html is superseded;
avonlake-city.html and alerg-case-file.html are targets,
not sources — both are now rebuilt on the system, migration shim deleted, composed from
the components in app.css; brand-spec.md and
image.png describe an earlier burgundy/newsprint direction the redesign replaced.
Full reasoning in context/provenance.md.
Set in Charis SIL and IBM Plex Sans, with SF Mono for every figure. Greens read from the record: forest · leaf · sage.