Preview card 09

Applied UI — the source, then the system applied

Loads the real files in frames
index.html · ui_kits/app/*

Every frame below loads a real file from this project. The first is the sole piece of evidence the system was read from; the rest are the system applied back out to new surfaces. If a token changes, all of them change together — they share colors_and_type.css, tokens.css and app.css.

The evidence — the redesigned home page

SOURCE · ../index.html · 516 lines · the only evidence for this system Open full page →

A byte-preserved copy sits at examples/source-home-page.html so the extraction stays auditable if the working file moves on.

Applied — kit index

APPLIED · ../ui_kits/app/index.html · install steps + the four working rules Open full page →

Applied — register browser

The home page's record field, promoted into a working surface: the field, a register tally, and a filterable record table driven by one selection. Click a chip inside the frame.

APPLIED · ../ui_kits/app/register-browser.html · prototype 197-match ALERG field + table filter Open full page →

Applied — case file & corrections

../ui_kits/app/case-file.html Open →
../ui_kits/app/corrections.html Open →

Applied — component reference

../ui_kits/app/components.html · 21 components, each with its source line Open full page →

What to check in this card

CheckExpected
CanvasEvery frame is paper-green #f5f7f1. White appears only on evidence surfaces.
Volt budgetOne highlighted word, one volt figure per data block, one volt CTA per dark band, the footer TLD. No second volt figure in a ledger.
FiguresEvery headline number is serif and tabular. No sans numerals.
ReceiptsEvery band with a figure has a mono .src line under it.
Disclaimer"Not affiliated with the City of Avon Lake" in every masthead and every footer.
Dark bandsAt most one .feat per page, plus the footer.
ResponsiveNarrow this window: no horizontal scroll, drawer nav below 960px.
← All preview cards