I wanted one site for three sides of myself: the engineer, the designer and the poet. The easy move is to give each a colour and a mood. I went the other way: one palette, two typefaces, one grid, and let the writing carry the difference.
Two typefaces
Geist Sans sets everything people read: headlines, essays, poems and the interface. Geist Mono sets everything people scan: code, dates, labels and numbers.
No colour
The interface is black, white and a ramp of neutral greys. Photographs stay in black and white until you point at them. The only colour on the page is the colour in the work.
Shapes instead of colours
Each practice has a mark: a square for engineering, a circle for design, a slash for poetry and a ring for the lens. The marks appear in the navigation and next to every piece, so you always know which part of me you're reading.
Tokens
:root {
--canvas: #ffffff;
--fg: #000000;
--fg-2: #4d4d4d;
--fg-3: #717171;
--line: #ebebeb;
}The full system is documented on the design system page.