Work / CivicOS

Platform · Self-initiated

CivicOS

One engineering system behind four public websites: a city, a school district, a college, and an airport. The institutions are invented. The sites, the CMS, and the test results are real, and you can use them.

  • 4Live sites on one design system and CMS
  • 0WCAG 2.2 AA violations on 320 pages checked, phone and desktop
  • 100Lighthouse accessibility score on every page tested

Why we built it

Public-sector RFPs ask for the same things in different words: services residents can finish, editors who publish without a ticket, emergency notices that reach everyone, and accessibility that holds after launch. We built one platform that does all of it, then put four very different institutions on it to show that the parts are shared and the sites are not clones.

The four sites

  • City of Riverton: services organized around residents. Report a problem with a map pin and a tracking number, apply for a permit, look up trash day by address, follow council meetings, and explore the budget.
  • Franklin County Public Schools: Find My School by address, enrollment in five steps, about 30 school sites under one district, plus menus and buses.
  • Fairview State College: a program finder, student stories, and campus visit booking that ends with a calendar invite.
  • Fairfield Regional Airport: flight boards, parking reservations with a QR pass, terminal wayfinding, and security waits, built for a phone first.

What they share

  • A design system of 34 accessible components and four brand token sets, shown side by side in the CivicOS gallery
  • One headless CMS for all four sites, with roles per institution, draft, review and publish steps, an audit log, and scheduled publishing
  • Emergency publishing: one message reaches the city, every school site, and the airport within seconds
  • Search with typo tolerance, synonyms, and suggested tasks. Try “trash” on Riverton.
  • First-party analytics with no cookies and no third-party scripts

Four brands, one set of parts.

How it is checked

A crawl checks 320 pages across the four sites with axe at phone and desktop widths, on the live sites as well as in development, and a link check loads all 1,384 pages. Scripted journeys file a pothole report, find a school and start enrollment, book a campus visit, and reserve parking from start to finish. Lighthouse runs on a simulated slow phone connection, and accessibility and best practices score 100 on every page tested.

About the fiction

The institutions, people, and data are fictional, and each site says so in its footer. Phone numbers use the 555-01xx range reserved for fiction, the sites ask search engines not to index them, and live data such as flights, parking, and buses comes from simulators.

Start at the CivicOS hub. The CMS is open by invitation, so request a walkthrough to see the editor side.

Next projectCity of Northline