Almanac · Design system · Vol. 01
A catalogue, set for screens.
Print-inspired, not print-imitating. One neutral page, hairline rules instead of boxes and shadows, near-square corners, one clay accent kept for buying, and every number in mono.
Colour
Ink 900
#141413 · 17.6:1
Text, rules that divide sections, the ink button
Ink 600
#5C5B57 · 6.5:1
Secondary text
Ink 400
#6A6863 · 5.3:1
Meta: brands, counts, strike-through prices
Page
#FAFAF8
Everything sits on it
Surface
#FFFFFF
Inputs, receipts, the drawer
Well
#F0EFEB
Behind every product photo, in every category
Rule
#E3E1DC
Hairlines between rows
Rule strong
#C9C6BF
Input borders, receipt leaders
Clay
#C4411B · 4.9:1
Buy, and only buy
Clay dark
#A3351A · 6.5:1
Links, focus ring, clay hover
Moss
#2F6A3E · 6.2:1
In stock, success
Crimson
#A61B29 · 7.2:1
Errors — kept apart from clay
Type
Display · Instrument Serif
Aa Aa
Mastheads, section titles, department names. Never below 24px, never for body copy. Italic is the one flourish — used for emphasis and on hover in the index.
Text · Instrument Sans
Aa
Everything read or clicked: product titles, descriptions, forms, buttons. 15–16px body, 500 for titles and controls.
Figures · Geist Mono
0123
Every number a shopper compares: prices, totals, quantities, counts, catalogue and order numbers. Figures line up in columns.
- Display XL
- Everyday goods
- Display L
- Shop by category
- Display M
- Men's Watches
- Title
- Apple MacBook Pro 14 Inch Space Grey
- Body
- Each size, colour and storage tier carries its own price.
- Eyebrow
- Selected by rating
Numbers
Price
$1,299.99Range and sale
From $24.99$19.99was $24.99
Catalogue number
No. 078Read off the product slug — display only, no schema change.
Not yet known
--
Shipping and tax before an address.
Space, rules, corners
8px base · generous vertical rhythm
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 64
- 96
Section rule · 1px ink
Row hairline · 1px rule
Corners · 2px, pills never
Depth · none
No drop shadows. Structure comes from rules, the well and white space. The only overlay is the drawer's scrim.
Controls
Buttons
Clay moves money forward. Ink navigates. Outline is the quiet add on a grid card. 48px tall, 40px for dense rows.
Options · preview
Selected, available, sold out — told apart by fill and strike, not colour alone.
Enter a full postcode.
Product card
No box and no shadow. The photo sits on the well — the same neutral for a laptop as for a dress — then the catalogue number, title, and a mono price.
The receipt
The signature surface. The cart drawer, the checkout summary and every order total are set as a receipt: a torn top edge, dotted leaders from label to figure, and -- on a leader where a figure cannot be known yet. Shown here on the drawer's scrim.
Added to cart
No. 099
Amazon Echo Plus
Item$99.99
Shipping--
Tax--
Subtotal · 1 item$99.99