GenCSS features
Six colours in.
A design system out
GenCSS writes the globals.css the rest of the toolkit reads. Everything in it is derived from a small set of inputs, which is why it stays consistent when you change one of them.
An OKLCH palette from a hex
Shades that stay the same colour.
Give it a hex and it derives the whole ramp in OKLCH, a perceptual space, so a tint gets lighter without drifting hue or turning neon. The chroma reductions toward the extremes are deliberate, and they are what stop pale steps looking radioactive.
- Five steps per palette, plus nine transparencies
- Perceptually even lightness across the ramp
- Status colours for error, warning, success and info
- Add your own palettes beyond the built-in six
A fluid type scale
One ratio, every size, no media queries.
Set a base size and a ratio for mobile and for desktop, and every step is computed and fused into a single clamp. The result scales smoothly between your breakpoints, and a container-relative variant does the same job inside a component.
- Every step computed from the same ratio
- One clamp per size, no breakpoint jumps
- A container-query variant for components
- Weights, leading and tracking scales alongside
Spacing that matches the type
The same reasoning, applied to the gaps.
Spacing is generated on its own base and ratio, then exposed as padding, margin and gap tokens. Because it is built the same way as the type scale, the rhythm of a page holds together at every width without anyone tuning it by hand.
- A fluid spacing scale from xs to 3xl
- Padding, margin and gap tokens on top of it
- Container and section defaults included
- Radius, shadow and z-index scales too
Two layers, on purpose
Remap a token and the theme follows.
Primitives hold the colour; tokens point at the primitives; your CSS only ever references tokens. Wanting the call to action to be the secondary colour is therefore one line changed, with no recalculation and no selector edits anywhere.
- Layer 1 primitives, Layer 2 semantic tokens
- Light and dark schemes generated together
- Honours the system setting or an explicit choice
- One remap re-themes the whole project
Buttons, links and forms
The components everyone rewrites, written once.
Button variants, link states, form controls, cards and a reset all come out of the same config. Each variant is defined once and emitted as filled and outline versions, so the set stays coherent instead of drifting as it grows.
- Button variants as filled and outline pairs
- Link, hover, visited and active states
- Form controls and focus rings
- A reset and an accessibility layer
Your edits survive regeneration
Generated blocks are owned. USER blocks are yours.
The file is split into generated sections and USER sections. Anything you add inside a USER block is preserved on every save, so you can extend the system without forking it and without being punished for regenerating.
- USER blocks in every section of the file
- Generated blocks rewritten cleanly on save
- Config comments record the source of truth
- A written guide for AI assistants editing the file
Ready to try GenCSS?
Buy it once and it is yours, 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.