Specimen page for the Bristlenose type system: the 8-stop size/line-height scale, the 4-tier weight ladder, the five primary left-hand sidebars rendered at their default width with representative data, and a per-style spec sheet for redrawing in Figma.
Each card shows one specimen rendered with real markup against the live theme CSS. Sidebars use the same classes the React components emit (.toc-heading, .toc-link, .session-entry, .signal-entry) so behaviour and proportions match production.
Paired font-size + line-height tokens. Line-height decreases as size increases (Bringhurst): large letterforms anchor visually and need less leading. All sizes in rem; the rendered px assumes the 16px browser default.
| --bn-text-micro --bn-text-micro-lh |
9.6px · 1.3 | DRAG · 12 · × |
| --bn-text-badge --bn-text-badge-lh |
11.5px · 1.35 | badge text · group totals · 247 |
| --bn-text-caption --bn-text-caption-lh |
12px · 1.4 | 12 Feb · 1h 03 · footnote · timestamp |
| --bn-text-label --bn-text-label-lh |
13px · 1.45 | UI chrome · sidebar entries · table cells |
| --bn-text-body --bn-text-body-lh |
15px · 1.5 | Quote text and transcript segments — the participant voice. "I just couldn't figure out where to click next." |
| --bn-text-heading --bn-text-heading-lh |
18px · 1.3 | Section heading · card title |
| --bn-text-title --bn-text-title-lh |
22px · 1.25 | Page title · h1 |
| --bn-text-display --bn-text-display-lh |
28px · 1.2 | 347 |
Inter Variable, four tiers. Static-font fallbacks (Windows 10 Segoe UI offline) snap 420→400 and 490→400 — structural cues still carry hierarchy.
| --bn-weight-normal | 420 | Body text, descriptions, quote content, secondary labels. |
| --bn-weight-emphasis | 490 | Headings, section titles, sidebar headings, badge text. |
| --bn-weight-starred | 520 | Starred quote body — pops above emphasis, below strong. |
| --bn-weight-strong | 700 | Page h1, delete × glyphs, accept/deny ✓/✗, bar counts. |
All five sidebars share --bn-sidebar-width: 280px as their default width and load organisms/sidebar.css (plus sidebar-tags.css for Tags). Hierarchy is built almost entirely from --bn-text-label (13px) plus weight contrast — Sessions and Tags reach down to caption/badge for metadata, and only Signals reaches down to micro for compact chips.
One card per named typographic role — the unit a designer redraws in Figma as a Text Style. Each card pairs a real rendering with the exact CSS spec the production code emits. Family Inter unless noted; SF Mono for monospace; colour --bn-colour-text unless noted. Letter-spacing is the CSS default (0) unless listed.
.toc-heading), sidebar titles..toc-link), nav entries. Underline on hover..toc-sub-heading)..tag-sidebar-subtitle)..codebook-author), provenance.A reader's map of which size token surfaces in which sidebar. Anything not listed here is currently unused at sidebar scale — the larger stops (body, heading, title, display) live in the centre column (quote cards, section headers, dashboard hero numbers).
| --bn-text-micro | Signals badge label |
| --bn-text-badge | Session ID badge (#1, #2…), speaker code badge (m1, p1…) |
| --bn-text-caption | Session date · duration · Signals sub-heading (uppercase) |
| --bn-text-label | Section heading · link text · entry name (Sessions/Quotes/Codes/Signals primary) |