Colophon
How this site is built.
A design system is only real if it is written down. This page documents the one running on this site — rendered from the same tokens every other page uses, so it cannot quietly go out of date.
01 / Palette
Ink, bone and brass
Never pure white on pure black. The warmth is what makes it read as a studio rather than a terminal.
canvas
#0E1110
Page ground. Near-black, faintly green.
surface
#171A19
Raised panels and row hover.
bone
#EDE8DE
Primary text. Warm — never pure white.
boneSoft
#C3C7C2
Body copy.
muted
#8B918C
Metadata and mono labels.
line
#262B29
Hairlines. The structure of the whole site.
lineStrong
#343A37
Borders that need to be seen.
brass
#C9A227
The accent. Links, rules, numerals, marks.
brassHover
#E0B838
Hover. Brightens — darkening reads as disabled on dark.
02 / Contrast
Measured, not assumed
- bone on canvas
- 15.5 : 1 WCAG AAA
- boneSoft on canvas
- 10.9 : 1 WCAG AAA
- brass on canvas
- 7.8 : 1 WCAG AAA
- muted on canvas
- 5.8 : 1 WCAG AA
03 / Type
Schibsted Grotesk & Geist Mono
The same pairing as my consultancy's site. Shared typography, opposite colour world — two properties, one person. Samples below render at reduced size to fit the row.
display
76px / 42px
Hampir sahaja — almost.
Hero only. Weight 550 / −0.018em.
h1
60px / 38px
Hampir sahaja — almost.
Page titles.
h2
40px / 30px
Hampir sahaja — almost.
Section titles.
h3
26px / 22px
Hampir sahaja — almost.
Row titles.
lead
22px / 19px
Hampir sahaja — almost.
Standfirst.
body
17px
Hampir sahaja — almost.
Prose. Capped at 64ch.
note
16px
Hampir sahaja — almost.
Secondary prose.
mono
14px
Hampir sahaja — almost.
Geist Mono. Metadata.
eyebrow / rail
13px
Hampir sahaja — almost.
Geist Mono, uppercase, +0.09em.
04 / Spacing
Ten steps
05 / Texture
Graph paper
Two CSS gradients, brass at 5% on a 20px grid. No image, no noise layer. Kept far fainter than the paper-coloured version it descends from — light lines on a dark ground read much louder.
06 / Principles
The rules it follows
No radius, no shadow
Hierarchy comes from hairlines, spacing and type weight. Nothing on this site is rounded and nothing floats. Hover states change a border colour; they do not move.
The datasheet row
Every section is the same shape: a mono label rail on the left, content on the right, a hairline above. It reads like an index, which is what this site is.
Designed dark, not darkened
Headings run at weight 550 rather than 600 and letter-spacing is looser, because light-on-dark blooms optically. The text is bone, not white; the ground is ink, not black.
Zero client JavaScript
Not a constraint imposed from outside — a position. Every interaction here is CSS. The whole site is one stylesheet and some HTML.
07 / Stack
What it runs on
- Typeface
- Schibsted Grotesk Variable · Geist Mono, self-hosted
- Hosting
- Cloudflare Workers · static assets
- Content
- Typed TypeScript modules. No CMS, no database.