Components
Every figure below is sample · rev 01
The parts every terminal screen is built from, each shown in the states it actually takes. Nothing here is a product statistic — every number on this page is invented sample data, and every panel carrying figures is chipped Sample with its n printed.
Controls
Two buttons only. Ink fill carries the single primary action on a screen;
the hairline carries everything else. Fields sit on --card with a 1px rule and
take a gold underline on focus.
.btn .btn-dark. One per screen. Mono 12px, .13em tracking,
16×24 padding. .btn-sm drops to 11.5px / 13×20. Active is a
1px press, not a darker fill — nothing in this system goes below --ink.
Disabled is --card-2 ground with --mute type.
.btn .btn-line. Secondary and destructive-adjacent
actions. Border #1B1815, transparent ground, warms to #D6CEBE
on hover — both taken from the landing. Active presses; it does not recolour.
Label is a microlabel above the field, never a floating placeholder. Focus = ink border plus a 2px gold inset underline.
Native <select>, appearance stripped, chevron drawn
as a data-URI so no image loads.
Square track, square knob — no pill, no shadow. Label sits to the right in mono.
Mono microlabels on a 1px rule. Active takes a 2px ink underline —
gold is reserved for the rail and for chart marks. The full ARIA tab pattern is part of
the component: one role=tabpanel, aria-controls on every tab,
a roving tabindex, and left/right arrow traversal. A disabled tab uses
aria-disabled, never the HTML disabled attribute, so it stays
reachable and announceable.
Overlay — the live path drawn over its ranked precedent.
Marks & chips
Chips are mono, uppercase, 10px, hairline-bordered. They label provenance and status — never decoration. Sample is mandatory on any panel showing invented figures.
SAMPLE and PRO are the two that gate meaning: one says the numbers are not real, the other says the panel is paywalled.
Positive #2E5E3F, negative #7A2C25. Both pass
AA on cream. Never red/green from a stock palette.
Two cuts, and the tracking differs. .micro is mono 11px
at .17em — fixed by the tokens card and the landing, and the single most
repeated unit in the system. .micro-mute is 10.5px at .15em. Both uppercase.
Kicker = 5px gold dot + .micro, used above every section headline.
Data surfaces
Panels, tables, readouts and sparklines. Numbers are always mono and tabular; labels are Archivo. Every surface below carries a SAMPLE chip because every figure in it was invented for this card.
--card ground, 1px --rule border, 20–24px
padding. Microlabel title left, SAMPLE chip top-right, footnote under a hairline.
Mono 12.5px numbers, Archivo 13.5px labels, 1px row rules, 16px row padding. Rows warm on hover; the last row drops its rule.
| Event | Class | t₀ | +1d | +5d | +20d | Window |
|---|---|---|---|---|---|---|
| Sanctions restored on Iran | Energy · sanctions | 06 Aug 2018 | +1.42% | +2.10% | −3.86% | n = 21 |
| FOMC policy statement | Macro FX · rate decision | 16 Mar 2022 | +0.55% | −1.08% | +2.74% | n = 21 |
| OPEC+ holds the quota | Energy · supply | 04 Dec 2023 | −2.31% | −4.02% | −6.18% | n = 21 |
| Transit halted, Bab el-Mandeb | Geopolitical · corridor | 12 Jan 2024 | +3.07% | +1.65% | +0.42% | n = 21 |
| Refinery outage, US Gulf | Energy · outage | 22 Feb 2025 | +0.88% | +1.21% | −0.35% | n = 21 |
Mono number, microlabel key above, n label below — the n is not optional. Serif variant is for a single hero figure only. A readout never floats bare: it sits in a panel carrying the SAMPLE chip, because four figures with no chip read as product statistics.
Inline SVG only — no canvas, no library. Ink path 1.8px, gold t₀ hairline with a 3px gold dot on the event close, hairline baseline.
Path stays ink in both directions. Colour carries the printed value in the cell beside it, not the line.
The rail
The 248px rail is fixed and identical on every screen — same wordmark, same nine items, same order. Only the active item changes.
Mono 10.5px, .15em, uppercase, 12px padding top and bottom. Inactive is
--mute; active is --ink plus a 2px gold left rule. Hover lifts to
--ink-2 and nothing else moves.
Left rule 2px transparent
Left rule 2px #C0995D
Signed-in address in mono 10px above a hairline pill. Sits under a 1px
rule at the bottom of the rail, pushed down with margin-top:auto. The pill is
mono 10px / .14em with border-radius:999px — it and the kicker dot are the
only two rounded shapes the system permits, so the radius is not optional.
Sample data throughout — no figure on this page is a measured product statistic