CivicOS Design System
@civicos/ui · @civicos/tokens
One engineering system, four institutions that shouldn’t look alike. Components share logic, accessibility and behavior; brands change type, color, shape and motion through tokens.
Every panel below uses identical markup: Eyebrow, Button, ServiceCard, EmergencyAlert, Statistics and StatusBadge. Only the brand tokens differ.
Fairview State College
Newsreader + Hanken Grotesk
Admissions
Your future looks different from here.
City of Riverton
Schibsted Grotesk
City services
What can we help you find?
Franklin County Public Schools
Lexend + Atkinson Hyperlegible Next
For families
Every student. Every possibility.
Fairfield Regional Airport
Barlow + Barlow Semi Condensed
Departures
Where are you headed?
Showing Fairview State College. Switch brands at the top; every component below re-themes from tokens alone.
Brands set values; components read only semantic --cv-* custom properties. Every text and UI-boundary pair is unit-tested for WCAG AA.
Raw palettes from src/brands/*.ts. Components never use these directly.
Fairview State College
#14233F#A8432A#F3EEE4#2F5D50#FAF7F1#161B26#545A63#8A3420City of Riverton
#0B4EA2#083B7C#2E7D4F#FFC61A#EEF3F8#10202F#4A5868#D3DCE6Franklin County Public Schools
#0E5E6F#0A4552#F6B21B#EF6F51#B4432A#4BAE6A#2D7A47#FFF8EE#FBEEDB#1D2B30Fairfield Regional Airport
#0B0B0C#FFFFFF#FFD000#2A2B2E#565A62#E2E4E8#F3F4F6#0B6B3A#1F4FD8#B26B00#B3261ELive values for the brand selected above.
--cv-color-bg#FAF7F1#FFFFFF#FFF8EE#FFFFFF--cv-color-surface#FFFFFF#FFFFFF#FFFFFF#FFFFFF--cv-color-surface-sunken#F3EEE4#EEF3F8#FBEEDB#F3F4F6--cv-color-surface-inverse#14233F#10202F#0B3F4B#0B0B0C--cv-color-text#161B26#10202F#1D2B30#0B0B0C--cv-color-text-muted#545A63#4A5868#55615F#565A62--cv-color-border-strong#857D6E#748393#8C7E6A#85898F--cv-color-primary#14233F#0B4EA2#0E5E6F#0B0B0C--cv-color-accent#A8432A#FFC61A#F6B21B#FFD000--cv-color-link#9A3B24#0B4EA2#0E5E6F#0B0B0C--cv-color-focus#A8432A#0B4EA2#B4432A#1F4FD8--cv-color-success#2F5D50#276B44#2D7A47#0B6B3A--cv-color-danger#B3261E#B42318#B42318#B3261E--cv-color-highlight#F6E3B4#FFE58A#FCE1A1#FFE873From checkContrast() in @civicos/tokens: the five tightest pairs per brand.
Fairview State College136/136 pairs pass AA
City of Riverton136/136 pairs pass AA
Franklin County Public Schools136/136 pairs pass AA
Fairfield Regional Airport136/136 pairs pass AA
Fluid clamp() steps --cv-text-xs … --cv-text-7xl, per brand ratio. Display steps use --cv-font-display.
--cv-text-7xlRiverside--cv-text-6xlRiverside--cv-text-5xlRiverside--cv-text-4xlFind what moves you--cv-text-3xlFind what moves you--cv-text-2xlFind what moves you--cv-text-xlOffice hours are Monday to Friday, 8 a.m. to 5 p.m.--cv-text-lgOffice hours are Monday to Friday, 8 a.m. to 5 p.m.--cv-text-baseOffice hours are Monday to Friday, 8 a.m. to 5 p.m.--cv-text-smOffice hours are Monday to Friday, 8 a.m. to 5 p.m.--cv-text-xsOffice hours are Monday to Friday, 8 a.m. to 5 p.m.Fonts: Newsreader (--font-newsreader), Hanken Grotesk (--font-hanken)
Fonts: Schibsted Grotesk (--font-schibsted)
Fonts: Lexend (--font-lexend), Atkinson Hyperlegible Next (--font-atkinson)
Fonts: Barlow (--font-barlow), Barlow Semi Condensed (--font-barlow-semi)
--cv-space-1--cv-space-2--cv-space-3--cv-space-4--cv-space-5--cv-space-6--cv-space-7--cv-space-8--cv-space-9--cv-space-10--cv-space-11--cv-space-12Durations and easings per brand. Under prefers-reduced-motion every duration collapses to 0.01ms.
--cv-duration-instant--cv-duration-fast--cv-duration-base--cv-duration-slow--cv-duration-cinematic--cv-ease-standard--cv-ease-entrance--cv-ease-exit--cv-ease-emphasizedSection surface='inverse' | 'brand' remaps every color token inside. edge='top' draws Riverton's river curve or Franklin's arc; Fairview and Fairfield keep straight edges.
surface="sunken"
surface="brand" edge="top" · A link adapts
surface="inverse" edge="top" · A link adapts
Buttons, links, badges, typography and layout. Server components with stable data-cv hooks for site-level styling.
Native <button>; LinkButton uses next/link. Variants: primary, secondary, accent, tertiary, danger. Sizes sm, md, lg. Min height follows --cv-control-height.
inline (underlined, for running text), standalone (with arrow), subtle; external links announce “opens in a new tab”.
Read the residential permit checklist before you apply, or compare with a regional guide (opens in a new tab).
Badges carry meaning in text, never color alone. Icons are decorative unless given a label; stroke width follows --cv-icon-stroke.
Heading separates the outline level from the visual size. Prose styles CMS rich text.
College of Engineering
Fairview engineers are testing a sodium-ion cell that keeps 90 percent of its capacity after 4,000 charges.
The work, funded by a three-year state grant, involves undergraduate researchers in every phase, from materials synthesis to field testing on the town’s bus fleet.
Students do the real work here, not just the dishes.
Card composes CardMedia, CardBody, CardTitle (href makes the whole card one link), CardMeta and CardFooter. Grid is intrinsic: columns fit to a minimum width, capped by `columns`.
Riverton Public Library
Sunken tone
UniversalSearch is an ARIA 1.2 combobox with grouped suggestions (tasks, answers, results), recent queries and popular tasks. On phones it opens as a full-screen dialog.
Debounced 150ms fetch of GET {suggestUrl}?q=. Arrow keys move through options; Enter opens one or searches; Esc closes, then clears. Analytics via onEvent and a civicos:search window event.
onEvent log
Try “trash”, “parking”, “nursing” or “bus”.
Slots for a direct answer, suggested tasks, URL-driven facets, highlighted matches and pagination.
23 results for “trash”
Your collection day
Thursday
Recycling this week: yes. Next holiday shift: Thanksgiving week moves to Friday.
Carts go out by 6 a.m. on your trash day. Recycling is collected every other week.
Schedule up to four bulky items a year at no charge. Mattresses must be wrapped.
Residents on Eastside routes will receive new 96-gallon carts in October.
Sep 18, 2026
0 results for “dog lisence”
Did you mean dog license?
People often look for
Text, image and video heroes. Text never sits on a busy photo: overlay layouts use a solid panel. The title defaults to h1; demos here use lower levels.
Text-led, with an optional aside. Used for interior pages and search-first homepages.
Water and sewer
Full-bleed photo (focal point → object-position), solid panel in the brand's inverse surface, masked reveal on load.
Riverfront
Terminal B
Muted, looping, inline. Visible pause button (WCAG 2.2.2). Reduced motion shows the poster only; Save-Data uses preload=none and waits for Play.
Severity is shown with an icon and a visible label as well as color. Emergencies can replace the homepage hero.
Dismissible; the dismissal is remembered per id in localStorage.
info, advisory, warning, emergency.
Stay indoors with windows closed until 4:00 p.m.
Replaces the homepage hero while an emergency is active.
Roads are icy across the county. Buses will not run. Meals for students are available at Franklin Central High from 10 a.m. to noon.
Updated
Polls an alerts URL (default every 20s; 10s here) with If-None-Match; announces new alerts politely (assertively for emergencies). This demo feed adds and removes an info alert every minute.
Expect detours through Saturday. Bus routes 3 and 7 use Mill Street.
Updated
Five card types on one Card base. A card with one destination is a single link (stretched title link); cards with several links keep each link separate.
Task-first: what you can do, how long it takes, where to start. Sub-tasks turn off the stretched link.
Large tap targets for the top tasks. tile for grids, row for lists and phones.
Programs, places, stories. Vertical or horizontal; image focal point is respected at every crop.
Bachelor of Science
Things to do
Jefferson Middle
Library
Date block, time range, place, format and category. Dates format in the site's time zone so server and client match.
feature, default and compact (text-only lists).
Streets
lucide-react icons inherit currentColor; brands set the stroke weight.
Editorial building blocks: figures, quotes, timelines and progressive disclosure.
Counts up once when scrolled into view; never under reduced motion. Real values are always in the DOM, paired with labels in a <dl>.
Source: Fairview Office of Institutional Research, fall 2026 (fictional).
feature, pull and testimonial variants as figure + blockquote + figcaption.
I came for the river research station. I stayed because a professor asked me to help write the grant.
Maya TorresClass of 2026, Environmental ScienceCrews fixed the pothole on my street two days after I reported it, and I got a photo of the repair.
Undergraduates run our battery test bench. They present at the regional conference every spring.
Dr. Owen HaleProfessor of ChemistryHistory or project milestones; status adds Completed / In progress / Upcoming as text.
Spring 2025Completed
Fall 2025Completed
Summer 2026In progress
Spring 2027Upcoming
react-aria Disclosure: buttons inside headings, aria-expanded, panels hidden until expanded. Optional “Expand all”.
Bills are due on the 20th of each month. A reminder goes out five days before.
react-aria Tabs: arrow keys move between tabs. underline, pill and segmented variants.
A completed application, an official high school transcript and one recommendation. Test scores are optional.
32 departures in the next six hours.
Whole-grain waffles, yogurt cups, fresh fruit.
Filterable lists, people, contact details, maps, tables and calendars. Filtering runs over pre-rendered server items.
Search + facets (OR within, AND across, with live counts) + a polite, debounced results count + list/grid toggle. Items are server-rendered nodes.
Health Sciences
Engineering
Natural Sciences
Business
Education
Health Sciences
card, row and full variants; initials when there’s no photo. tel: and mailto: links.
Professor of Chemistry
College of Natural Sciences
Director of Transportation
Franklin County Public Schools
Phone, email, address (no state or ZIP for fictional places) and hours, with a note slot.
| Mon–Thu | 8 a.m. – 5 p.m. |
|---|---|
| Fri | 8 a.m. – noon |
| Daily | 5 a.m. – 11 p.m. |
|---|
Takes the map as a slot (the MapLibre engine lives in @civicos/geo). Map/list toggle, “skip map” link, and the list as the accessible alternative. split layout on wide screens.
Caption, sortable headers with aria-sort and an announced sort, tabular numerals right-aligned, stacked rows in narrow containers.
| Public Safety | $48,200,000 | +3.1% | 312 |
|---|---|---|---|
| Public Works | $31,750,000 | +5.4% | 188 |
| Parks and Recreation | $12,400,000 | −1.2% | 96 |
| Library | $6,900,000 | +0.8% | 54 |
| Development Services | $5,300,000 | +2.0% | 41 |
Figures are fictional and for demonstration only.
Month grid with arrow keys, Home/End and Page Up/Down; day buttons announce the date and event count. List view groups by day. “Add to calendar” per event.
| Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
|---|---|---|---|---|---|---|
8:00 AM – 1:00 PM
CommunityRiverfront Park
4:00 – 5:30 PM
LibraryCentral Library
Type, size, date and an accessibility note for every file; topic and type facets derived from the data; sortable.
Permits
What to include with a deck, fence or addition application.
react-aria fields with visible labels, hints and errors wired through aria-describedby. Errors appear above the input; optional fields are marked, required ones aren’t starred.
TextField, TextArea, Select, RadioGroup, CheckboxGroup, Checkbox, Switch, DatePicker, DateRangePicker, FileUpload. DatePicker accepts min/max as YYYY-MM-DD.
Upload documents (optional)
Proof of address, such as a utility bill.
Accepted: PDF, JPEG, PNG, up to 5 MB each
Fieldset groups related inputs under a legend. Field is a label/hint/error shell for native or custom controls.
Submit empty: focus moves to the summary; each link focuses its field. Errors also sit next to each field.
“Step 2 of 4”, focus moves to each step’s heading, Back / Continue in a fixed place, a review step with Change links. State lives in the consumer, so nothing is asked twice.
Status always pairs a shape and a word with color. Toasts confirm; they never carry errors that block a task.
General and flight statuses. animate plays a flip on mount (re-key on change); pulse marks live states.
Statuses flip as they change (simulated every 3.5s).
| Flight | To | Time | Gate | Status |
|---|---|---|---|---|
| FR 218 | Chicago | 4:35 PM | B7 | On time |
| NL 902 | Denver | 4:50 PM | A3 | On time |
| FR 1144 | Atlanta | 5:10 PM | B2 | DelayedNow 5:25 PM |
| CA 77 | Boston | 3:55 PM | A9 | On time |
Received → Assigned → In progress → Resolved, with aria-current=“step” and spoken state for each step.
Inline messages. Pass role=“status” or “alert” when one appears in response to an action.
A polite live region. Auto-dismiss pauses while hovered or focused; duration: null keeps a toast until closed.
