Customize

Every value below is a CSS custom property.

Move a control and this page changes with it — it is styled by the same stylesheet you are tuning, so what you see is what your own pages will look like. Nothing here is a setting inside SuCSS: it is plain CSS you paste into :root.

Your choices are kept in this browser and follow you to the rest of the site. Reset puts everything back.

Controls

Colour Hue --hue 262 Saturation --sat 85%

Type Typeface Base size --base-size 1rem Line height --line-height 1.6

Layout and material Column width --max-width 860px Corner radius --radius 1.375rem Glass blur --glass-blur 14px

Your :root

Only the properties you changed are listed. Paste them after the stylesheet link and they win on specificity alone.

/* Nothing changed yet — move a control above. */

Preview

The whole page is the preview, but these are the pieces the accent colour reaches first.

A link

Stable MIT Zero dependencies

A switch

A field

Type is the loudest thing on a page. Set it first, then the colour.

Property	Default
`--radius`	1.375rem
`--glass-blur`	14px