Board · design system

One typeface,
four colours,
no round corners

Everything below is generated from app/globals.css and components/ui.tsx. If a page needs a shape that is not here, the shape gets added here first.

01

Colour

Four hues and a greyscale. The accent is the single loud colour and appears at most once per screen. Urgent is semantic and never decorative — if it is red, someone has to move.

Brand
#1B36C4
Accent
#F5FF57
Urgent
#E12100
Ink
#101010
Paper
#E7E4DA
Panel
#FFFFFF
Panel 2
#F3F4F8
Changed
#FCFCE6
Single theme. Darkness is a content state — an event that has finished, a steward’s header — never a user preference. There is no dark mode to build.
02

Type

Figtree, and only Figtree. The handoff design loads three other families and uses none of them; the single-face discipline is a large part of why it reads as signage rather than as software. Figures align with tabular-nums, not a second face.

5xl · 88 — the one-number answer
14:20
3xl · 44 — page titles
When it changes
2xl · 34 — the headline change
Feature stores is now in C1
lg · 20 — section heads
Next up
md · 17 — body emphasis
An organiser posts an update in under ten seconds.
base · 15 — body
Room moves, delays and notices. Nothing to install.
Label · 11 · 0.16em · uppercase

Used 30 times in the source design. Every eyebrow in the product is this and nothing else.

03

Icons

Lucide, at 2px stroke so icons sit in the same weight as every rule and border. Rationed hard: this is the whole allowlist, and no icon appears without a text label beside it. The arrow is type, not an icon — a Figtree → belongs to the display grammar in a way a drawn glyph does not.

confirm
close
back
expand
add
edit
remove
import
download
copy
email
print
urgent
audience
time
place
retry
private
This is type. It scales with the heading it sits beside and inherits its weight.
04

Structure

2px, always

Every divider, border and box is a 2px ink rule. Hairlines at 1px are permitted only inside dense tables.

Nothing is round

Border radius is forced to 0 globally. Blocks are blocks.

One hard shadow

A single 16px offset drop, tinted to the surface it falls from. No soft ambient shadows, no layered elevation scale.

05

Components

Actions
Badges
Query planningMoved from 14:00Fire alarmUrgentBarnCancelled
Rows
14:31Fire alarm test at 15:00
14:28Feature stores moved to C1
13:10Lunch extended to 14:00
Live indicator
Live · 14:32

The only animation in the system. It stops under prefers-reduced-motion.

06

What “now” means

The event type is chosen at setup and reshapes the board. This is the only real branch in the attendee UI.

07

Voice

Say the thing

“Barn stage closed”, not “Barn stage status update”. British spelling. No exclamation marks anywhere.

Never overstate reach

Numbers shown to an organiser must be verifiable. “168 inboxes” is a promise; “381 phones” was a guess, and it is why push was cut.