Headline Cards for Typst Presentations

What this skill carries — grep references/ for any subject the names below miss: !d=${CLAUDE_SKILL_DIR}; command -v skill-toc >/dev/null 2>&1 && exec skill-toc "$d"; s=$HOME/.claude/skills/plugin-utils/bin/skill-toc; [ -x "$s" ] && exec "$s" "$d"; echo "(skill-toc unavailable: references and scripts are NOT listed here — install the plugin-utils plugin, or start a new session so its bin/ reaches PATH)"

Typst rules in force here — read the one that governs what you are writing; they are independent: !k=slides; command -v typst-rules >/dev/null 2>&1 && exec typst-rules "$k"; r=$HOME/.claude/skills/typst/scripts/load-constraints; [ -x "$r" ] && exec "$r" "$k"; r=$HOME/projects/typst/scripts/load-constraints; [ -x "$r" ] && exec "$r" "$k"; echo "(typst corpus unavailable: NO Typst rule is listed here — install the typst plugin, or start a new session so its bin/ reaches PATH)"

An editorial recreation of a newspaper clipping: light paper stock, the real masthead logo, a top rule carrying a category kicker and dateline, a serif headline with a Last-Week-Tonight yellow highlighter swipe over one phrase, and a short standfirst.

Read templates/theme.typ before writing a card. The implementation is the authority; if it disagrees with this file, believe it and fix this file.

Architecture

