avonlake.city
Component reference · public-record design system
Not affiliated with the City of Avon Lake
Component reference

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.

01 · Structure

Topline ribbon

.topline
index.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.

02 · Structure

Masthead + nav

.mast .brand .tag .live
index.html · lines 61–74
Source
avonlake.city Independent public-record project
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.

03 · Control

Buttons — five variants

.btn .solid .ghost .ondark .volt
index.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.

04 · Control

Status stamp

.stamp.live .stamp.prep
index.html · lines 159–161
Source
Prototype · 197 matchesLive · FY2023Records requested

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.

05 · Control

Register legend chip

.lg · the only pill
index.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.

06 · Surface

Filing-card panel

.panel .prow .psplit .pfoot
index.html · lines 90–101
Source
Lead investigation
ALERG / power-plant site
Open
Prototype matches0
Planned city purchase0
Site acreage split43.23 ac total
23.22 ac public park20.01 ac remainder
Every figure on this site opens its source document.

The one object on --shadow-lg. Values count up on reveal; the split bar fills 200ms later. Bar labels state the total — always.

08 · Layout

Annotated-document grid + margin note

.doc .mg
index.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.

09 · Surface

Method row + callout rule

.mlist .mrow .rule
index.html · lines 141–148
Source
03

What council voted

Ordinances, resolutions, and roll-calls — who voted how, and who was excused.

04

Authorized ≠ paid

Authorization, contract, payment, reimbursement, and delivery stay separate states.

The rule beside every claim: a receipt and a limitation.

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.

10 · Surface

Standards strip

.stand .st .sn
index.html · lines 166–171
Source
01 · Inspectable

Open the receipt

Every material claim links to the original document.

02 · Restrained

Say only what's documented

We state what the record says and preserve uncertainty.

03 · Independent

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.

11 · Surface

Dark band + ledger

.feat .ledger .lrow .lv.volt
index.html · lines 125–138
Source
Lead investigation

Four deeds that record no price, and a $15M public purchase.

Sale price recorded on the 2021 deeds$0
Planned city purchase, financed by TIF$15M

Exactly one .lv.volt per ledger. At most one dark band per page before the footer.

12 · Data

Record field

.grid197 .cell
index.html · lines 114–117, 437–485
Source
197 prototype ALERG keyword matches by source group

Fills, never outlines. Largest register darkest. Static export in assets/; the interactive version runs on the register browser.

13 · Type

Highlighter

.hl · one word per page
index.html · lines 43–45
Source

read the way the documents actually read

14 · Structure

Ink footer + colophon

footer .disclaimer .fh .colophon
index.html · lines 174–183
Source
avonlake.city

An independent, resident-built public-record project. Not affiliated with, endorsed by, or operated by the City of Avon Lake.

Set in Charis SIL and IBM Plex Sans, with SF Mono for every figure.Greens read from the record.Every claim links to its source.
15 · Data

Record table

.rt
derived from .prow
Extension
Every table carries a caption naming the register and the retrieval date.
DateInstrumentRecordedFlag
2021-03-11Warranty deed$0Exempt
2021-06-29Quit-claim$0Not 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.

16 · Control

Form field

.fld
derived from the eyebrow + border language
Extension
Mono uppercase label, --sage on hover, forest focus ring, no decorative chrome.

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.

17 · Control

Tabs

.tabs
derived 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.

18 · Data

Labelled bar row

.brow
derived from .sbar
Extension
Municipal income tax$17.11M
Property taxes$7.50M
Charges for services$3.37M

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.

19 · Surface

Stated-limits list

.gaps
derived from the callout rule
Extension
What remains unknown
  • 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.

20 · Control

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.

21 · State

The neutral stamp

.stamp.quiet
the third state class
Extension
Corroborated Contested Open Withdrawn

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.

Adding a twenty-second: build it from the tokens, place it in 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.