The Board
A billboard, one accent, and numbers set in mono. Everything below is read from the same files the site is built from, so this page cannot drift from the product it describes.
The mark
A billboard seen head on: an accent rail above, the board below, and a gap between them. It is the whole product in two rectangles, which is what lets it survive at sixteen pixels where a wordmark cannot.
Proportions
Drawn on a 32 unit square with the artwork inset to 24 wide and 28 tall. The rail is a quarter of the height, the board is three fifths, and the gap between them is the rest. The gap is the part that does the work: closed up, the mark reads as one slab and stops being a billboard.
The two versions
One mark, two boards. The rail never changes: the accent is the accent on any ground. The board block takes the colour type would take on the same surface, which means it is dark on paper, light on a dark page, and light on a reversed band even in the light theme.
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <rect x="4" y="2" width="24" height="7" fill="#FF3B00"/> <rect x="4" y="13" width="24" height="17" fill="#0B0B0B"/> </svg>
The wordmark
THE BOARD, set in Space Grotesk Bold, uppercase, tracked at −0.03em, with the mark to its left and a nine pixel gap between them. Never set in mono: mono on this site means a thing is a number. Never lock the mark above or below the words, and never set the words without the mark at small sizes.
Colour
Seven roles, two sets of values. Dark is not an inversion of light: it is the same seven roles filled again, so ink is still the colour type is set in and paper is still the page, and every rule written against them holds in both.
Ground
The page and the surfaces a shade off it. A card is not a colour, it is a step.
| Token | Light | Dark | Role |
|---|---|---|---|
| --paper | #F6F6F2 | #131312 | The page itself. |
| --card | #FFFFFF | #1B1B19 | A listing, a panel, a modal: the surface content sits on. |
| --tint | #FBFBF8 | #232320 | A step off the page. A selected option, a field prefix. |
| --hover | #F2F2EC | #262622 | A row under the pointer. |
| --field | #F0F0EA | #232320 | The inside of an input. |
Type
Three weights of the same ink. Nothing on this site is grey for decoration; each step means one rank less important.
| Token | Light | Dark | Role |
|---|---|---|---|
| --ink | #0B0B0B | #F4F4EE | The colour type is set in. It inverts in dark, which is what keeps every rule written against it true. |
| --ink2 | #55554E | #B3B3AA | Secondary copy. A description, a note under a figure. |
| --ink3 | #93938B | #83837B | Micro-labels and anything the reader is not meant to stop on. |
Line
Structure is a hairline. State is a border. They are different tokens because in dark they stop being the same colour.
| Token | Light | Dark | Role |
|---|---|---|---|
| --hair | #E2E2DA | #2C2C28 | Structure at rest: a rule between rows, the edge of a quiet panel. |
| --edge | #C9C9C0 | #45453E | The edge of an interactive control. Visible enough to be a field. |
| --rule | #0B0B0B | #3B3B36 | A hard border: a card, a button, a panel. |
| --rule-on | #0B0B0B | #6E6E65 | The same border under state. Hover, selected, shielded. |
| --seam | transparent | #2C2C28 | Where a band meets the page. Transparent in light, a hairline in dark. |
Accent
The only chromatic colour in the interface, and it is never decoration. It means damage, a live figure, or the one action a screen is for. Every listing brings its own logo and its own colour, and a second interface accent competes with the product's actual content. It lifts a shade in dark, where the light-theme value loses its edge.
| Token | Light | Dark | Role |
|---|---|---|---|
| --accent | #FF3B00 | #FF5A2B | Damage, live counters, and the primary action. One per screen. |
Reversed
Surfaces that are the inverse of the page rather than a shade of it: the ticker, the live totals, a modal header, the operator bar. They do NOT invert in dark. A band painted in ink would become a white slab across a near-black page, which is the loudest thing a dark theme can do.
| Token | Light | Dark | Role |
|---|---|---|---|
| --band | #0B0B0B | #000000 | The reversed surface. |
| --band-ink | #F6F6F2 | #F4F4EE | Type and marks on it. |
The rest
Two tokens that exist for one job each.
| Token | Light | Dark | Role |
|---|---|---|---|
| --shadowc | #0B0B0B | #000000 | The offset shadow. The one colour that cannot follow ink, or every card grows a white slab behind it. |
| --err | #FFF3F0 | #2C1712 | The ground under a refusal. Never a border and never type. |
States are told apart by form, not by hue
There is one chromatic colour, so a second state cannot be given a second colour. It is given a different treatment instead, and the treatments are fixed.
| State | Treatment |
|---|---|
| Damage | Accent fill, white type |
| Protection | Ink fill, paper type |
| Backers | Ink outline on the card |
| War chest | Hairline outline, muted |
| Structure | Hairline |
Typography
Two faces, each with one job. Nothing is set in a third.
Space Grotesk
Everything a person reads as words: headings, copy, buttons, labels, names. Bold for headings and controls, regular for prose.
JetBrains Mono
Every numeral on the site, without exception: prices, ranks, counts, timers. Tabular figures, so a column holds its width while the numbers in it move. Mono is the signal that a thing is a number, which is why a name is never set in it.
Micro-labels
The small uppercase labels above figures are mono, 10px, tracked at 0.16em, in the faintest ink. They name a thing; they are never a sentence.
Impressions · reign · next throne
One number format
Exact while it fits in five digits, abbreviated after. Nothing anywhere shows more than five numeric digits, which is what keeps a cell the same width whether it holds a day of traffic or a year of it.
The exception is a receipt. The amount on a charge button, the total in a modal and every line of the ledger are written in full, because nobody should have to accept “$1.3M” as the sum they are about to be charged.
Form
Neutral minimalism with brutalist accents: generous whitespace and refined type, cut with hard borders and solid shadows.
- Zero border radius, everywhere. There is no rounded corner on this site and there is no exception to add one for.
- Borders are 2 to 3px and they are ink. A hairline is structure at rest; a hard border is a thing you can act on.
- Shadows are solid and offset, never blurred. Six pixels down and right, in black, in both themes. A blurred shadow is a different design system.
- Buttons are never black-filled. The shadow is black, and a black button becomes indistinguishable from its own shadow.
- One accent action per screen. Two solid accent buttons in one dialog compete for the same click.
Voice
Plain, specific and slightly dry. The mechanics are dramatic enough on their own, and a page that sounds excited about itself reads as vapour.
- No exclamation marks. None, anywhere a person reads.
- No em dashes. They read as a machine-written tell now. Use a colon, a comma, a full stop or brackets.
- Say each thing once, where it acts. A fact repeated in two places reads as filler and the second telling is the one nobody finishes.
- Sell the outcome, then the mechanism. Nobody is shopping for a ranking mechanic. They are shopping for eyes, clicks and traffic.
- Numbers mean something or they are not printed. A figure that reports an absence is worse than an empty space.
Decide what the top is worth to you. Then take it.
The listing still shows. It just stops sending traffic.
Unleash your brand’s potential with revolutionary attention auctions!
Join thousands of happy advertisers today.
Misuse
- Do not rotate, skew or outline the mark.
- Do not recolour the rail. The accent is the one fixed value in the mark.
- Do not close the gap between the rail and the board.
- Do not put the mark on a busy photograph, or on any ground that is neither clearly light nor clearly dark.
- Do not add a second accent colour to the interface, however good the reason.
- Do not round a corner, blur a shadow, or fill a button with black.
- Do not set a name, a label or a sentence in mono, and do not set a number in anything else.