Operations console

Surfaces and borders

Text, accent and outlines

Signals: preparation, timing and alerts

Each foreground is measured on its own tint. Red is reserved for cancelled items and destructive actions; amber explains problems such as missing schedules.

Typography

Inter for every working surface, with tabular numerals for dates and counts. Newsreader is used only for page titles, the Overview lede and large figures.

Spacing, radius and elevation

A 4px base in rem, so Meeting view (112.5%) scales everything. Three radii, clearly apart. Hierarchy comes from surface steps and 1px borders; shadows are minimal.

• --radius-sm4px · bars, badges, entries
• --radius-md6px · buttons, inputs
• --radius-lg10px · panels, menus, dialogs
• --shadow-1Panels, buttons
• --shadow-2Menus, popovers
• --shadow-3Dialogs, sheets

Variants

Sizes, keyboard hint, disabled and loading

Icon buttons and filter chips

Date fields

The line under each field echoes the date as the product writes it. “Last day live” is inclusive and explains the removal day (SCHEDULING.md); while a field has an error, that derived helper is withheld.

Checkbox, radio and switch

Preparation status (stored)

Neutral on purpose: hue on a row always means channel, so the glyph’s shape and the word carry the status. Dashed ring, ring, half ring, check, cross. These describe readiness, not publication.

Timing (derived from dates, relative to today)

Filled dot: live. Ring: starts later. Short bar: ended. Square: archived. Diamond: no dates.

Initiative state, kind and badges

One badge anatomy: 20px, 4px radius, sentence case and a 1px border mixed from the badge's own text colour. Draft uses the same dashed ring everywhere. Counts are the only pills.

Glyphs alone

Channel tag

Section header

Key/value facts strip

Equal columns of at least 10rem that wrap cleanly. Timezone appears only when an initiative's differs from the organization's (shown once, in the top bar). Secondary facts use the same component.

Summary strip

Planning counts, not KPIs. Each links to the list it counts, and every number comes from the same query as that list.

Tabs

Arrow keys move between tabs; only the selected tab is in the Tab order.

Segmented control

Two sizes only. Small (28px) sits beside chips and small buttons; medium (36px) sits beside text fields. The selected segment is raised on a recessed track in both themes.

Breadcrumbs and pagination

Create stepper

Kind → details → collateral → schedules → review. Completed steps recede with a check; the current step leads with an accent bar and a larger label. Phones keep the bars and read “Step 3 of 5 · Collateral”.

Menu and popover

Menus are for commands and settings: arrows, Home/End, type-ahead, Escape returns focus, and moving focus away closes them. Popovers are non-modal filter panels that also close when focus leaves. Destinations (organizations, More on phones) use a disclosure of links instead.

Try it

Type “flyer”, “Rosa” or “festival”.

States

Preparation mix

Drawn in one ink ramp (solid completed, half-tone in progress, outlined planned, dashed draft) so saturated colour always means a channel. The words carry the counts.

Avatars and people

Initials only; no photos. Decorative beside a visible name.

Inline alerts

Banner

Empty states

A quiet icon, a serif title, one sentence and the next step. An empty month still looks like a calendar, so it never reads as a failure.

Skeletons

Static placeholders for first load only, drawn at the real column widths and row heights with the real headers, so nothing jumps when data arrives. Nothing shimmers or animates on entry.

Toasts

Two regions exist before any toast: polite for confirmations, assertive for errors, so each message is announced once. Errors and toasts with an action (such as Undo) stay until dismissed; Alt+Shift+N moves focus to the newest toast. Keep the same undo in the page too.

Archive forecast

Explains automatic archiving before it happens, in one typeface and without a clock time (the rule is date-only). The diagram is proportional: the promotion as a neutral range bar, the archive tick, and event dates in the ink outline, with end labels on the top line.

Timeline bar encodings

Bounded range, one-day item, open-ended (flat edge + OPEN), started before the view (dashed edge + ‹), continues after the view, and event dates as an ink outline with a flag. Past days get a flat wash; nothing is hatched. Labels always state real dates, and each bar's accessible name contains its visible label followed by a full sentence.

Narrow screens and assistive technology get the agenda equivalent (TimelineAgendaItem): title, dates and a proportional mini-track with a today tick.

Calendar entries

Channel tint with a 3px channel edge, a two-line title, and “Channel · Initiative”. The channel never truncates; only the initiative does. The event-start marker uses the same ink outline and flag as event dates on the timeline.

Calendar day cells

Separate examples, each with its month. A cell shows the date (with the month on the 1st and after any gap), a visible launch count, at most two entries, then “+N more”. Today is the filled date chip and the word “Today”. Cells use static table semantics, with the full date and count as text for screen readers.

• Today, no launches

  Monday, September 28, 2026, today, no launches

  Sep 28Today
• First of the month, three launches, “+1 more”

  Thursday, October 1, 2026, 3 launches

  Oct 13 launches

  • Billboard — Route 9 northboundOutdoor · , Lantern Festival
  • Poster — Studio corridorOn-site signage · , Autumn Clay & Print Workshops

  +1 more
• One launch

  Saturday, October 10, 2026, 1 launch

  Oct 101 launch

  • Bathroom flyer — East entranceOn-site signage · , Lantern Festival
• Event layer on, no launches

  Thursday, November 5, 2026, no launches

  Nov 5

  Event starts · Lantern Festival

Responsive behaviour

• Desktop (≥1100px): 240px sidebar with the organization switcher, Create menu (C, which viewers can turn off in the account menu), primary navigation with counts, active initiatives, Settings, sync status and account menu. Opaque sticky top bar with breadcrumbs, search (⌘K), the timezone chip (the one place the timezone appears), Meeting view and theme.
• Tablet (768–1099px): 72px rail with icon plus visible label for each destination and a short sync word; org tile and square Create keep accessible names.
• Phone (<768px): opaque top app bar (organization with the timezone under it, sync status, search, Create) and a fixed bottom tab bar: Overview, Initiatives, Timeline, Calendar and More (Archive, Settings, display). Scroll padding keeps a focused control clear of both bars, and on short screens the bars stop sticking.

Sync status (role=status)

One persistent status per layout. Each state has its own shape: filled dot, open ring (turns only when motion is allowed), square, triangle. The phone top bar shows only the dot while synced and a short word otherwise; the tablet rail shows a short word.