Style Guide

Live token reference — both themes always visible. The current panel tracks the site theme toggle.

WCAG 2.1 contrast ratios are measured against each panel's --colour-background. Thresholds — normal text: AA ≥ 4.5:1, AAA ≥ 7:1 · large text (≥ 24px or bold ≥ 19px): AA ≥ 3:1, AAA ≥ 4.5:1.

Dark

Current

Colour tokens

Text
--colour-text-primary
--colour-text-secondary
Surfaces
--colour-background
--colour-surface
--colour-surface-raised
Accent & highlight
--colour-accent
--colour-glow-primary
--colour-glow-secondary
Borders
--colour-border
--colour-border-mid

Typography

--colour-text-primary — display heading AAA · 17.0:1

Standards first.

--colour-text-primary — section heading (h2) AAA · 17.0:1

Fundamentals led.

--colour-glow-primary — sub heading (h3) AAA · 15.9:1

A subsection heading

--colour-text-secondary — body copy & prose AAA · 9.7:1

Building maintainable front-end work for the web with a bias for standards, simplicity, and code that earns its place. Article paragraphs, hero bios, card descriptions, and nav links all use this token.

--colour-text-primary — strong / emphasis AAA · 17.0:1

Semantic HTML is the foundation.

--colour-text-secondary — meta / mono label AAA · 9.7:1

27 May 2026  ~  7 min read

--colour-glow-primary — inline code AAA · 15.9:1

Use :focus-visible instead of removing outlines.

--colour-text-secondary — blockquote AAA · 9.7:1
The best code is the code you don't have to write.

Surfaces

--colour-background
--colour-surface
--colour-surface-raised

UI elements

Button — accent border & tint
get in touch
Links — nav/mono & body accent
view my work Read the article
Tags — --colour-glow-primary / --colour-tag-border
HTML CSS JavaScript
Focus state — --colour-accent outline
focused link

Light

Current

Colour tokens

Text
--colour-text-primary
--colour-text-secondary
Surfaces
--colour-background
--colour-surface
--colour-surface-raised
Accent & highlight
--colour-accent
--colour-glow-primary
--colour-glow-secondary
Borders
--colour-border
--colour-border-mid

Typography

--colour-text-primary — display heading AAA · 16.9:1

Standards first.

--colour-text-primary — section heading (h2) AAA · 16.9:1

Fundamentals led.

--colour-glow-primary — sub heading (h3) AA · 6.9:1

A subsection heading

--colour-text-secondary — body copy & prose AAA · 7.3:1

Building maintainable front-end work for the web with a bias for standards, simplicity, and code that earns its place. Article paragraphs, hero bios, card descriptions, and nav links all use this token.

--colour-text-primary — strong / emphasis AAA · 16.9:1

Semantic HTML is the foundation.

--colour-text-secondary — meta / mono label AAA · 7.3:1

27 May 2026  ~  7 min read

--colour-glow-primary — inline code AA · 6.9:1

Use :focus-visible instead of removing outlines.

--colour-text-secondary — blockquote AAA · 7.3:1
The best code is the code you don't have to write.

Surfaces

--colour-background
--colour-surface
--colour-surface-raised

UI elements

Button — accent border & tint
get in touch
Links — nav/mono & body accent
view my work Read the article
Tags — --colour-glow-primary / --colour-tag-border
HTML CSS JavaScript
Focus state — --colour-accent outline
focused link