Design system
Internal reference. Neutral paper, near-black ink, one clay accent, mono for data.
Wordmark & mark
The mark is a running track from above: two lanes banked 25°, each cut by a pair of parallel slanted breaks so the loop reads as motion rather than a closed ring. The wordmark's clay comma sits on the infield. Lanes take currentColor and reverse onto ink; the comma is the only accent. Below 24px the two lanes collapse, so the 16px favicon is a separate drawing — one fatter ring, no breaks.
on paper / on ink
Palette
paper #FAFAFA
page ground — a hair off white
paper-2 #EEEEEE
raised panels — table heads, bands
ink #171717
text, dark sections
line #E0E0E0
borders, gridlines
mid #5C5C5C
secondary text
accent #B0504B
clay — the comma, highlights
accent-deep #8F3C38
links, hover states
drop #157A43
price down / in stock
rise #C13A21
price up
stale #97701B
offer awaiting re-check
Type
Archivo Bold — headlines
Archivo Regular — body copy, product names, editorial.
IBM Plex Mono — £109.99 · UK 9½ · checked 2h ago · every number on the site
Rules
- Green and red are reserved for price movement and stock — never decoration.
- Clay is for emphasis and identity; hover states and dense text use accent-deep. Keep it clear of the price-rise red.
- All data (prices, sizes, timestamps, EANs) is set in mono — race-clock, not shop-window.
- Square corners, 1px lines, no shadows. The grid is visible, like a results board.
- Product photography sits on white tiles; the page itself stays paper.