The idea: a research lab for the mind.

Doctor Reid is not a clinic website and not a personal brand page. It is a lab notebook turned inside out — a place where a psychiatrist who reads too many papers puts the instruments, the training, the references and the trials in public, for free. The design should feel like a bright, well-kept laboratory on a good morning: clean paper, cool sky light, a little warm sienna ink, and one acid-yellow highlighter.

Three wings organize everything: Tools (measure & train), Blog (field notes & the library) and Discover (trials, podcast, papers). If a new thing doesn't fit a wing, it probably doesn't belong on the site.

Voice & the house rule.

The house rule: every claim cites its source — or says "we don't know yet." It appears in the hero, in the gauge widget, on every results page, and it governs copy everywhere. A number without a source is not allowed on this site. If it can't be cited, it gets phrased qualitatively or cut.

How Reid sounds

• A friend who reads too many papers. Plain words first, the technical term second, the citation third.
• Honest about uncertainty. "The evidence is strong here" and "this is where the physiology runs out" are both house phrases.
• Warm, never saccharine. On results pages the reader may be scared; lead with support, then the score, then what it means, then what to do.
• Lightly self-deprecating. "The specimen most frequently tested here." "Rounded down for humility." One joke per screen, never on a crisis message.
• No hype, no fear. Psychedelics, ketamine and GLP-1s are described as drugs with dose-response curves, not miracles or menaces.

The wordmark.

The "Doctor Reid" mark is Reid's own handwriting. It ships as two transparent PNGs (wide and tall) and is always applied as a CSS mask, so it can be tinted any token color without ever being redrawn, traced, or converted to a font.

.wm{display:inline-block;background-color:var(--ink);
  -webkit-mask:url("/assets/wm_wide.png") no-repeat center / contain;
  mask:url("/assets/wm_wide.png") no-repeat center / contain}
.wm.tall{-webkit-mask-image:url("/assets/wm_tall.png");mask-image:url("/assets/wm_tall.png")}

Color.

Warm paper, cool sky, one sienna accent and one acid highlight. Ink does the heavy lifting; sienna is for the things you can click; acid is the highlighter you use twice a page. Everything is exposed as CSS custom properties in dr.css.

Core palette

Page background

