toolbox

Start here

For most work you only need two things: the .stage class for any region that should paint a surface, and the --fg knob to tune ink contrast on text and icons.

--bg is the third tool, and it earns its place — but use it sparingly. It paints a single element directly, which is right for a lone tag or an accent block, and wrong for anything a .stage would carry better. If you find yourself setting --bg on several nearby elements, reach for a .stage instead.

Rule of thumb: regions get .stage, text gets --fg, and --bg is for the occasional element that needs to paint on its own.

--bg  surface presence, 0 → 1

Higher values paint a louder, more chromatic surface. Default 0 (transparent on the parent). Use it for single painted elements — a tag, an accent — not for content regions.

<span style="--bg: 0.8">loud tag</span>

--fg  ink contrast, −1 → 1

Negative values are neutral ink (body, secondary, captions). Positive values are chromatic ink (accents, links, emphasis). This is the knob you reach for most.

<span style="--fg: 0.8">chromatic accent</span>

Hue

Three controls, all inheriting. Pick the right one for the intent.

<:root style="--hue: 18">                  <!-- brand, page-wide -->
<div style="--hue-shift: 200">…</div>     <!-- relative rotation -->
<div style="--hue-lock: 145">…</div>      <!-- absolute, overrides -->

Semantic helpers

Built-in --hue-lock shortcuts for the conventional states.

<span class="tag suc">success</span>
<span class="tag inf">info</span>
<span class="tag wrn">warning</span>
<span class="tag dgr">danger</span>
<span class="tag bw">neutral</span>

Borders

Two derived border colors. They follow the element's current --bg and adapt to theme.

Don't assign these directly. They derive from the element's --bg; overriding desyncs them from their surface.