Style guide

How doctorreid.com looks and reads, and the rules every new page follows. This page is generated from the same file the build uses.

Read this before building any page, post or tool for the site. The goal is a site that looks designed by a person for this subject: a psychiatrist's notebook and reference shelf, not a template.

The idea

The wordmark is Reid's handwriting, the colour of fountain-pen ink. Everything else stays out of its way: white paper, black type, one blue-black accent. Type and spacing carry the design; hairline rules group things; boxes are reserved for figures and interactive tools.

Source Serif 4

Headings and long-form reading

Libre Franklin

Interface, labels and tools

The wordmark: Reid's handwriting, always the official file, tinted with --pen

Primary button SecondaryButtons are rectangles that name the action

Pens and highlighters

A yellow highlighter for the key point, mint, pink or sky when a second kind of mark helps. A red-pencil circle, a blue box, a green scribble, and a quick line through.

Margin note in red pencil: updated October 2026.

Classes: hl (mint, rose, sky), circled, boxed, scribbled, struck, pen-note; pens red (default), blue, green. One or two marks per screen.

Tokens (assets/dr.css)

Token	Value	Use
bands	green #2F6E45, amber #8A6413, red #9B2E22, blue #2F4F73	screener results and data, always as words, never dots

Type

Source Serif 4 (variable, optical sizes): headings, long-form post text, list titles.
Libre Franklin (variable): navigation, buttons, labels, captions, tools, tables.
JetBrains Mono only for code. Never for labels.
Headings are sentence case, weight 600, no italic or coloured accent word.
Labels are sentence case and readable (at least 0.8rem). No ALL CAPS, no letter-spaced eyebrows.

Layout

Left-aligned. Reading column about 66 characters. Pages max 960–1180px.
Section = a serif heading over a 2px ink rule, then rows separated by 1px hairlines.
Lists beat card grids. A grid of identical rounded cards is never the default.
Radii 3–4px. No shadows. No backdrop blur. No fade-in-on-scroll.
Numbers (01, 02…) only when the content really is a sequence.

Pens and highlighters

Reid marks up paper with highlighters, circles, boxes and scribbles in different pens, so the site does too (rules in assets/house.css).

Highlighters: yellow by default (hl), plus mint, rose and sky (hl mint and so on). <mark> gets yellow.
Pens: red pencil #C2412D (default), pen blue #23366F, green #2F6E45. Shapes: circled, boxed, scribbled, struck, and pen-note for margin notes.
One or two marks per screen, on words that matter. Never on buttons, the wordmark or crisis text.
Topic colour appears only as a short 3px tick above topic names (tick, with --c set to the topic colour).

Banned (the "vibe-coded" tells)

Coloured left/top stripes on cards; purple/blue/green gradient theming; gradient text; neon glows and coloured shadows; glassmorphism; pills and badges above headings; tiny mono all-caps eyebrows; emoji as icons; status dots that mean nothing; icon-topped feature cards; centred hero plus three cards; stat-banner rows; middle-dot meta strings ("A · B · C"); arrows appended to every link; the italic accent word in a headline; wordy marketing copy; fake testimonials.

Copy

Plain, specific, active. Say what a thing is or does. Buttons name the action ("See enrolling studies"). Em dashes sparingly. No "unlock", "dive in", "journey", "empower".

Enforcement

build/dehype.py runs in package.sh and strips leftover tells from every page's own CSS (glows, gradients, stripes, caps labels, big radii, foreign fonts), and neutralises the palettes of older standalone posts. Self-contained art pieces (museum, helm, compounds) are skipped.
assets/house.css loads last on every page with a few firm rules.

Illustrations: pen on paper

Every drawing on the site follows one set of rules: one ink (#23366F), a monoline pen line with a light wobble, paper-white fills, one highlighter swipe per image (yellow, mint, sky or rose), red pencil at most once. No frames, no backgrounds, no halftones.

The art room (/art/)

The art hub, built by build/art_hub.py, is one inline SVG drawn in the same pen as the illustrations: pen frames with picture-wire hangers, a shelf, a single ground line, all on white. Each object is one art section or creative-code piece: street art, street photography, the museum, the Inner Space Charter, HELM, the psychiatry wiki, the chord lab, the compound library and the Zen dojo; the potted plant goes to doctorweed.org and Reid on his stool to reidrobison.com. Everything is also listed plainly below the room.