CCAI · Calgary Council Stream & AI
An operations console for civic broadcast capture.
The current dashboard is a Tailwind starter dressed in indigo gradient. This system replaces it with a calm, paper-warm operations surface — closer to a broadcast desk than a marketing page. One reserved accent (ember) carries the signal when something is genuinely live; everything else stays out of the way of the data.
Data first, chrome second.
Numbers, timestamps, and statuses are the heroes. UI chrome is muted ink on paper so operators can scan a wall of recordings without fatigue.
Reserve the ember.
The ember accent only appears when something is recording, broadcasting, or about to. It is the visual contract that says "this is real and happening now."
Operational, not decorative.
No emoji, no gradients on chrome, no "fun" tints. Monoline icons and mono-space captions give the surface the feel of a control room.
Logomark
02 · Color
Paper, ink, and one ember.
A warm paper backdrop, charcoal ink for type and primary action, and a single saturated ember reserved for live / record states. Status colors are used sparingly and only in pills, never as fills behind text.
Surface & Ink
Ember — signal accent
Usage rule. Ember is reserved for: the LIVE pill, the recording dot in chrome, the "Force start recording" button, and the live-hero block. Do not use it for links, primary nav, or marketing emphasis.
Functional
03 · Typography
A display serif-grotesque, a clean UI sans, a tabular mono.
Three families. Bricolage Grotesque for display titles — carries civic, slightly editorial weight without being precious. Geist for all UI text — neutral, modern, generous x-height, not Inter. Geist Mono for captions, timestamps, IDs, and durations — anywhere numbers must line up.
04 · Spacing & radii
A 4-base scale and operational corners.
Spacing uses an explicit 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 scale. Radii sit slightly tighter than enterprise defaults — softer than enterprise, less marketing-bubble than the indigo template.
Spacing
Radii
05 · Elevation
Four levels. Mostly flat.
The system uses a 1px hairline as the default elevation; one soft drop at e-2 for hover and one floating shadow at e-3 reserved for menus and overlays.
07 · Components / Buttons
Five variants. Live is sacred.
Primary actions are ink-black, not indigo. Ember "live" buttons are only used for record/start-broadcast/force-start. Halt is outlined in red, never solid, to avoid confusion with the live button.
Variants
Sizes
States
Icon-only (always with aria-label)
08 · Components / Status pills
Six pills. One pulses.
All status pills are mono-uppercase with a leading dot. Only the LIVE pill pulses; everything else is static so it doesn't compete for attention.
System status
Recording status
Secondary tags (post-processing)
09 · Components / Stat tiles
Numbers that lead.
The display serif is used for big numbers — gives weight without screaming, and pairs naturally with the mono unit label.
10 · Components / Forms
Inputs, selects, toggles.
06 · Iconography
Monoline 24, 1.5 stroke. No emoji.
All icons are mono-stroke at 24px viewbox, 1.5 stroke-width, currentColor. Inline SVG <symbol> defs in base.html; reference via <svg class="ic"><use href="#i-NAME"/></svg>. Sizes inherit from the parent context (.btn .ic = 15px, .tag .ic = 11px, default .ic stroke-width = 1.5).
11 · Components / Recording rows
Dense by default.
A grid-based row layout for long lists of recordings or meetings. Status pill on the left, title + caption mid, mono duration + size right. Row dividers on var(--ink-200); hover surface is var(--ink-100).
12 · Components / Pipeline progress
A bar that maps to your steps.
Segmented bar where each segment maps to one transcription-pipeline step (segment, transcribe, diarize, refine, index). .seg.done is solid ink; .seg.active animates a streaming highlight. Labels mirror the segments below.
13 · Patterns / LIVE hero
The signature block.
When a BroadcastJob is in state live, the dashboard's hero becomes an ink-black telemetry slab with the ember pulse, an audio waveform, and live counters. This is the one moment in the entire system where the brand truly turns on. The page template also flips <body data-live="1"> so the sidebar brand-mark ember-pulse animates in lockstep (PR1 T105).
14 · Patterns / Dashboard composition
The system, composed.
A condensed preview of the home page rebuilt on the system — same data, same actions, different surface. The dashboard renders the §13 LIVE hero conditionally above the stat tiles and the two-column "Upcoming meetings" / "Active pipelines" grid.
Operations