↓ Skip to main content

Style guide

Bold typography, restrained colour. The swatches below read the site’s CSS variables directly: changing the palette updates this page on its own.

Colours
#

Moss green · primary colour
#

Built around #2E6218, at a constant hue (102°). Too dark for dark mode (2.4:1), the source colour gives way to primary-400 there.

50
100
200
300
400 links, dark mode
500
600 links, light mode
700 source colour
800
900

Amber · secondary colour
#

Tags, badges, key figures; replaces the green on the Freelance block of the CV.

50
100
200
300
400
500
600
700
800
900

Tinted neutrals
#

Greys pulled towards green (hue 100°): a pure grey next to green looks dirty.

50 background, light mode
100
200
300
400
500
600
700
800 background, dark mode
900 text, light mode

Off-palette
#

Brick red (#E2A58C, stamp #8A3B22), the opposite of green, reserved for the “terracotta” sticky notes of the jazz notebook.

Typography
#

Archivo 900 · page title

Hierarchical reconciliation

Archivo 800 · headings

What got stuck

IBM Plex Sans 400 · body text

Forecasts produced series by series don't add up: the regions don't sum to the national total.

IBM Plex Mono 400 · dates, tags, code

8 October 2026 · 1,701 words · 0123456789

Caveat 700 · jazz notebook only

ii – V – I in F, to practise

Components
#

Link, badge, button#

A link in the text, then a badge and a button:

New See the projects

Callout
#

Work in progress. An information callout, as at the top of the Kwak Finance page.

Key figures
#

37

pull requests

the figure in display type, the caption in mono

+2.3%

regional MASE

second example

Project card
#

Code and table
#

def balance(opening: Decimal, transactions: list[Decimal]) -> Decimal:
    return opening + sum(transactions, Decimal(0))
ExampleValueGap
Baseline1,000.00—
Variant1,023.00+2.3%