Live token tweaking, in plain Astro

Every visible element on this page is driven by an --astroexample-* CSS custom property. Open the panel from the browser console and drag any slider — the change applies before the next paint.

Console API: window.astroExample.toggleDesignPanel(). Storage prefix: astro-example-tokens.

Cards (spacing + radius + surface)

Card A. Padding driven by --astroexample-spacing-md, corners by --astroexample-radius, background by --astroexample-color-surface.
Card B. Stack gap driven by --astroexample-spacing-lg; outline by --astroexample-color-muted.

Buttons + links (accent / primary)

Try the about page to confirm token tweaks persist across an Astro view-transition. Visit the prose demo to see typography and spacing tokens in action.

Palette swatches

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Each swatch reads --astroexample-palette-{n}. The cluster's paletteCssVarTemplate is the only thing that decides this name — change it in default-cluster.ts and the apply pipeline writes a different variable on the next palette tweak.