Brand Book · v1.0 · May 2026

Working File.

One theme, two moods.

A warm, editorial design system for working files, decision logs, and personal references. The whole system rides on CSS variables — fourteen color tokens, three typefaces, a handful of components. Toggle the moon, top right, to see every page in dark.

Color tokens
14
surfaces · ink · accents · functional
Type families
3
serif · sans · mono
Modes
2
light · dark
Components
9
documented in this book
01

Principles

Four ideas the system is willing to be inflexible about. Everything else can flex; these don't.

01
Warmth

The surface reads as paper, not screen. Page is cream or deep ink — never pure white, never pure black. Text is warm-dark or warm-cream.

02
Restraint

One accent, used sparingly. The italic emphasis, the recommendation block, the burgundy mark — they earn attention by being rare.

03
Editorial

Numbered sections, serif headlines, italic emphasis on key words, mono labels for metadata. The system reads like a working magazine layout.

04
Dual mood

Same character in light and dark. Dark is intentional, not inverted — a leather-bound book by a reading lamp, not a generic dark theme.

02

Palette

Fourteen named colors, paired across light and dark. Surfaces and ink carry structure; accents and functional carry meaning. Every value is a CSS custom property — the chips below show whatever mode you're in right now, and both HEX and CMYK values stay listed for print and handoff. The CMYK figures are mathematical sRGB→CMYK conversions; a print shop will ICC-match against destination paper.

Surfaces & Ink
Page
--bg
Light#faf7f20 / 1 / 3 / 2
Dark#16130e0 / 14 / 36 / 91
Primary page surface. The "paper" beneath all content.
Card
--bg-card
Light#ffffff0 / 0 / 0 / 0
Dark#1f1b150 / 13 / 32 / 88
Raised content. Cards, decisions, panels, stat strip cells.
Soft
--bg-soft
Light#f3eee50 / 2 / 6 / 5
Dark#28231b0 / 13 / 33 / 84
Subtle fills. Hover states, "open" badges, table header bands.
Ink
--ink
Light#1a18160 / 8 / 15 / 90
Dark#f0e9db0 / 3 / 9 / 6
Primary text. Headlines, titles, navigation, emphasized phrases.
Ink 2
--ink-2
Light#3d3a350 / 5 / 13 / 76
Dark#c4baa80 / 5 / 14 / 23
Body text. Paragraphs, decision bodies, descriptions.
Ink 3
--ink-3
Light#6b655c0 / 6 / 14 / 58
Dark#897f6e0 / 7 / 20 / 46
Tertiary. Eyebrows, captions, metadata, mono labels.
Accents & Functional
Accent
--accent
Light#8b3a2f0 / 58 / 66 / 45
Dark#d4897a0 / 35 / 42 / 17
Primary brand mark. Italic emphasis, recommendation accent bar, links, eyebrow rules, favicon.
Accent soft
--accent-soft
Light#f0d9d20 / 10 / 13 / 6
Dark#3a201a0 / 45 / 55 / 77
Rejected badge fill. Pairs with --accent-ink for readable on-color text.
Tan
--tan
Light#c695680 / 25 / 47 / 22
Dark#d9b2870 / 18 / 38 / 15
Secondary warm hue. Decorative role, never structural. Bridges accent and surface.
Tan soft
--tan-soft
Light#f1e3d20 / 6 / 13 / 5
Dark#3a2c1d0 / 24 / 50 / 77
Recommendation block gradient base. Anywhere a tinted "warm card" treatment is needed.
Green
--green
Light#4a674128 / 0 / 37 / 60
Dark#9bb58514 / 0 / 27 / 29
Functional — success / decided. Forest tone, not bright. Pairs with --green-soft and --green-ink.
Green soft
--green-soft
Light#dfe8da4 / 0 / 6 / 9
Dark#2a3a2228 / 0 / 41 / 77
Decided badge fill. "Lowest" callouts. Calm, never celebratory.
Amber
--amber
Light#a876170 / 30 / 86 / 34
Dark#dcb5470 / 18 / 68 / 14
Functional — in progress / open. Mustard-leaning, not orange. Open-question left border.
Amber soft
--amber-soft
Light#f3e6c80 / 5 / 18 / 5
Dark#3a2e140 / 21 / 66 / 77
In-progress badge fill. Soft warning, never alarm.
03

Typography

Three families, distinct registers. The serif carries display weight and italic emphasis; the sans handles body and UI; the mono labels, IDs, eyebrows, and any text where character width matters.

Display · 64–144 / Serif
Working File.
H2 · 36–52 / Serif
Section heading
Tagline · 24–32 / Serif
Secondary serif line
H3 · 18 / Sans 600
Card and UI heading
Body · 16 / Sans
Body text reads like ink on warm paper. Line height generous, color slightly muted from primary ink.
Small · 13 / Sans
Captions, secondary text, footnotes.
Eyebrow · 11 / Mono CAPS
SECTION · ID-042 · METADATA
Italic emphasis · signature technique

The single most distinctive pattern in the system. Italicize one key word in a display headline and color it with the accent. The serif's italic forms (especially in Instrument Serif) carry a printed-press feel that pairs with the warm palette.

Replacing the Vibe, thoughtfully.
One theme, two moods.
DoItalicize a single key word per display headline.
DoReserve for H1 / hero-level type only.
DoEnd the italic with a period for finality.
Don'tApply to body or UI sizes (loses character).
Don'tItalicize whole phrases — pick one word.
Don'tUse a non-serif italic for this pattern.
04

The system applied

Same markup, both modes. Every pattern below uses tokens — no hard-coded hex. Content shown is documentation about the pattern itself, so it doubles as a usage reference.

Stat strip

For at-a-glance metrics. Three to five cells; auto-fit grid handles wrapping.

Tokens
14
documented above
Families
3
serif · sans · mono
Modes
2
light · dark
Principles
4
non-negotiable
Recommendation / featured block

The strongest visual hierarchy in the system — reserve for one item per page.

Featured Component
The recommendation block, for when one thing leads
Use sparingly · One per page max

The vertical accent bar, the gradient background, and the italic burgundy emphasis combine to draw the eye immediately. Reserve this block for the single "this is the answer" call on each page — top recommendation, primary decision, headline pick. Not for side-by-side comparisons (use cards for those).

Cards · open questions · clean lists

Two-column grid collapses to single column under 760px. Open-question strips use an amber left-border; clean lists use a burgundy arrow bullet.

Open questions

OQ-1
A question waiting on more information
Triggers: the condition that resolves it
OQ-2
A second open question, less tentative
Triggers: a different condition
OQ-3
A third, dependent on the first two
Triggers: only after OQ-1 resolves

Next actions

  • First concrete next step
  • Second action, named specifically enough to do
  • Third action, with the verb at the front
  • Fourth action — keep the list short
Status badges

Four states with paired soft-background and high-contrast-ink tokens.

Decided In Progress Rejected Open
Decision items

For decision logs, change records, design rationale. ID + title + status badge in the header; body prose underneath.

ID-001The first decision, framed as a statement
Decided

One or two sentences on what was chosen and why. Use bold for the operative noun, not for entire phrases. Note tradeoffs in a follow-up paragraph if needed.

ID-002A second decision, still being worked
In Progress

In-progress decisions get the amber-soft progress badge. State the current direction and what would close the decision — the trigger that moves it to decided.