Humboldt house style

Field Notes design system

The canonical, version-controlled source of truth for Humboldt's web presence. This page renders directly from the deployed tokens in src/styles/tokens.css. Board-chosen: a monochrome, academic palette of charcoal ink and a single quiet slate accent on cool near-white paper, set in Newsreader and Inter, with hairline rules and near-square corners. Editorial, scientific, serious. Not warm: no brass gold, no ivory or cream.

Palette

Surfaces

--paper#FCFCFBPage background: cool near-white

--paper-2#F4F4F2Alt band, subtle fill

--sand#ECECEAImage placeholders, neutral fill

--card#FFFFFFRaised surfaces

Ink and text

--ink#17191BHeadings, primary text (charcoal)

--ink-soft#44474ABody, secondary text

--ink-faint#6E7176Captions, meta

Accents and lines

--forest#2B3940The single slate accent: links, emphasis

--forest-d#1B242AHover, pressed

--brass#5F6367Neutral meta gray: eyebrows, labels

--rule#E3E3E0Hairline dividers

--rule-strong#CECEC9Stronger borders

Type scale

Display and headings: Newsreader serif, weight 500, italic for emphasis (slate accent). Body and UI: Inter, 400 to 600.

Token	Spec	Role
`--t-display`	clamp(34px, 4.6vw, 58px)	h1 display (Newsreader 500)
`--t-h2`	clamp(26px, 3.2vw, 38px)	h2 (Newsreader 500)
`--t-h3`	22px	h3 (Newsreader 500)
`--t-lede`	19px	Lede / intro (Inter)
`--t-body`	17px / 1.65	Body (Inter 400)
`--t-small`	14px	Small, captions
`--t-eyebrow`	11.5px, 0.22em tracking	Eyebrow, uppercase

Heading one

Heading two

Heading three

A lede paragraph introduces the section with a calm, confident voice.

Body copy sets at 17px on 1.65 leading, capped near a 62 character measure for comfortable reading. Emphasis renders in slate italic.

Spacing scale

An 8pt-ish editorial rhythm. Sections breathe at roughly 56 to 80px vertical.

--s-1 6px

--s-2 12px

--s-3 18px

--s-4 26px

--s-5 40px

--s-6 56px

--s-7 80px

--s-8 104px

Grid

Single editorial column, max-width 1040px (--maxw), 56px side margins. Annotated sections use a 200px label gutter plus 1fr.

01 · Section label

Primary column. Body content sits here against the hairline rule and label gutter.

Components

Buttons

Primary action Secondary action

Eyebrow and rule

Beta programme · 2026

Motifs

Hairline rules (1px --rule) divide sections, never heavy borders.
Near-square corners (--radius 2px): editorial, not "app".
Ruled-paper / notebook feel: neutral-gray eyebrows with a short leading hairline.
Newsreader italic in the slate accent carries every point of emphasis.

Source of truth: src/styles/tokens.css in humboldt-web, deployed via Vercel. Base typography and components live in src/styles/global.css. Layout structure follows the Designer's Field Notes reference; the palette is the board's monochrome / academic direction (HUM-52, HUM-54).