Internal · Testbed
evergreen
Widget Specimens
A storybook-style catalog of reusable content widgets, each shown with the smallest realistic example that exercises its layout.
This page exercises the site's reusable content widgets: authored blocks that carry meaning beyond ordinary prose. The kitchen sink tests typography; the diagrams page tests visualization primitives; this page tests the little editorial machines that make an article scannable.
Use this page as the first stop when changing widget CSS, filters, or authoring conventions. A widget should appear here before it becomes common in real articles.
Coverage
This page directly exercises the reusable article widgets. Heavier widgets whose output depends on page-level data, generated manifests, or special article modes are listed with their canonical specimens.
| Widget family | Canonical specimen | Notes |
|---|---|---|
| Article openers | This page | epigraph, objectives, pullquote, keystone. |
| Callouts | This page | note, warning, important, eli5. |
| Marginalia | This page | Sidenotes, margin notes, arrow notes, sticky notes, margin figures. |
| Timelines | This page, Josfi, Watchdog | Plain dots and icon markers share the same primitive. |
| Scannable facts | This page, Work, Watchdog | factsheet, statband, dateline, generated metrics. |
| Layout helpers | This page | twocol, fullwidth, marginfigure, inline figures. |
| Language helpers | This page, Kitchen sink | lang-*, dir-rtl, and verse blocks. |
| Icons | This page, Kitchen sink | Phosphor icon font, link icons, timeline markers. |
| Diagrams and viz | Diagrams | Static Typst/SVG and interactive viz islands. |
| Research-paper mode | Sample paper | Authors, affiliation, abstract, definitions, theorems, lemmas, algorithms. |
| Gallery | Photos | Manifest-driven photo grid and lightbox. |
| CV contact strip | CV | Page-class-specific contact widget. |
| Evidence widgets | Watchdog | JSON-driven adopters, citations, sectors, and tables. |
| Blog index | Blog | Generated postlist and year-grouped timeline. |
| Hero | Home | Landing-page-only hero register. |
Article Openers
Make the important thing visible, then make everything else quiet.
— Specimen text
The page should teach the eye where to land.
Widgets should carry structure, not decoration.
Callouts
Note
A note adds useful context without changing the argument. It should feel like a hand on the reader's shoulder, not an alarm.
Warning
A warning marks a real footgun: something a reader could plausibly get wrong and regret later.
Important
An important callout is for a load-bearing constraint. If the reader remembers only one thing from the section, it should be this.
Imagine the page as a guided walk. Prose is the path; widgets are signs at forks in the path.
Marginalia
This sentence carries a sidenote11 Sidenotes are the numbered marginal notes generated from ordinary Org footnotes. They must remain readable beside dense widgets. and an ◆arrow note.
Arrow notes are for exact associations: a word, a phrase, or a specific line of reasoning.
Plain margin notes are quieter. They sit near the relevant paragraph but do not require an exact anchor.
Sticky notes are foreign objects. Use them rarely, when the note should feel placed on top of the page rather than set into it.
Timelines
- Published — an icon marker via the curated
ph-<name>class. - Ligature marker — the icon name as text content in a bare
phspan. Any of Phosphor's ~1,500 glyphs work this way (the full font ships andligais on), with no CSS to add — prefer this over extending the curatedph-<name>allowlist in_base.scss. - Plain marker — the old dot remains the fallback when no icon is authored.
Two ways to place a Phosphor icon: the curated ph-<name> class (a fixed allowlist in assets/scss/_base.scss, kept for the handful used in chrome), or ligature mode — a bare <span class"ph">icon-name</span>= with the icon's name as its text content. Ligature mode reaches the whole icon set without touching CSS, so reach for it in article bodies; keep aria-hidden on decorative markers.
Scannable Facts
- Component
- Widget specimen page
- Purpose
- Keep authored blocks visually testable.
- Source
- Org special blocks and small HTML islands
- Status
- Internal testbed, not a publication
- 12 widget families
- 3 callout strengths
- 1 shared timeline primitive
2026 · Design-system fixture
The dateline is a small contextual label. On the CV it introduces a role; in articles it can label a dated entry without pretending to be a heading.
Layout Helpers
Before. Related details are scattered through prose. The reader has to keep the comparison in memory.
After. Parallel details sit side by side. The comparison becomes a shape, not a chore.
This paragraph has a margin figure beside it. The body text should keep its measure, while the figure uses the gutter without colliding with sidenotes or ordinary marginalia.
Inline figures are useful when the illustration is small enough that sending it to a full-width figure would interrupt the argument. The left and right variants should preserve a readable line length and clear themselves cleanly on narrow screens.
The second paragraph exercises the right-floating variant. The text should wrap beside the figure and then return to the normal body measure after the figure's box is cleared.
Language Helpers
अयुतद्वयविष्कम्भस्यासन्नो वृत्तपरिणाहः ॥
Icons
Colophon · Resume PDF · GitHub
- link
- copy
- download
- metric
Specialized Widgets
Some widgets need their own full specimen pages because their state, data, or page register is large:
- Diagrams exercises static Typst figures and interactive
vizislands. - Sample paper exercises the paper register: authors, affiliation, abstract, numbered sections, definitions, theorems, lemmas, and algorithms.
- Photos exercises the gallery and lightbox.
- Watchdog exercises evidence tables, citation timelines, sector tiles, and metrics.