The brand book
One system for the site, the account and the app. Every value on this page is the token itself, read live from the stylesheet the whole site is drawn with.
The play mark and the name
Three drawings and no others: the lockup, the wordmark and the mark. All three are cut from one artwork, in the app's repository, so the app, the site, the manual and the disk image show the same logo to the pixel.
Use it like this
- In the ink of what it sits on: the first word in the ink, the second in the second voice. Never pure white.
- Clear space all round of at least half the mark’s own height.
- The wordmark no smaller than 18px tall; the mark alone no smaller than 16px.
- On the ground, a surface, or a photograph dark enough to hold the ink.
Never like this
- Redrawn, re-spaced, outlined, stretched or rotated.
- In GO green or Clear red: those two colours are signals, not decoration.
- Inside a rounded badge or a box: the triangle keeps its own shape.
- With a gradient, a glow or a shadow behind it.
Black, steel, and three signals
The app's own palette, to the hex. One ground, two surfaces, three inks and two lines; and three colours that carry meaning, so they never decorate: GO is green, Clear is red, and held is a cold blue.
What each is for
A component names the role, never the value. The figure on the right is its contrast on the ground; anything read has to reach 4.5:1.
- foregroundWhat the page is about.
- mistA paragraph under a heading; the second voice.
- hazeLabels, dates, the small print.
- ghostNever text: column heads, bullets.
- goGO, and only GO. Success.
- go-litWords on a green-lit ground.
- alarmClear, LIVE, errors, what cannot be undone.
- chillHeld, not stopped: a frozen licence.
background
The ground. The window’s floor.
card
A surface: one step of tone up.
secondary
Raised: a dialog, a menu, the chosen one.
Two faces, one scale
JetBrains Mono is the console's voice: headings, cue numbers, prices and keys. Work Sans is everything somebody reads. Every size grows with the window between a phone and a laptop rather than jumping at a breakpoint.
Aa
JetBrains Mono · 400 to 600
Headings, numbers, keys. Tight tracking at size.
Aa
Work Sans · 400 to 600
Paragraphs, buttons, fields. 1.6 leading to read.
display
The home page's headline, and only that.
Run the show
title
A page's title; a section of the home page.
One file is the whole show
heading
A heading inside something.
Backdrops on their own keys
lead
The sentence under a title.
Sound, video, projection and a live camera in one running order.
body
Running text.
Hand it to the deputy on a stick and it opens exactly as it left yours.
small
Notes, plan lines, the footer.
One Mac at a time, and you move it yourself, at once.
ui
The console: rows, buttons, fields.
Opening music · 0:00 / 3:34
note
The line under a row.
Checked at 11:17 PM
micro
A figure in a badge; a key.
Space · B · Delete
label
The console's uppercase label. Never on a page people read.
Layers
Space in steps of four
One base of four pixels, in whole steps. The gap between two sections is always clearly larger than any gap inside one; that is what makes a page read as sections rather than as a list.
- 4
- 8
- 12
- 16
- 24
- 32
- 40
- 48
- 64
- 80
- 112
- 160
Measures
stage
The home page's running order.
shell
The frame: header, footer, every page.
column
A wide block: a table, a row of facts.
text
A reading measure, about seventy characters.
dialog
A dialog.
Corners, and what floats
One family of corners, larger as the thing is larger. Surfaces at rest are told apart by tone, never by a line and a shadow; a shadow means the thing is floating over the page.
xs
The app's small blocks.
sm
Key caps, swatches.
md
Buttons, inputs, rows.
lg
Pictures, small cards.
xl
Cards, menus.
2xl
Dialogs.
edge
The hairline a black screenshot needs on a black page.
key
A key cap: lit on top, a lip below.
tip
A tooltip, close to what it is about.
float
A menu, a dialog, the transport: what floats.
go
The light GO throws.
armed
A key armed to fire.
How things move
Only transform and opacity, so nothing moves the layout. Four curves and five durations, named by what moves; every one of them gives way to a plain fade for somebody who has asked their computer for less motion.
out
Anything arriving or answering: quick, then settling.
in
Anything leaving. Faster than it came.
in-out
Something travelling across the page.
drawer
A sheet from the edge it lives on.
pressA press: felt more than seen.
quickA control answering the pointer.
baseA surface arriving: a menu, a dialog.
slowA section coming up out of the dark.
sceneThe headline's lines, once.
The moves the site makes
- The home headline rises out of its own line, one line after the other.
- Each section arrives in parts, heading then words then picture, 70ms apart, rising 24px.
- The console grows into the page as it is scrolled to; pictures settle to their own size.
- The rail’s cursor slides to the live cue, the way the app’s selection moves.
- A press scales a control to 97%. GO throws a ring of its own green.
- Menus grow from the button that opened them; dialogs rise a little from below; sheets come from their edge.
- Changing page cross-fades, and the header holds still while the name folds into the mark.
- Bounce, elastic, spin, parallax on text, anything that follows the pointer.
The parts everything is built from
The same buttons, surfaces and keys on the home page, in the account and in the back office, so somebody crossing from one to the other never arrives at what looks like another product.
Buttons
What varies is what a button is, never how it is drawn. One solid per view.
The three keys
Clear, Blackout and GO, as the app draws them. Press them: they work on this page too.
Surfaces
surface
A card. One step of tone, no line, no shadow.
surface-lift
A card that is a link answers with the next tone.
plan-lit
Chosen: a flat field of GO with GO’s line.
What floats
Sign in
An account is free and signs in one Mac at a time.
Continue with Appledialog-surface, over bg-veil
toasts on menu-surface · tip-surface
Waiting
The app opens on its mark lit by moving lights; the site waits in the same light, and never in a borrowed spinner.
Reading your account
How it talks
Like somebody who has run the booth: plain, concrete, and from the room. Theatre words, not software words.
- Say what happens in the room: “Hand it to the deputy on a stick.”
- Headlines are claims of two lines or fewer: “No projector hangs straight.”
- Buttons are named for what they do: Download for Mac, Apply for a free licence.
- Errors say what happened and what to do next, in one breath.
- British spelling: licence, colour, programme.
- Software words: seamless, powerful, intuitive, leverage, solution.
- Promises the app does not keep, or proof it does not have.
- Small tracked capitals above a heading on a page people read.
- Exclamation marks, emoji, and “Oops”.