GenCSS

GenCSS builds the design system the rest of the toolkit runs on. Give it a handful of colours and a type ratio and it generates a complete globals.css (an OKLCH palette with consistent shades and transparencies, a fluid type scale, spacing, buttons, links and forms) split into primitives and tokens so a single remap re-themes everything.

What GenCSS does

  • OKLCH throughout

    Shades and tints are derived in a perceptual colour space, so a light blue never turns neon on you.

  • Two layers, on purpose

    Primitives hold the colour; tokens point at the primitives. Change what a token points at and the theme follows.

  • Regenerates safely

    Your own additions live in USER blocks that survive every save.

See every feature in detail

Try GenCSS

It runs on your own machine, with your data in a file you can open. If it turns out not to suit how you work, tell us.