Live token tweaking, in plain Astro
Every visible element on this page is driven by an
--astro-* CSS custom property. Open the panel from the button
in the topbar and drag any slider — the change applies before the next paint.
Console API:
window.astro.toggleDesignPanel(). Storage prefix:
astro-example-tokens.
Cards (spacing + radius + surface)
Card A. Padding driven by
--astro-vsp-md / --astro-hsp-md, corners by
--astro-radius, background by --astro-color-surface.
Card B. Border by
--astro-color-muted.
Buttons (accent / primary)
Visit the about page to confirm token tweaks
persist across an Astro view-transition.
Visit the prose demo to see typography tokens.
Palette swatches
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Each swatch reads
--astro-palette-{n}. The cluster's
paletteCssVarTemplate decides the name — change it in
default-cluster.ts and the apply pipeline writes a different variable.