Schematic, the drawing set

The palette in three parts: the key colours, then every shade of each one, then the roles a stylesheet writes and which colour fills each. All of it is read from the page, so a style shows its own palette here.

Three faces, named from what the page actually resolved, then the size ladder with every level set at its own token. The size and line-height beside each are read from the rendered sample.

Faces

Each bar is drawn at its token's width, and the value beside it is measured from the bar.

The scale

The text pairs the base's component rules draw, each ratio worked out from the two rendered colours with the WCAG relative-luminance formula. A style that restates a component's colours in its own rules measures those pairs in its own contrast script.

A short label

One or two sentences explaining the figure. Three of these side by side, for the numbers a reader needs before anything else.

Second label

Keep each entry short. This grid collapses to one column under 820px.

Third label

If there's a fourth fact, start a new row rather than a four-column grid.

Use icons when the three items are genuinely three points rather than three columns of text. The icon sits on the term's line so the left edge stays a single line down the page. One icon per fact or none, and one colour across the row.

Line icon on the term line, preferred

First point

The default. Sized in em so the icon tracks the term's cap height and reads as part of the line rather than as an object beside it.

Second point

The stroke picks up drafting blue, through the --accent role, so a restyle reaches it without touching this rule.

Third point

Closer to the plain grid, with just enough signal to mark the three as points.

Filled circle, the second option

First point

Louder, because a circle is always larger than the type beside it. Worth it when the document has no other accent; prefer the line version otherwise.

Second point

Keep the terms a similar length so the row reads as a set.

Third point

Three is what this grid is built for. Four wraps, two looks unfinished.

Three related things, quietest first. Tinted panels hold a few unlabelled lines. Insight panels are the same tint with a label row, and they hold a lead line plus a short list. Callouts are saturated, loud, and hold one line. One of each per page at most.

Tinted panels

Insight panels

Callouts

Two treatments. Use one per document. Icons are optional and a page with none is fine; a page with an icon on every heading is decorated, not designed.

Inline, leading a line

In a filled circle

The louder treatment, and a way to get colour onto a page in small doses. Three fills carry white; the light one carries ink.

Geist Mono, on the blue tint with the drawing grid behind it and a hairline frame around it. Inline code sits in running prose like --font-mono or padding-block. A block holds something worth reading on its own.

python3 ~/.claude/skills/research-report/scripts/build_report_html.py . \
  --order research_first.md research_second.md

Code is 15px against 17px body, because a monospace at the same nominal size reads larger than the prose around it. Ink on this ground is 15.36:1. A long line scrolls inside the block rather than widening the page.

Nothing below carries a class. A Markdown page renders exactly this, so the base layer has to give it the house look on its own: dot bullets, numbered steps, a reading measure on the prose, room above every heading, and an image that stops at the column.

A heading that wrote itself

This h3 sits under a paragraph with no wrapper anywhere. The space above it is the heading's own margin, not a wrapper's.

• A plain list item, with the orchid dot the dot-bullet class gives.
• No class on the ul. A list that does carry one has opted out.
• Keep each item to a line or two.

1. First step. A plain ol gets the numbered-steps look.
2. Second step. The bold lead word picks up the display face.
3. Third step.

A block quote sits behind a hairline rule in the soft ink, quieter than the prose around it and never a pull quote.

Seven columns, today first, all-day items before timed ones. An empty day reads "Open". Under 820px the grid becomes a stack.

Weeks as rows. Today has the heavier rule and the filled day number; days outside the month are dimmed.

A faint label, a large number in tabular numerals, and one meta line. Use the facts grid when the words matter more than the figure, and these when the figure is the point. The row fits up to four across and drops to two on a phone.

Bordered

Tinted

Single large number

The display face, capped at half the reading measure, with the attribution in soft ink under it. No quotation marks and no coloured bar. A plain blockquote, with its hairline side rule, is still the quiet aside; this is the loud one, once per document.

They stopped guessing at what the agent could do and started writing it down. That is the whole change.

They stopped guessing at what the agent could do and started writing it down. That is the whole change.

A badge is a small square tag for a status or a category. Five fills, one per badge. Keep the word to one or two.

Five fills

With a status dot or an icon

Eyebrow label

A heading with a small label above it

The eyebrow sits above a heading and names what kind of thing follows: "Quarterly review", "Option B", "Section 2". Display face, meta size, faint ink, and no rule or box under it.

For a process whose steps each have a name and a line of detail. The numbered list stays for a sequence of sentences.

Boxed, side by side, four steps or fewer

1. Brief

   An hour on what you actually do, written up as a scope you sign off.

2. Build

   The work happens in your repository, with your developers watching.

3. Review

   You run it on real work for a week and say where it breaks.

4. Hand over

   The runbook, the prompts, and the person who knows how to change them.

Ruled rows, for longer steps or more of them

1. Brief

   An hour on what you actually do, written up as a scope you sign off before anything is built.

2. Build

   The work happens in your repository, with your developers watching, so nothing arrives as a black box.

3. Review

   You run it on real work for a week and say where it breaks, and the fixes go in before handover.

4. Hand over

   The runbook, the prompts, and the person on your team who knows how to change them.

5. Check back

   A month later, one call to see what changed and what the team would build next.

Add data to either table style. Numbers set in tabular numerals and aligned right with num, so the decimals and dollar signs stack. The total goes in a tfoot row.

A picture printed on a plate: a hairline frame, room round the image, and a numbered caption on its own strip. The plain figure, with no class, stays frameless.

A grid of cards, one per choice. Each names the option, says what it is in a line or two, and lists what it costs. A recommended option says so with a badge, never with a coloured edge.

A picture on top, then a name and a line. Two across by default, three with image-cards--3. The picture is cropped to one shape so the row lines up.

Two across

Folio

A beige page and a condensed display face.

Ledger

Mono labels in a column beside a quiet sans.

Three across

Poster

Each section its own block of colour.

Schematic

A title block over a ruled grid.

Field Guide

A serif catalogue with a margin rail.

A grid of figures, one caption line each, and no box round them. Two-up by default, three-up with gallery--3. Three-up drops to two on a phone.

For a hero shot or a wide chart. The figure sits between sections as a direct child of the body, like a band, and only the picture runs to the page edge. A picture taller than most of the screen is cropped from the top.

The large head opens every numbered section, like the one above. Two smaller levels sit inside a section. Each drops one thing: the rule gets lighter, then the label goes.

A 1px ink rule across the full column, an h3, and a short label on the right in place of the section number.

A hairline and the heading alone, with no label.

Twelve Lucide icons cover what documents need. Add one to this set before using it, so a page never mixes two drawings of the same idea.

• check
• arrow-right
• file-text
• calendar
• users
• mail
• search
• terminal
• git-branch
• book-open
• clock
• triangle-alert

Stroke follows type weight

Four colours

Ink is the default. The accent marks structure, the emphasis marks the one thing to act on, and the mark colour marks status. An icon takes one of the four and nothing else.

• Ink, the default
• Accent, icon--cobalt
• Emphasis, icon--purple
• Mark, icon--sage

• Open question one. A last section for anything unresolved is fine to keep, delete this whole section if there's nothing open.