Tideline

Design System

A civic interface for public data: calm, legible, honest. Three layers — primitives (raw ramps), semantic roles (what a colour means), and components (built only from roles) — so light and dark themes, or a future brand, swap in one file: css/tokens.css.

Principles

1 · Source on every number

Every card ends with a source chip naming the publisher, licence and fetch time. If a source fails, show “—” and say so. Never estimate.

2 · Place first

People decide about places. One address search unlocks every topic; everything else is one tap from the brief.

3 · Plain language

“Straight-line distance”, not “Euclidean”. Labels say what a number is and how it was measured.

4 · Calm by default

Navy + neutrals carry the UI. Gold is for the single most important action. Status colours appear only for status.

5 · Accessible always

AA contrast for text, 44px targets, visible gold focus ring, never colour alone, reduced-motion honoured, table view for every chart.

6 · AI shows its work

AI answers are grounded only on data on screen, cite the fields used, and expose the exact JSON sent.

Colour · primitives

Ocean (brand), Cedar (nature / OK), Gold (accent / focus), Coral (danger), Ink (neutrals).

Colour · semantic roles

Components use only these. Values change with theme.

Typography

System UI stack — fast, native, offline-safe. Tabular numerals for all figures.

Space, radius, elevation

radius sm 6 · md 10 · lg 16 · pill

shadow sm · md · lg — cards use sm; overlays lg

Components

Buttons

Search

Chips, badges, notes

Chip✓ Low risk! Moderate! HighCSV

ⓘ Informational note — context the reader should know.

! Warning — a source didn’t respond; affected figures show “—”.

! Error — plainly stated, with what to do next.

Card + stats + source

At a glance

Fetched just now

K–12 schools within 3 km

2.4 km

to nearest hospital

—

Source unavailable

Source: Publisher dataset · OGL-BC · fetched 10:42

Illustrative values for the component specimen only.

Segmented control & inputs

Group by

Data visualisation

Built on the validated reference palette. Single series use slot 1 and no legend; bars are anchored at the baseline with 4px rounded data ends and 2px gaps; grid is recessive; every chart has hover tooltips and a table view. Never dual axes; never a rainbow; status colours never reused as series.

Layout & navigation

Desktop (>860px)

88px navy rail on the left; content max 1200px; cards in an auto-fill grid (min 300px).

Mobile (≤860px)

Bottom tab bar (Place · Map · Topics · Data · More), safe-area aware; map panel becomes a bottom sheet.

Voice

Do “2.4 km to nearest hospital (straight line)”.
Don’t “Great healthcare access!”