# Field Notes — Lucian Labs look D

A reading lamp over a dark desk. Serif prose on plum-black, amber headings,
lavender in the margins. Shipped in the Lucian Labs blog, where Ana Iliovic
curates the field notes from the build. Read `AGENT.md` first — the ban list
there applies to this look, with one named exception below.

- Stylesheet: `https://lucianlabs.ca/branding/field-notes.css`
- Reference render: `https://lucianlabs.ca/branding/field-notes.html`
- Tokens as JSON: `https://lucianlabs.ca/branding/brands.json`

## Use it for

Long-form reading. Blogs, essays, writeups, build logs told as narrative,
documentation that argues rather than lists, changelogs with a point of view.
If the page is prose someone reads start to finish — not an instrument they
operate, not a counter they watch — this is the look.

Do not use it for live state or dense data. The 18px serif and 1.8 leading
that make an essay comfortable make a dashboard unreadable — that's Console.

## The three rules that make it this look

1. **Serif carries the words, display carries the headings, mono carries the
   marginalia.** Body copy is Source Serif 4 at 18px/1.8 — never tightened to
   fit more on screen. Headings and wordmarks are Exo 2. Timestamps, session
   markers, and code are Fira Code. This is the one Lucian Labs look whose
   monospace is *not* Inconsolata: Fira Code is part of the blog's identity
   and travels with the look. Do not "correct" it.
2. **Amber is the voice, lavender is the care.** `--accent` (amber `#e8a020`)
   belongs to the text itself: links, section headings, inline code, the
   speaking parts. `--accent-2` (lavender `#c4a0d0`) appears only at the
   edges — hover reveals, the curator line, the sign-off name, a card's filed
   spine. Amber talks, lavender tends. They never trade jobs.
3. **Reveal on approach.** Nothing animates on load, but the page responds to
   attention: a post grows its lavender spine on hover, a title picks up a
   soft glow, a dotted underline becomes solid. Transitions run 0.3s —
   unhurried on purpose. This look is allowed glow (text-shadow); it is not
   allowed motion (transforms).

## Type ramp

| Role | Face | Size | Treatment |
| --- | --- | --- | --- |
| article h1 | display 700 | 2.2rem | white, faint lavender glow |
| index h1 | display 700 | 1.8rem | white, faint lavender glow |
| h2 | display 700 | 1.4rem | amber |
| h3 | display 400 | 1.15rem | quiet lilac-grey `#c4bcc8` |
| post title | display 700 | 1.15rem | amber, glow on hover |
| body | body | 1rem / 1.8 | `--ink`, 0.01em |
| subtitle / desc | body italic | 0.92–1.05rem | `--muted` |
| meta / date | display | 0.78rem | `--dim`, 0.03em |
| code | mono | 0.78–0.85em | amber inline, `#c8c8c8` in blocks |
| timestamp | mono | 0.6rem | `--ghost` |

Body text is never pure white and headings never aren't: `--ink` (`#d0ccd4`)
for prose, `--bright` for h1 and the wordmark. If a heading looks grey or a
paragraph looks white, a role has been miscast.

## Accent budget

Amber is unusually generous in this look — every link and h2 carries it —
because in prose, links and headings *are* the interface. That generosity is
bounded: amber never fills a surface, never colours a border wider than
`blockquote`'s 3px spine, and never appears on text that isn't a link,
heading, code, or attribution.

Lavender is scarce. Hover states, `.curator`, `.signoff .name`,
`.card--filed`'s spine, and the h1 glow. If lavender is the first thing you
see on a page, it's overspent.

`--good` / `--bad` do not exist here. Field Notes has no status to report.

## Spacing rhythm

The column is 740px with `3rem 1.5rem 5rem` padding. Posts separate by their
own `1.8rem` padding and a hairline. Sections breathe at `2.8rem` above an
h2. One column, no sidebar — long-form doesn't compete with itself.

## Layout

Lead with the room's header: wordmark left, two or three serif links after,
one hairline underneath. Then the column. An index is a stack of `.post`
entries; an article is h1 → italic subtitle → dated meta rule → prose. The
sign-off closes an article the way the byline never opened it.

## Motion

0.3s ease on `color`, `border-color`, `padding`, and `text-shadow`. The
hover reveals are the personality: the post spine, the title glow, dotted
links turning solid. No transforms, nothing on page load, nothing that
moves text while it's being read.

## Voice

First person, reflective, technically exact. Care disguised as engineering.

- Titles name the thing and its argument: `wavelang — An Agent-Authored DSL`.
- Meta lines are dates only. Attribution lives in the sign-off:
  `Technically yours, Ana Iliovic`.
- Quotes arrive as they were said — lowercase, compressed, unedited — with a
  session-relative timestamp: `+1:14 · Elijah`.
- Confidence is implicit. Endings seed a thought rather than conclude it.
- No exclamation marks, no "let me walk you through", no apologies, no
  closing offers.

## Components in the stylesheet

`header` + `.brand` + nav · `main` / `article` column · `.subtitle`
`.tagline` `.meta` · `.post` + `.desc` · bare `a` + `a.quiet` · `pre` /
`code` · `blockquote` + `.ts` / `.who` footer · `.card` `.card--filed` ·
`.stats` / bare `table` · `figure` + `figcaption` · `.signoff` + `.name` ·
`hr` · `body > footer` + `.curator`.

## Filling gaps

Follow the procedure in `AGENT.md` step 4. For this look specifically:

- **Aside / callout** — `.card`, and `.card--filed` if it's something kept:
  a definition, a quote worth keeping, a filed observation.
- **Nav beyond the header** — serif links in `--faint`, lavender on hover
  (`a.quiet`). Never buttons; this look has no buttons.
- **Tag / chip** — inline code styling (`--chip` background, `--radius-sm`)
  with mono at 0.72rem. Colour it amber only if it links somewhere.
- **Image row** — `figure` per image; captions italic, `--dim`.
- **Table of contents** — a `.post`-less list of amber links, no numbers,
  no collapse behaviour.