Design system

Brand

A pub table after closing time, abstracted until nothing is left but type on colour: a near-black room with a cast of green baize, flat bone tiles carrying big dark numerals, and one stick of blue cue chalk. Type, colour and haptics are the whole aesthetic — no wood grain, no felt texture, no 3D dice, no themes. Everything here is generated from, or checked against, one file: brand/brand.json.

The mark

The Clack mark: tiles 4 and 6 standing, 5 folded down between them

Three tiles of the box with the middle one folded down — 4, 5, 6, the 5 just covered. A crop of a game in progress, not a drawing of one.

Nothing in it is the mark’s own except the digits. The tiles are the board’s: the same proportions, corners, gap and fold, and the same faces and inks as an up tile and a folded one. So the mark is wider than it is tall, and it is literally a state the game can be in.

It is never redrawn by hand. Every rendering — this page’s, the app icon’s, the launch screen’s and the app’s own view — is generated from brand.json.

At every size

From 40 px tall the mark carries its numerals; below that it is the bare silhouette, its gaps opened so the three slabs stay three at 16 px. The threshold is derived, not chosen: at 40 px the folded tile’s numeral reaches the smallest size the board ever draws one.

120 px
60 px
40 px
32 px
16 px
The one-colour mark on a light ground

On light surfaces that are not ours — a press page, a printed review — use the one-colour mark, numerals knocked out. Bone on white is barely there, so the coloured mark never goes on light.

Wordmark and lockup

CLACK is the wordmark. Clack is the name. The first is artwork, drawn to a fixed specification and used wherever the product identifies itself — the app’s top bar, this site’s hero, the footer. The second is a word, used when the name is being said rather than shown, and set like the text around it.

The lockup: always the silhouette, always side by side

…a game called Clack.

The name, in running text

Upper

Case

wordmark only

600

Weight

Instrument Sans

0.24em

Tracking

holds at any size

0.55em gap

Lockup

mark 1.45× cap height (720/1000 em)

  • Never set the wordmark in title case. CLACK is the wordmark; Clack is the name.
  • Never set the name in caps to stand in for the wordmark — caps without the tracking is not the wordmark, it is shouting.
  • Never letterspace the name in running text.
  • The wordmark keeps its tracking at every size. It is specified in ems for that reason.
  • Cancel the trailing letterspace when centring the wordmark, or it sits off-centre by half a space.
  • The lockup is horizontal only. Never stack the mark above the wordmark.
  • Never re-colour the wordmark. It is bone, or on chalk it is onChalk.
  • Never place the wordmark on the mark, or inside it.

Tiles

A tile is a flat slab and a numeral, nothing else. No state relies on hue alone, so the box reads in greyscale, and to a colour-blind player, as it does in colour. Every numeral, in every state, is held to 4.5:1 on its face.

7694
Up
Full height, bone face, strong numeral. boneInk on bone, 14.3:1
In hand
Lifted clear of the row on chalk, leaving a chalk footprint where it stood. onChalk on chalk, 6.9:1
Not usable
Still up and still counted; only the numeral steps back. boneInkMuted on bone, 4.7:1
Folded
40% of the height, hinged at the foot, numeral at half size. foldedInk on folded, 4.6:1

0.40 : 1

Aspect

width to height, one row

16%

Corner

of the width

12%

Gap

of the width

40%

Folded

of the height

12%

Lift in hand

of the height

3.5%

Footprint

of the height, never under 2 pt

1.5× width

Numeral

capped at 60% of the height

0.5×

Folded numeral

never under 12 pt

Nine tiles always stand in one row. Twelve take one row only where each tile would be at least 34 pt wide; on a portrait phone they stand in two rows of six, squatter (0.66 : 1), so the box still fits one screen.

Dice

Flat faces, never 3D: a bone square with boneInk pips on a three-by-three grid, the same material as the tiles, so the dice and the box read as one object. Corners are 20% of the face, pips 8.5% of it in radius.

A roll that cannot be covered drops the dice to 45% opacity — always beside the words “No cover”, and a haptic, never on its own.

Colour

Near-black with a cast of baize, bone for everything that is played with, and exactly one accent — chalk, spent only on what you are about to play. The app ships locked to the dark appearance, so these are the only values that ever render.

canvas

#0b110e

The page and app background. Near-black with a cast of green baize: the room after the lights go down.

surface

#131c171.1:1 on canvas

One shade up from the canvas, for sheets, panels and the coach’s card.

baize

#15291f1.2:1 on canvas

The bed of the box, where the tiles stand and the dice land. The only large field of colour in the app, and it is dark.

line

#26352d1.5:1 on canvas

Hairlines and dividers. Decoration, deliberately below AA.

bone

#eae2d014.8:1 on canvas

The face of a tile that is up, and of a die. Also the mark and the wordmark. Warm ivory, never white — white on near-black glares, and bone is what the tiles were made of.

boneInk

#16140f14.3:1 on bone

Numerals on an up tile, and the pips on a die. 14.3:1 on bone.

boneInkMuted

