Twenty-one components. Fourteen read from the source, seven derived.
Each entry names the selector, where it lives in index.html, and the one rule
that keeps it inside the system. Derived components are stamped as extensions everywhere they appear.
Topline ribbon
.toplineindex.html · line 60
Source
3px, three segments in the order the palette is spent: structure 42%, action 32%, signal 26%. It sits above everything, including the masthead.
Masthead + nav
.mast .brand .tag .liveindex.html · lines 61–74
Source
Not affiliated with the City of Avon Lake Updated Jul 2026
Sticky, 62px, 90% canvas with a 10px blur. The disclaimer tag is
part of the component — never drop it. Nav links carry a 2px forest underline that scales from the left;
[aria-current="page"] keeps it lit.
Buttons — five variants
.btn .solid .ghost .ondark .voltindex.html · lines 47–57
Source
Mono, uppercase, .07em, 4px radius. Hover lifts 1px and inverts;
active presses with an inset shadow. .volt exists only on dark.
Status stamp
.stamp.live .stamp.prepindex.html · lines 159–161
Source
Two colours: we hold it, or it's on the record and not yet
obtainable. A third class — .quiet, component 21 — carries the neutral states
without introducing a hue. Need a fourth meaning? Write a clearer label, don't add a colour.
Register legend chip
.lg · the only pillindex.html · lines 119–122
Source
Real buttons bound to hover, focus and click. Locked state is
aria-pressed="true"; Escape clears. Live on
the register browser.
Filing-card panel
.panel .prow .psplit .pfootindex.html · lines 90–101
Source
The one object on --shadow-lg. Values
count up on reveal; the split bar fills 200ms later. Bar labels state the total — always.
Filing-tab card
.ic[data-tab]index.html · lines 152–162
Source
Power-plant redevelopment
The deeds, votes, and declared recusals behind the lakefront land deal.
The 197-match prototype corpus
Every keyword match on a case term, grouped by its source.
Public safety
Rankings are on record; the department's 2023–25 annual reports are not yet public.
Radius 0 8px 8px 8px; the tab is a
::before reading data-tab. Hover lifts 4px and
inverts the tab.
Annotated-document grid + margin note
.doc .mgindex.html · lines 77–79
Source
The margin note carries the section's methodological caveat, not a marketing aside. If a section makes a claim about how the record was read, it gets one.
Method row + callout rule
.mlist .mrow .ruleindex.html · lines 141–148
Source
What council voted
Ordinances, resolutions, and roll-calls — who voted how, and who was excused.
Authorized ≠ paid
Authorization, contract, payment, reimbursement, and delivery stay separate states.
Hover tints the row and steps padding-left 4px→14px. On the case file the same component carries years instead of step numbers — the numeral slot is generic.
Standards strip
.stand .st .snindex.html · lines 166–171
Source
Open the receipt
Every material claim links to the original document.
Say only what's documented
We state what the record says and preserve uncertainty.
Resident-built
Not affiliated with the City of Avon Lake. Corrections welcome.
One box, three cells, 1px verticals — not three floating cards. That's what makes it read as a single standard with three clauses.
Dark band + ledger
.feat .ledger .lrow .lv.voltindex.html · lines 125–138
Source
Exactly one .lv.volt per ledger. At most
one dark band per page before the footer.
Record field
.grid197 .cellindex.html · lines 114–117, 437–485
Source
Fills, never outlines. Largest register darkest. Static export in
assets/; the interactive version runs on
the register browser.
Highlighter
.hl · one word per pageindex.html · lines 43–45
Source
read the way the documents actually read
Ink footer + colophon
footer .disclaimer .fh .colophonindex.html · lines 174–183
Source
An independent, resident-built public-record project. Not affiliated with, endorsed by, or operated by the City of Avon Lake.
Record table
.rtderived from
.prowExtension
| Date | Instrument | Recorded | Flag |
|---|---|---|---|
| 2021-03-11 | Warranty deed | $0 | Exempt |
| 2021-06-29 | Quit-claim | $0 | Not a valid sale |
Not in the source. The panel-row logic widened to columns: mono
uppercase headers on --surface-2, serif tabular figures right-aligned, caption
below carrying the receipt. Scrolls horizontally under 960px.
Form field
.fldderived from the eyebrow + border language
Extension
Not in the source. Quiet and official — required marks use
--amber-ink, the one non-green, because "you must supply this" is the same
class of signal as "not yet obtainable". Live on corrections.
Tabs
.tabsderived from the filing tab
Extension
Not in the source. The filing tab promoted to navigation: same
6px 6px 0 0 shape, same mono .11em label, selected tab joins the surface below
by overlapping the 1px rule.
Labelled bar row
.browderived from
.sbarExtension
Not in the source. The split-bar fill logic unrolled into a list, for a quantity whose parts each need naming. Every row states its own value, so it reads without an axis; fills come off the ordinal ramp so rank still reads as weight. Live on the dashboard and in the corpus register.
Stated-limits list
.gapsderived from the callout rule
Extension
- 2023, 2024 & 2025 ALPD annual reports
- Calls for service by type
- Case clearance rates
- Traffic-stop demographics
Not in the source — but the source's method step 06 is "What we can't show", so the shape was already the system's. A gap list is a component here because naming a gap must not depend on someone remembering to write the paragraph.
Filing-tab card as a track selector
.ic[aria-selected]a state on component 08
Extension
Not in the source. Selected inverts the tab exactly the way hover
does, so the affordance and the state read as one gesture. As a <button
role="tab"> it owns aria-selected,
aria-controls, roving tabIndex and ←/→; the panel is a
plain [role="tabpanel"] toggled with the native
hidden attribute, so no-JS lands on the first panel rather than on nothing. The
optional .fig slot keeps a card's headline number serif and tabular.
The neutral stamp
.stamp.quietthe third state class
Extension
The seven-state lifecycle in IMPLEMENTATION.md
§4 has always mapped draft / open /
withdrawn onto a neutral chip. It existed as a token and a table row before it
existed as a class — asserted, not corroborated — until the target-page rebuild needed to render an
absent council member and a stage with no record behind it.
app.css under the EXTENSIONS banner, and give it a
Extension stamp here. Provenance is a feature of this system, not
bookkeeping. Every extension above was added when a real page could not be built without it — never
speculatively.