Design

Warm paper, near-black ink, one deep-green accent — decided once, early, and never redecided per page. Every color below is a @kirigami/canva conf token: a CSS custom property, so this whole page (and the whole site) repaints correctly in dark mode with nothing hand-toggled. Try the switch in the header.

None of these eight names are this site's invention — they're conf's own token set ($bg, $surface, $ink, $accent, …), the same eight every Kirigami project starts from and overrides through @forward "@kirigami/canva/conf" with (...). This page is what that override looks like once it's actually been used — Config → conf tokens has the full option list, including the dark-palette counterparts ($dark-bg, $dark-ink, …) this site's own dark mode is built from.

Three roles, three families, all embedded locally (no Google Fonts request): Quicksand for headings, Roboto Flex for body copy, JetBrains Mono for labels, nav numbers and code. All three are declared once, in _conf.scss's $fonts map — `conf` handles the @font-face (variable-font ranges included) and the two role variables (--font-heading / --font-body); --font-mono is this site's own third role, since `conf` only ships the first two.

Five small, generic patterns that kept turning up identically across Kirigami sites — lifted into @kirigami/canva's styles/main so nobody has to re-implement them. Opt-in: @use "@kirigami/canva/main"; — every one of them is conf tokens underneath, so light/dark comes for free. Each is used for real elsewhere on this site (linked below its demo), not just shown here in isolation.