Style

I use this page to help Claude/Codex style the things I make. It's also useful to keep track of the different components in use across my site.

Foundation

Colours

Text
--text-color · #111
Background
--background-color · #fdfdfd
Accent (links, titles)
#4b4bd2
Brand
--brand-color · #2a7ae2
Grey
--grey-color · #828282
Grey Light
--grey-color-light · #b1b1b1
Grey Dark
--grey-color-dark · #4d4d4d
Footer Background
#FAFAFB

Foundation

Type Scale

Base: 16px root / 1.5em body (≈ 15px). Font stack: -apple-system-font, Helvetica Neue, sans-serif.

h1.article_title · 2.6rem → 3.0rem (≥550px) · line-height 1.2 · colour #4b4bd2

Post Title

h1 · 2.4rem → 2.8rem (≥550px) · line-height 1.2 · colour #111

Section Heading

h2 · 2.2rem → 2.6rem (≥550px) · line-height 1.25

Sub-section Heading

h3 · 1.9rem → 2.2rem (≥550px) · line-height 1.3

Minor Heading

h4 · 1.6rem → 1.9rem (≥550px) · line-height 1.35

Small Heading

h5 · 1.4rem → 1.6rem (≥550px) · line-height 1.5
Very Small Heading
h6 · 1.2rem → 1.4rem (≥550px) · line-height 1.6
Smallest Heading
p · 1.7rem · line-height 1.6 · weight 400

Body copy. Longer passages of text look like this. The blog uses a comfortable reading measure with sensible line-height so articles are easy to read at length. Words break cleanly on narrow viewports.

.small-font · 1.2rem

Small text — used in footers and supplementary notes.

.post_date · 1.4rem · color #888

14 January 2025

Elements

Links

Default link — colour inherits text, dotted underline

Here is some text with a standard link inside a paragraph.

a.post_title — colour #4b4bd2

Post Title Link

.article-content a — dotted border, black hover

An in-article hyperlink with dotted underline and black hover state.

Components

Post List Item

.post_header / .post_title / .post_date

Total Reading

2025 in review

Technological sightlines

Read more →

Elements

Blockquote

blockquote

From the heart, it's a start, a work of art.

Elements

Horizontal Rule

hr

Content above the rule.

Content below the rule.

Elements

Code Block

.highlight 
def hello(name):
    return "Hello, " + name

print(hello("World"))

Components

Article Footer

.article-footer · includes author.html
Photo of Dan Bower

Hi there, thanks for stopping by!

My name is Dan, I'm a product manager, entrepreneur and currently Head of Product for Screening at NHS England. Check out my blog archive or read more about me.

Components

Site Header

header.html · h2.logo / .nav / .site-nav / .page-link

Foundation

Spacing

--spacing-unit
30px
Container padding (mobile)
10px
Container padding (tablet+)
64px / 32px
Footer margin-top
4rem

Foundation

Layout Grid

Max content width: 960px. Page uses a sidebar (3 col) + main (9 col) split above 781px. Columns have 4% right margin.

3 col
Header / Nav
9 col
Main content

Below 781px: single column, stacked layout.

Components

Site Footer

footer.html · .site-footer