Design system demo

Live internal reference for the current civic design system. This route should expose the actual tokens, primitives, patterns, and workflow states that the app ships.

Primitive layer

18

Documented inventory

Pattern layer

19

Documented inventory

Shell layer

4

Public, tenant, platform, auth

Token groups

3

Reference, semantic, modes

Evidence routes

21

Route-level axe coverage

shadcn scope

Selective

Local interaction primitives

Color, type, and surface language

The design system is CSS-first. Tokens stay in variables, and the route renders them directly instead of copying screenshots into docs.

Page

Default page background

var(--ds-color-page)

Panel

Primary surface

var(--ds-color-panel)

Panel muted

Muted operational surface

var(--ds-color-panel-muted)

Panel accent

Accent surface for civic emphasis

var(--ds-color-panel-accent)

Panel success

Success state background

var(--ds-color-panel-success)

Panel danger

Danger state background

var(--ds-color-panel-danger)

Display

Pay bills, request permits, and find public records.

Used for primary page headings and hero statements.

Section title

Public records and civic workflows

Used by section headers across public and admin surfaces.

Body

The design system keeps sentence case, generous line height, and strong contrast as defaults instead of requiring route-level overrides.

Used for general explanatory copy and document descriptions.

Actions and statuses

Buttons, links, tags, and status labels should be enough for most route work without ad hoc variants.

Primary actionSecondary action
NeutralAccentCivicSuccessDanger
DraftIn ProgressSubmittedUnder ReviewAction NeededPaid

Links remain text-first. Example: Open the control plane.

Panels, callouts, and banners

Surface and callout tones provide state signaling without raw route-level color decisions.

Default surface

Muted surface

Accent surface

Success surface

Operational note

Preview and live surfaces can diverge in state, but the component and token contract should remain the same.

Accessibility posture

Public routes and staff routes both need visible focus, clear labels, and non-color-only status signaling.

Field primitives

The field primitives own label, hint, error, and grouped-control semantics. Route code should not rebuild these by hand.

There is a problem

Review the items below and try again.

Keep internal draft titles concise and unique.

This demonstrates the native select posture for bounded option sets.

Publish dateOptional
Homepage placementOptional
Supported audiencesOptional

Use for attachments that accompany an application or published packet.

Upload accessible documents where possible. Staff review should flag files that are required for service completion but are not screen-reader ready.

Validation and help text stay on the shared field contract.

Lists, workflow states, and civic transaction summaries

Patterns are the repo’s preferred route-building layer. The tabs below show the main categories in the current system.

Document list

  • April 2026 council agenda

    Budget amendment and procurement approvals.

    Council packet · PDF · 2.8 MB

    April 24, 2026
    Open

  • Planning commission minutes

    Planning commission minutes with vote summary and attachments.

    Minutes · PDF

    April 21, 2026
    Open

Structured row list

  • CMS Studio

    Draft/live posture, preview route, and publishing checklist.
    System block
    Submitted

  • Document library

    Search, citations, and source adapter state.
    Shared platform service
    Under Review

Data table

ModuleSurfaceStatus
PermitsPublic + tenant adminIn Progress
Document libraryPublic + platformSubmitted
Shared billingTenant + platformUnder Review

What stays local and why

The system uses shadcn/Radix selectively. Interaction-heavy primitives stay local under `src/components/ui`, while civic semantics, evidence rules, and route patterns stay repo-owned.