bradystroud.dev
The design language behind this site — colours, type, spacing and components. It's public so it's easy to copy: grab the tokens below and build something new that already feels on-brand.
Colour
Typography
Spacing & Radius
Components
Principles
- 01
One accent, used sparingly
A single blue carries links, active states and highlights. Everything else is ink on paper. If two things are blue, ask which one matters more.
- 02
Type does the hierarchy
Space Grotesk for display, Schibsted Grotesk for reading, JetBrains Mono for labels, dates and code. Weight and size — not colour — separate levels.
- 03
Whitespace is a feature
Generous padding and clear rules between sections. Let content breathe rather than boxing everything in.
- 04
Mono for metadata
Dates, tags, counts, eyebrows and section labels are uppercase JetBrains Mono with wide tracking. It reads as 'system chrome', distinct from prose.
- 05
Numbered, indexed lists
Posts and highlights lead with a two-digit index (01, 02…). It signals a curated, ordered collection.
Tokens
Drop these CSS custom properties into a project and the rest of the system falls into place. Light and dark are the same tokens, re-pointed.
:root {
--paper: #FCFCFD; --surface: #FFFFFF;
--ink: #14161C; --ink-soft: #565D6B; --ink-mute: #9AA0AB;
--rule: #EAEBEF; --rule-strong: #D9DCE3;
--accent: #3B5BDB; --accent-ink: #FFFFFF; --accent-weak: #EEF1F7;
}
html.dark {
--paper: #0E1116; --surface: #161A21;
--ink: #E6E9EF; --ink-soft: #97A0B0; --ink-mute: #626C7C;
--rule: #232A34; --rule-strong: #2C333F;
--accent: #6E8BF5; --accent-ink: #0E1116; --accent-weak: #1A2233;
}
/* Fonts */
--font-display: "Space Grotesk"; /* headings, wordmark */
--font-sans: "Schibsted Grotesk"; /* body & UI */
--font-mono: "JetBrains Mono"; /* code, labels, dates */