Professional CSS Design Systems Without the Hand-Writing
Connect your CSS file, adjust settings visually, and GenCSS writes a production-ready globals file with a clean two-layer token architecture. Own your CSS, don't rent it from a framework.
The foundation of your next design system
OKLCH Colour System
Palette-based, perceptually uniform. Generates shades, tints, and transparency variants automatically from a single hex pick.
Fluid Typography
Clamp-based type scale that smoothly transitions between device and container sizes. No media queries needed.
Fluid Spacing
A full spacing scale that also clamps between breakpoints and container queries, ensuring consistency across all component sizes.
Two-Layer Architecture
Primitives (raw values) and semantic tokens (meaning). Change a palette colour and the whole system updates.
Native Dark Mode
Colour scheme tokens with prefers-color-scheme and data-theme support baked in from the start.
Component Sections
Buttons, forms, cards, and links, all configurable and generated into the same production-ready file.
CSS Studio
Visual builder for one-off assets: gradients, background effects, and typography treatments. Copy and paste in seconds.
No Lock-in
Outputs plain CSS. No runtime, no dependencies, no build step. Take your file and use it anywhere, in any stack.
Stop renting your CSS, start owning it
Not tied to any ecosystem
Tools like ACSS and Tailwind are deeply coupled to their environments. GenCSS outputs a plain CSS file that works in any stack, any editor, any host. No builder required, no Node pipeline, no class soup in your HTML.
The CSS file is the source of truth
GenCSS reads and writes a real file you own. It's not a design tool or a component library — it generates the foundation that your components sit on top of.
Intuitive and Easy to use UI
Manage your global CSS decisions using the sophisticated GenCSS User Interface. With colour pickers, input fields, and selection dropdowns tied to your primitive variables, creating your global CSS framework is easy. Everything is converted to raw CSS automatically.
Live context preview
The preview scaffold demonstrates every token in context so you can see the actual effect, not just a colour swatch. Adjust settings and see the real browser preview update in real time, before you commit to your global file.
Preserve your custom blocks
Every section in the UI offers a custom CSS input, so you can globalise beyond the rich offerings of the GenCSS GUI. GenCSS respects your hand-written code while managing the system boilerplate.