CUSTOMIZER
The customizer isn't a page anymore — it's a layer. Open the TUNE panel from any page, turn a dial, and the entire site recomposes and remembers. This page documents what each control rewrites.
or the floating TUNE button, bottom right — it's on every page.
01 — What the dials rewrite
Every control maps to CSS custom properties on
:root or a data attribute on <html>.
Nothing is page-local: change it once, it holds across the whole
site and across visits (saved to your browser, nowhere else).
THEME
Light, dark, or follow the
system. Dark is layered grays — page, card, and overlay each
get their own tier. data-theme
STRUCTURE
Lines boxes everything in
ink; soft builds from shades and whitespace; min is negative
space only. data-structure
CORNERS
One radius token, 0–16px.
Sharp is the brutalist default; everything from buttons to
sheets follows it proportionally. --radius
TYPE
Six monospace faces, base
size, modular ratio, bold weight, tracking, leading. The whole
scale recomputes. --font-mono, --step-*
ICONS
Lucide, Tabler, Phosphor, or
Material Symbols — one canonical vocabulary, swapped live.
data-icon
EXPORT
COPY CSS hands you the fonts
link and the resolved :root tokens — plain CSS,
ready for any project.
02 — Your theme, right now
This readout tracks the tune panel live. It's also proof: the page you're reading is rendered with these exact values.
Specimen — set in your theme
MONOCHROME
Constraint is the brief.
Strip away color and what remains is the design itself. This paragraph tracks your base size, leading, and tracking — read a few lines and trust your eyes over the numbers.
Secondary text steps down once and goes muted. Captions and metadata step down twice.
Fields follow the structure and radius dials.
Take it home.
COPY CSS exports your exact theme as a Google Fonts link plus a
resolved :root block — no build step, no framework,
no MONO required. Paste it anywhere monochrome is welcome.