#6663594.7:1 on bone

The numeral on an up tile this roll cannot use. The face stays bone because the tile is still up and still counts; only the number steps back. 4.7:1 on bone — held to body-text AA like every tile numeral, because a tile the roll cannot use is still a tile the player must read to plan the next one — and 3.1:1 below boneInk, so the step back is a real step and not a tint.

folded

#7b82744.8:1 on canvas

The face of a folded tile: bone mixed 48% into baize, as if lying in the box’s green shadow. The darkest such mix that keeps its numeral at 4.5:1; it still sits 3.1:1 below bone and 3.9:1 above the baize, so the fold reads by tone and the slab’s shape stays visible.

foldedInk

#16140f4.6:1 on folded

The numeral on a folded tile. The same ink as an up tile — the face darkened, so the number dims with it — at 4.6:1, AA for body text: a folded numeral is half size, and the review screen and low-vision players read the board after the game.

ink

#f1eee616.5:1 on canvas

Primary text, and the tint of every system control (see controls).

inkSoft

#8f9a926.5:1 on canvas

Secondary text. 6.5:1 on the canvas and 5.3:1 on the baize, so it needs no web override.

chalk

#6aa9d97.5:1 on canvas

The single accent: the blue of cue chalk, the one bright thing on a pub table, and only ever on the tip about to play. Spent only on live focus — the tiles in your hand this turn, the button that plays them, whose turn it is in pass-and-play — and on a switch that is on, the one place iOS insists on a colour. Never decoration, never a state that has already happened.

onChalk

#0d1b286.9:1 on chalk

Numerals and labels on a filled chalk surface. Chalk is a light accent, so white fails at 2.5:1 — this reads 6.9:1.

flag

#e26b5c5.9:1 on canvas

No cover: the roll cannot be played and the game is over. Always paired with words (‘No cover for 11’), and with motion or a haptic — never colour alone.

The site uses every colour exactly as the app does: brand.json records no web overrides.

Typography

Instrument Sans throughout, one variable file selected by its weight and width axes. The width axis is why: at wdth 75 a numeral fills a tall, narrow tile the way a painted one does, while running text stays at full width. Its tabular figures cover + and %, so a live “9.76%” holds still while it changes.

0123456789 Tile numerals · wght 700, wdth 75, tabular

Old game. Exact odds.

display · 40/600 · -0.02em

Old game. Exact odds.

title · 24/600 · -0.01em

24.15% to shut

figure · 22/600

Old game. Exact odds.

bodyStrong · 17/600

Old game. Exact odds.

body · 16/400

Old game. Exact odds.

caption · 13/400

CLACK

wordmark · 15/600 · 0.24em

Haptics

A third of the aesthetic, so it is specified in brand.json and checked like the colours. The app is named after a sound it cannot make — a tile folding down onto its stop — so the clack is authored: the tile’s edge catching, then the face landing a moment later, heavier and duller.

Pick
A tile taken into the hand: the lightest touch — a choice, not yet a move.
Clack
The tiles of a cover folding down. Once per cover.
Roll
The dice landing — soft and dull, so it never blurs with a clack.
Refuse
A tile the roll cannot use was tapped. The words say why; this says no.
No cover
No cover: the game is over. Always with the words.
Shut
The box is shut — after the last clack, never instead of it.

The clack is spent only on the fold. Several tiles folding together land as one clack — a cover is one move, never a rattle.

Rules

  • Chalk marks what you are about to play: the tiles in your hand, the button that plays them, and whose turn it is. Outside play, the only chalk is a switch that is on. If it is not live focus, it is not chalk — never decoration, never a backdrop, never a state that has already happened.
  • System chrome takes the neutral tint (ink). Nothing in Clack is ever iOS blue.
  • The only filled button is the one that plays the hand: chalk, labelled onChalk. Never white or ink on chalk.
  • Never state anything with colour alone: a folded tile is shorter as well as darker, a tile in hand is lifted and leaves a footprint, a tile the roll cannot use steps its numeral back 3:1, and no cover is said in words and felt in the hand.
  • Players are named, never coloured. Pass-and-play has no player colours and no avatars; the active player’s name is the only part of the turn display that may take chalk, as live focus, and every score is set in ink in the figure style.
  • Every number a player sees comes from the engine at runtime. Copy never hard-codes a probability, a score or a count.
  • Type, colour and haptics are the whole aesthetic. No wood grain, no felt texture, no 3D dice, no characters, no unlockable themes.
  • Tile numerals are Instrument Sans at wdth 75, wght 700, tabular — never the system face, never a fallback — and every one is 4.5:1 on its face, folded or not.
  • On a portrait phone the twelve-tile box is two rows of six. One row only where a tile is at least 34pt wide.
  • The clack is spent only on the fold, once per cover.
  • The mark is never redrawn by hand. Generate it from this file. At 40pt and above it carries its numerals; below, it is the silhouette.
  • The mark keeps clear space of one tile’s width on every side.
  • A folded tile’s numeral stays readable: the review screen and low-vision players read the board after the game.