All documentation

GenCSS documentation

How to use
GenCSS

Generates the globals.css every other app reads: an OKLCH palette and a two-layer token system, from six colours.

Getting started

Install it, find your way around, and do the first useful thing.

Generating your first globals.cssThe inputs GenCSS needs, what comes out, and where to put it.

Guides

How to do each job, one page at a time.

Choosing a paletteHow one hex becomes a five-step ramp, why the tints lose chroma on purpose, and how to check a pairing passes.
The type and spacing scalesHow a base and a ratio become a set of fluid clamps, and the container-relative variant.

Reference

The details worth looking up rather than remembering.

Editing a generated globals.css safelyWhich parts of the file are yours, which are overwritten on every save, and where to put an addition so it survives.

Looking for what it does rather than how to use it?See GenCSS.