The BataviaIL brand
WindmillCity
Batavia has had three names, and each one left a colour. This is the identity the directory now runs on — and a record of the civic blue it replaced.
Three names, one habit
1833 → 1870s
Batavia
Settled on the Fox, the oldest city in Kane County. The river is the reason the town is where it is — every later industry is downstream of that one fact.
Rock City
A limestone quarry opens at the west end of town. By 1860 there are nine, on both banks. After the fire of 1871, Batavia stone goes to rebuild Chicago.
The Windmill City
Six manufacturers, and for a time the leading windmill-making city in the world. Batavia's fans went up over farms across the plains.
Batavia makes things that catch what's moving. Wind, water, freight, and — at Fermilab on the prairie edge of town — particles. The mark was already a windmill fan: blades radiating from an off-centre hub. It didn't change. Only its colour did, and it went flat, because a windmill fan is galvanised steel, not a sunrise.
The palette, quarried
Sampled from real materials
Seven lenses, one quarry
Persona accents
Each doubles as a banner ground with white text and as accent text on limestone, so both uses stay legible. Depot Blue is the CB&Q passenger depot of 1854; Bellevue is the plum of Bellevue Place.
What it looked like before
Captured 11 Sep 2026, minutes before the swap
The old palette was navy #292F7B, sky #00ADEF and a safe green on a cold blue-grey ground — the palette of a thousand municipal sites. These are the same six screens, before and after.
The persona chooser
Civic navy becomes the quarry at dusk. The lens accents had to be lifted toward the light end of each hue — colours tuned for limestone disappear on a dark ground.
Family with Kids
The banner was Tailwind green; it is now Prairie — big bluestem in late summer. The ground moved from cold #f6f7fb to warm limestone, which is the single change that does most of the work.
Teen & Student
Sky blue becomes Millrace. Event dates moved into IBM Plex Mono and now sit in a tabular column, which is what a schedule wants.
An organisation page
Water Street Studios keeps its own brand on the hero — that is the entity's identity and it stays. Everything a visitor operates underneath is now Batavia's.
Batavia High School Athletics — the hard case
The one that proves the rule. Bulldog scarlet still fills the hero, because that is the school's identity and this is its page. But the section labels, the team-count badges and the fixture dates left scarlet and blue for Fox Slate and Millrace — so a team page still reads as part of one directory.
A Pro page — deliberately unchanged
Tier-3 bespoke pages are designed around the organisation's own brand, so the rebrand does not touch them. Sturdy Shelter looks exactly as it did, and should.
Living with Bulldog red
One rule, and it resolves everything
The directory carries 37 school teams, so scarlet and black appear constantly. School colours are content. They are never chrome.
Let a team's own page carry its crest and a scarlet hero, sitting inside the limestone frame.
Use Vane Red for heritage moments — an 1842 date stamp, the Depot Museum, a historical marker. It is Batavia's own red, and it is nothing like the school's scarlet.
Tint navigation, buttons, links or the event strip to match whichever team is on screen.
Put Vane Red next to school scarlet. Two reds a shade apart read as a printing error.
What actually changed in the code
A token swap, not a rewrite
| Was | Is | Name | Where it shows |
|---|---|---|---|
| #292F7B | #17464B | Fox Slate | Banners, headings, primary buttons |
| #00ADEF | #22646A | Millrace | Links, org names, event dates |
| #60C560 | #C89A3E | Prairie | Accent fills |
| #7E7F81 | #5C564C | Iron Soft | Secondary text |
| #1c2030 | #1F1D1A | Forge Iron | Body text |
| #e7e9f0 | #CFC3AC | Quarry Line | Rules and borders |
| #f6f7fb | #EDE6D8 | Limestone | Page ground |
| #ffffff | #F7F2E7 | Cut Face | Cards, panels, the modal |
Applied in index.html, entity.html, landing.html, the tier-1 baseline in themes.js, and the seven lenses in personas.js. Type is Archivo for nameplates, Public Sans for reading, IBM Plex Mono for every figure and label.
Sources. Batavia Historical Society (quarrying, industries); Batavia Park District (Our Story, Depot Museum); Batavia Depot Museum exhibit notes.
Historical figures are as recorded by those sources. Colour values are sampled to match the materials described, not taken from spectrometer readings off actual Batavia stone.