| Token | Used for | Example (blueprint) |
|---|---|---|
--bg | page background | #050912 |
--panel | code frames, inputs, hover fills, key caps | #0a1222 |
--hatch | the hatched margin, the footer mark | #0b1527 |
--line | block separation, grids | #131f36 |
--line-2 | frames, inputs, crosshairs, key-cap borders | #22365b |
--dim | captions, hints, secondary text | #6f86ab |
--fg-2 | body text, prose | #a3b5d3 |
--fg | headings and emphasis | #e8f0fd |
--accent | marks, the active state, primary buttons, keywords in code | #6cb4ff |
--ink | text on an accent fill | #050912 |
Code is highlighted by Shiki in its css-variables mode: the highlighter names the
kind of each token and tokens.css paints them with the active palette
(keywords and constants in the accent, strings and functions in the foreground,
comments dim), so a code block is monochrome in every theme with no overrides.