The page is never flat: linear-gradient(180deg, Sky 0%, Paper 40%, Paper 2 100%) plus three fixed blurred blobs (mist, pale acid, tan) at 55% opacity, filter: blur(70px). Glass cards read against it; solid white cards do not (use rgba(255,255,255,.62), never #fff, for surfaces).

Severity bands (screeners only)

Bands carry meaning, so they are the one place saturated color appears. Each band has an ink and a tint; the ink is used for text and the dot, the tint for the pill background and range-bar segment.

Typography.

Three families from Google Fonts, loaded once in the head of every page. Fraunces carries the ideas (display, headings, big numbers, italic emphasis at weight 300). Instrument Sans carries the reading. JetBrains Mono, small and uppercase with wide tracking, carries labels, kickers, citations, dates and anything that should feel like a specimen tag.

Italic Fraunces at weight 300 is the emphasis device — one italic phrase per heading, never a whole heading. Bold in body copy is Instrument Sans 600; never bold a serif heading further. Numbers in running text use the sans; numbers that are the point (scores, counts, years in a fact tile) use Fraunces 600.

<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400;1,9..144,600&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Surfaces & depth.

Two surfaces only. Glass — rgba(255,255,255,.62) fill, rgba(255,255,255,.85) 1px border, backdrop-filter: blur(12–14px), radius 20–28px, shadow 0 18px 40px −18px rgba(35,26,18,.30). Ink — solid #231A12, paper text, an acid radial glow in the top-right corner, radius 28px, used once per page for the one thing you most want clicked.

Components.

Pills (buttons & nav)

One dark pill per screen (the primary action). Acid pill only on an ink surface. Sienna pill only for crisis/urgent actions. Hover lifts 1px; dark pills turn sienna on hover.

Chips, kickers, links

Links inside prose are .ulink: ink text, 2px acid underline, sienna on hover. Arrows are the → character, never an icon font. "🔗 link" chips copy a deep link to the section.

Rows (the wing lists)

Name left, plain-language descriptor right in sub color. Coming-soon items sit at 55% opacity and gain a sienna "· soon" suffix automatically.

Cards & widgets

A card is glass with a mono kicker, a serif h4, a sans paragraph and a sienna "→" line pinned to the bottom. A widget (homepage) is a 216px glass card that floats (6–7s ease, ±10px), always links somewhere real, and shows only a real, cited fact: title row with a white icon tile, the visual (gauge, bars, line, list), a source chip, a sienna "go" line.

Forms

Inputs are .field: translucent white, hairline border, sienna focus ring, 12px radius. Answer options are pills; the selected option inverts to ink.

Callouts

Screener results.

The results page is the most important screen on the site and follows a fixed order, top to bottom. Nothing may be inserted above the crisis block.

1. Head — kicker "PHQ-9 results", serif h2 "Your PHQ-9 results", privacy line.
2. Crisis block (only if the scale has a crisis item and it was answered above 0) — red tint, 988 / 911 pills.
3. Score card — band pill · instrument name · big Fraunces score "out of N" · range bar with the reader's marker · interpretation paragraph · clinical note · action row (Copy results link · Print / save PDF · Email · Retake · Try another · Send a friend a blank X) · save-to-account prompt.
4. Takeaway cards — "What this means" (acid dot) and "What to do next" (green dot, numbered).
5. Review your answers — collapsed accordion; crisis item answer shown in red.
6. About the scale & how scoring works — collapsed: about, scoring, ranges table, check-a-score box, worth knowing, citation.
7. Important — please read — the four fixed disclaimers.

Range-bar segment widths are proportional to the band's share of the score range. The marker is ink with a white ring. Band labels use the instrument's own words ("Moderately severe", "Probable PTSD", "Screen positive"), never invented ones.

Content lives in two objects in screeners/index.html: SCALE_META[id] (bands, about, scoring, worthKnowing, citation, crisisItem) and RESULT_INFO[id_style] (what, next[]). Every scale has a _default entry. Adding a scale means adding both.

Layout & motion.

Motion is quiet. Sections reveal on scroll (16px rise, .6s ease, once). Homepage widgets float ±10px over 6–7s. Cards lift 4px on hover, pills 1px. The "now enrolling" dot pulses. Everything respects prefers-reduced-motion, which disables reveal and float entirely. No parallax, no scroll-jacking, no autoplay.

Imagery.

One photograph of Reid (the seated studio portrait, reid_web.jpg, 880×1329) is the site's only photo. It is cropped into the arch — border-radius: 180px 180px 28px 28px — with a soft white halo behind it and the long shadow. The 300×300 crop (face.jpg) exists for avatars and social cards only. Data visuals are drawn in CSS/SVG in the palette (gauge, bars, line); illustrations, if any, are line-based and single-color sienna. Emoji are allowed as small icon tiles (white 22–36px rounded squares) but never inline in headings.

Writing patterns.

Spelling: American. Oxford comma. "eating disorder" (no hyphen as a noun), "eating-disorder science" (hyphen as a modifier). "Psychedelic-assisted therapy". Numbers: numerals for scores, counts and minutes ("2 min", "30 instruments"); words for anything under ten in prose. Dates in mono as "Sep 2026".

Site map & files.

Deploy: drag the site_v3 folder onto Netlify (Deploys → drag & drop). _headers sets no-cache on HTML and a day of cache on assets; _redirects forwards the retired /resources to /blog/. The domain stays pointed at Netlify from Squarespace DNS.

Adding a page: copy the head from build/common.py (fonts + /assets/dr.css), use nav() and FOOTER, write page-specific CSS in the page's own <style>, keep tokens from dr.css. Adding a blog post: python3 build/add_post.py post.html --slug my-post --tag "Understand · topic" --wing understand.