presentation/
├── templates/theme.typ        ← headline-card() lives here; read it first
├── data/headlines-NN.json     ← card data, NN = the lecture number
├── assets/logos/*.svg         ← DARK / full-colour logos (see below)
└── slides/XX-topic/NN.typ     ← loops over the JSON, one slide per card

Step 1: the JSON entry

{
  "venue": "WSJ",
  "date": "June 24, 2026",
  "kicker": "Tech",
  "headline": "The headline exactly as published",
  "highlight": "phrase to swipe in yellow",
  "quote": "The article's own standfirst/dek.",
  "logo": "../assets/logos/wsj.svg"
}

highlight must be a substring of headline, matching character for character — the function splits on it, so a straight quote where the headline has a curly one silently produces no swipe. kicker and quote are optional.

Quote the article, do not summarise it. The standfirst should be the publication's own dek or a vivid line from the piece. "Discusses the impact of proxy advisors" is not a card; "Anyone who gives them money — shame on you" is.

Nothing on the card may be composed. Headline, dek, outlet and date are the article's own or they do not go on the slide — a card asserts that a publication printed this. Pull them from the record, and if a field cannot be sourced, omit it rather than inventing it. Note that Reader's reader-get-document-details returns null for published_date/source_url while reader-list-documents --id <id> returns them populated — check both before concluding a date is unavailable.

Step 2: paper stock is per publication

headline-card picks the stock from venue. FT is famously salmon and the broadsheets are white; one generic cream for everything reads as wrong to anyone who knows the paper.

venue	stock
Financial Times, FT	#FFF1E5 salmon
WSJ, NY Times, Bloomberg, ABC News	#FFFFFF
X, Twitter	#FFFFFF — light-mode surface; the mark is black
Bluesky, Mastodon, Threads, LinkedIn	#FFFFFF — same embed layout; accents #01A5FF / #563ACC / black / #0A66C2
anything else	#F7F4EC cream fallback

Microblog cards are embeds, not clippings

A post takes the same function and the same stock table, but an embed layout, because the masthead layout is what made it read as a clipping of a tweet:

{
  "venue": "X",
  "name": "Matt Levine",
  "handle": "@mattlevine",
  "avatar": "../assets/avatars/mattlevine.jpg",
  "date": "3:42 PM · Aug 22, 2026",
  "headline": "The post text, verbatim."
}

slot	embed	newspaper
mark	top right	left, as the masthead
identity	avatar + name over @handle, left	venue wordmark
date	below the text, over a hairline	top right, with the kicker
text	sans regular 21pt	serif bold 28pt
border	#cfd9de (X's own)	#ded7c7, radius 0.3em

name and avatar are optional — with no name the handle carries the slot alone rather than leaving a bold gap, and with no avatar the row simply starts at the name. Secondary text is #536471, X's own. Supply logo to use a real X mark; otherwise a bold sans X stands in.

Bluesky and Mastodon take the same layout. All three microblog embeds have one shape — avatar + name over handle at the left, mark top right, timestamp below the text — so this is a venue LIST (X, Twitter, Bluesky, Mastodon, Threads, LinkedIn), not a branch per platform. Only the mark and its accent differ, and the handle format is data rather than code: @user (X, Threads), @user.bsky.social, @user@instance.social. Every microblog ships its real mark inline. post-mark-svg in theme.typ carries the official path for X, Bluesky, Mastodon, Threads and LinkedIn, each filled with the platform's own colour, so no deck has to ship a logo asset. The non-X paths are the simple-icons set (MIT); X's is the official 300×271 mark. A caller-supplied logo still wins over all of them. The letter fallbacks (b., m, @, in) now only fire for a venue with no path at all.

X/Twitter is a venue, not a second function. The card suppresses the newspaper-only chrome for it — top rule, kicker, serif headline face, highlighter swipe — and takes handle: ("@elonmusk") beside the mark. Everything else, the stock table included, is shared.

Add a venue to the stocks dictionary in theme.typ rather than passing a one-off, so the next card for that outlet inherits it. stock: rgb("…") overrides per card when one genuinely differs.

Legibility does not constrain this choice — ink, dek and dateline land within ~1:1 of each other across every stock — so it is purely identity.

Step 3: the logo

Dark or full-colour, on a light card. Not the -white.svg variant; those are for dark backgrounds and are invisible here. Use wsj.svg, nyt-dark.svg, ft-dark.svg, abc-news-dark.svg.

IRON LAW: real vector logos only

If you catch yourself writing an SVG with <text> elements spelling out the publication name — stop. That is a placeholder, not a logo, and it ships with the wrong font, weight and spacing.

grep '<text' assets/logos/publication.svg && echo "FAKE — download a real logo"

Download from Wikimedia Commons, the brand's press page, or a logo repo. Wikimedia has SVGs for essentially every major publication; "I can't find one" means search harder.

Sizing needs no per-logo tuning: the function normalises by aspect ratio, so a narrow mark and a wide wordmark carry similar visual weight.

Step 4: render

#{
  let cards = json("../../data/headlines-NN.json")
  for card in cards {
    slide[
      #headline-card(
        venue: card.venue,
        date: card.date,
        headline: card.headline,
        quote: card.at("quote", default: none),
        logo: card.at("logo", default: none),
        phrase: card.at("highlight", default: none),
        kicker: card.at("kicker", default: none),
        stock: card.at("stock", default: auto),
      )
    ]
  }
}

One card per slide, and no === heading on it. Grid layouts truncate quotes and shrink logos below recognition; a heading eats the vertical space the card fills. Put any section header on the preceding slide.

Step 5: look at it

Compile, get the page from find-slide-page, render it, and read it. What matters: the logo renders and is dark enough; the swipe covers the intended phrase; nothing is clipped; no single orphaned word ends the headline or standfirst.

Fix widows in the JSON text, never in Typst — tighten the wording, or join the last two words with  . Never pad with filler to fix a widow.

Red flags — STOP

Symptom	Cause	Fix
Logo invisible	a -white.svg on the light card	use the dark/full-colour variant
Logo missing entirely	JSON path taken as relative to slides/	paths resolve from theme.typ: ../assets/logos/…
No yellow swipe	highlight is not an exact substring of headline	match curly vs straight quotes character for character
Card doesn't read as an object on white stock	border derived from the stock is near-white	the border is a fixed grey; do not re-derive it from newsprint
An FT card looks like every other card	venue missing from the stocks dictionary	add it
An X post wears a serif headline, a top rule or a yellow swipe	venue not spelled X/Twitter, so it took the newspaper branch	fix the venue string — never add a second card function
Dek is generic	summarised instead of quoted	use the publication's own standfirst
A date is invented	it wasn't in the source	omit the field; never fabricate one
<text> in the logo SVG	placeholder, not a logo	download the real one

Facts

• The dateline is the smallest text on the card, so it carries its own darker grey rather than the dek's mute, which lands ~5.3:1 on newsprint and washes out under projector gamma.
• Black on the yellow swipe measures ~13.7:1 — the highlight helps readability rather than hurting it, so spend it on the phrase that carries the point, never decoratively.