Kit
Every primitive, in the current theme. Switch themes in the top bar and everything on this page re-skins from tokens alone. If a component needs a colour that is not here, the token is missing, not the component.
Themes
src/design/tokens.json- Terminal · darkAmber on black. The desk at 06:00.
- Phosphor · darkGreen P1 tube. A 1982 scope with the room lights off.
- Cockpit · darkGrey panel, white needles, cyan cues. Instruments, not decoration.
- Bridge · darkBlue-white phosphor and brass. The CIC plot, first light.
- Paper · lightBroadsheet stock, one red. For reading, not trading.
- Glass · lightLight, layered, tactile. The phone in your hand.
Colour roles
never hard-code a hex in a component- --bg
- --bg-2
- --bg-3
- --line
- --line-strong
- --ink
- --ink-2
- --ink-3
- --accent
- --up
- --down
- --warn
- --alert
Type
ui · data · readThe quick brown fox jumps over the lazy dog.
Interface, headings, labels.
74.21 ▲ +0.48 (+0.65%)
Numbers, tables, symbols. Tabular in columns.
Armies move by sea. Not the sharp end — the sharp end flies.
Long-form reading.
Controls
Surfaces
bezel · inset · glowData blocks
live from /apiChart
Quote board
Stat tiles
World clocks
Plot
Schematic plot — Gulf of Oman (SE) to the Gulf (NW) · positions illustrative
Theme contact sheet
the same three blocks in all six themes — compare, do not take on trustEach tile below is scoped with its own data-theme, so the tokens, the chrome dials and the series palette are exactly what that theme ships. Two things do not survive the nesting and have to be judged on the real page: --density (rem resolves against the document root, not the nearest ancestor) and the CRT scanline and vignette overlays, which are fixed to the viewport.
In-article kit
src/content/mdx.tsxBody copy in the reading face. The factbox floats right on wide screens and stacks on phones.
A pull quote, set large, with a rule above and below.