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 — Design system → 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.

Kirigami means cut and folded paper, and the images say so.

• The origami elephant is the mascot of the home page: a real elephant folded from green paper, cut out on a transparent background. It stands on a soft shadow drawn in CSS, so the same file works on the light and the dark palette.
• Screenshots are taken in the dark theme, at the size they will be shown, with the cursor out of the frame, and cropped to 16:9 (or 2:1 for a card). They sit on a paper sheet: slightly rounded corners and a lifted shadow, nothing else. No device frames, no browser chrome.
• Illustrations stay flat: folded paper, the one green accent and a touch of amber, and no gradients.
• Sizes go through the image autogenerator. A card picture is 800 by 500 (or 1000 by 500 for a 2:1 screenshot), a plugin thumbnail 800 by 450, and a wide screenshot 1200 pixels. The originals live in assets/images/ and are never served.

The design system page documents the tokens, the dark theme and the components these pictures sit in.

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.