Getting started
Generating your first globals.css
The inputs GenCSS needs, what comes out, and where to put it.
GenCSS turns a small set of inputs into a complete stylesheet: a colour system, a type scale, spacing, and the component styles most projects rewrite from scratch every time.
What it asks for
- Six colours — primary, secondary, tertiary, accent, base and neutral. You can enable fewer, and you can add palettes of your own beyond these.
- A type base and ratio, separately for mobile and desktop.
- A spacing base and ratio.
- Breakpoints — the widths the fluid scales interpolate between.
Everything else is derived from those.
What comes out
One file, globals.css. No runtime, no build step, no dependency on GenCSS or on
anything else. It is plain CSS with custom properties in it, and it keeps working
whether or not you keep the app.
Inside, it is organised in two layers and split into generated and user-owned sections. Both of those matter and both have their own page.
Where to put it
Wherever your project loads global styles from — src/styles/globals.css in an
Astro project, imported once from the root layout.
Import it before your own stylesheets so your rules can reference its tokens.