Brand Guidelines | Bruce Anderson

Principles

The design draws from the broadsheet tradition: generous whitespace, clear hierarchy, serif typography, and an editorial register that treats the reader as intelligent. Every element should feel considered and deliberate.

The site should feel like

A well-set broadsheet column. The Saturday edition of a serious paper. A book from a private library — leather, linen, ink. Warm lamplight on good paper. The authority of someone who was there.

The site should never feel like

A blog. A Medium post. A newsletter template. Anything with rounded corners, gradient buttons, or sans-serif body text. Anything that could have been made by anyone, about anything.

Colour

The palette is drawn from parchment, ink, old leather, and the deep red of a wax seal. Warm throughout, never cold or blue. In dark mode, the same warmth persists — think a candlelit study, not a terminal.

Core Palette — Light Mode

Parchment#f7f2e8--bg

Linen#ede8db--bg2

Ink#1a1208--tx

Walnut#3d2e1e--tx2

Tobacco#6b5444--tx3

Wax Seal#8b1c1c--cl

Old Gold#b8912a--gd

Gilt#d4aa45--gd2

Stone#c8bfa8--br

Theme Comparison

Light Mode

Bruce Anderson

Fifty years watching Britain govern itself. Political commentary, memoir, and culture.

Dark Mode

Bruce Anderson

Fifty years watching Britain govern itself. Political commentary, memoir, and culture.

In dark mode, the red accent brightens from #8b1c1c to #c93030 for legibility. The gold stays warm. The background is almost-black with a brown undertone, never pure black.

Typography

Four typefaces, each with a clear role. All are Google Fonts. The site never uses sans-serif for anything other than code.

Display — Headlines & Masthead

Bruce Anderson

Playfair Display SC — 400, 700, 900. Small caps throughout. Used for the masthead, section headers, and the monogram. The primary mark of authority on the page.

Editorial — Article Headlines & Standfirsts

Hard Pounding

Toryism is hard work. Without a teleology to sustain them, Conservatives are condemned to a Promethean struggle.

Playfair Display — 400, 700, italic 400, italic 600. The editorial voice. Bold for headlines, italic for standfirsts and pull quotes.

Body — Article Text

Bruce Anderson read History at Emmanuel College, Cambridge, where he was a contemporary of the historian Paul Bew. In his youth he was a Marxist, and it was as a member of the radical organisation People’s Democracy that he first became involved in the civil rights campaign in Northern Ireland.

EB Garamond — 400, 500, italic 400. The workhorse. 19px at 1.82 line-height on desktop; 17px on mobile. Long-form body text, comment bodies, form inputs.

UI — Labels, Navigation, Meta

Politics · 29 March 2026 · 7 min read

Born in Orkney in 1949. Educated at Campbell College, Belfast, and Emmanuel College, Cambridge.

Cormorant Garamond — 300, 400, 500, italic 300, italic 400. The utility face. Always uppercase with letter-spacing for labels (nav, tags, dates, section markers). Sentence case for sidebar prose, descriptions, and meta text.

Logo & Monogram

The wordmark is typeset in Playfair Display SC at 700 weight. There is no symbol or icon — the name is the brand. The monogram is a single gold “B” in a Georgia serif on a dark field, used for favicons and avatars.

Bruce Anderson

Monogram

Illustration

Article illustrations are inline SVGs in a Vorticist style — geometric, angular, abstract. They use the site’s own colour palette exclusively (ink, walnut, wax seal, old gold). Two variants exist: dark-ground for politics, and light-ground for culture. All SVGs are embedded, not linked — no external image requests.

Dark ground — Politics

Light ground — Culture

Aspect ratio is 19:10 for hero and card art, 6:5 for inline floats. All SVGs use preserveAspectRatio="xMidYMid slice" and fill their container absolutely.

Spacing

A generous scale. Desktop outer padding is 40px, mobile is 16px. Sections breathe with 48–64px vertical padding. The site should feel spacious, never cramped.

4px

8px

12px

16px

20px

28px

40px · desktop pad

48px · section

64px · major break

Components

Recurring patterns across the site. All borders are .5px solid using the border variable. Buttons are uppercase Cormorant Garamond with generous letter-spacing.

Section Tag Politics

Meta Line Bruce Anderson · 29 March 2026 · 7 min

Button — Primary Subscribe

Button — Ghost Archive

Drop Cap T

Credential

2003

Identified CameronNamed Cameron as future leader

Voice & Tone

The site is Bruce Anderson’s voice. The design supports it without competing.

Do

Use long, flowing sentences. Write with confidence and specificity. Name names. Reference history casually, as a man who lived it would. Mix the serious with the droll. End on conviction, not question marks.

Don’t

Over-editorialise. Use clickbait headlines. Break text into listicles. Add pull quotes that restate the standfirst. Write in the third person when first would do. Hedge where he would not.

Headlines

Short, declarative, often two words. “Hard Pounding.” Not “Why Toryism is Harder Than You Think: A Deep Dive.” Let the standfirst do the explaining.

UI Copy

Minimal. Labels are functional, not friendly. “Read” not “Read more.” “Archive” not “See all posts.” The site does not sell itself. It assumes you want to be here.

Technical

The site is static HTML, CSS, and vanilla JS. No framework, no build step, no dependencies beyond Google Fonts. Every page is self-contained. All CSS is in a single file. All JS is in a single file. Illustrations are inline SVG — no image requests. The site should work with JS disabled (dark mode defaults to light, hamburger nav degrades to visible links).

Stack

Static HTML/CSS/JS. Google Fonts (Playfair Display, Playfair Display SC, EB Garamond, Cormorant Garamond). Inline SVG. No framework. Deployed to any static host.

Breakpoints

900px — tablet (sidebars stack, grids collapse). 600px — phone (padding tightens to 16px, typography scales down). 480px — small phone (social links hide, CTA buttons go full-width). 400px — narrow (about hero stacks vertical).