Dev
Dummy CSS Variable Set Generator
Starting a component library or design system means writing the same boilerplate every time: a :root block with colour tokens, spacing scales, type sizes, border radii, shadows, and transition timings. This generator produces that entire block in one click, with a custom variable prefix applied to every declaration. The Theme Type selector determines which token groups appear. Light generates primary and secondary colours, neutral backgrounds (#ffffff, #f8f9fa, #e9ecef), and text colours. Dark outputs the same structure with dark-mode backgrounds (#0d0d0d through #2a2a2a) and light-on-dark text values. Brand produces brand-primary, brand-secondary, gradient-start, and gradient-end tokens from a randomized but coherent colour palette. Minimal generates only a six-stop grey scale — useful for interfaces that derive colour from a separate theme layer. Full-system combines both light and dark sections in one block. Every theme preset also appends spacing (xs through xl), font sizes (sm through xl), font families, border radii (sm through full), three shadow levels, and three transition timings. The Variable Prefix field customizes the leading -- token: enter --app, --ds, or --brand and every declaration in the output uses it. Paste the output into a global tokens.css file and import it at the root of your project. No build step required — CSS custom properties are runtime values supported by every modern browser.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Select a theme type from the dropdown — choose light, dark, brand, minimal, or full design-system based on what your project needs.
- Enter a variable prefix in the text field that matches your project naming convention, such as --app, --brand, or --ui.
- Click the generate button to produce a complete :root block of CSS custom property declarations.
- Copy the output and paste it into your global CSS file, a dedicated tokens.css, or your design system's base stylesheet.
- Adjust individual token values as needed to match your brand colours, type scale, or spacing system.
Use Cases
- •Scaffolding a tokens.css file for a new React or Vue component library with a custom --ds prefix
- •Generating paired light and dark variable sets under the same prefix for CSS-based theme switching
- •Populating a Storybook global decorator with realistic spacing, colour, and typography tokens
- •Replacing hardcoded hex values in a legacy stylesheet with a structured --brand token set
- •Rapidly prototyping a client brand theme using the brand preset before a Figma handoff
Tips
- →Generate both a light and dark theme with the same prefix, then layer them using :root and [data-theme='dark'] selectors for instant theme switching.
- →Use the full design-system theme as a checklist — it reveals which token categories (elevation, motion, borders) you may have forgotten in your own system.
- →Name your prefix after your npm package scope (e.g. --acme if your package is @acme/ui) to keep tokens traceable back to their library.
- →After generating, run the output through a CSS linter like Stylelint to catch any token names that conflict with existing project variables before committing.
- →Pair the generated spacing scale tokens with a CSS Grid or Flexbox layout system so gap and padding values always reference the same scale, keeping vertical rhythm consistent.
- →For Figma-to-code workflows, match the generated token names to your Figma variable names — this makes token sync tools like Token Studio work with minimal remapping.
FAQ
what CSS properties does this generator output
The output always includes a spacing scale (xs, sm, md, lg, xl), font sizes (sm, base, lg, xl), font families for sans-serif and monospace, border radii (sm, md, lg, full), three shadow levels, and three transition timings. Colour tokens vary by theme: light and full-system add primary, secondary, and accent colours plus background and text tokens; dark adds dark-mode versions of the same; brand adds brand-primary, brand-secondary, gradient-start, and gradient-end; minimal adds only a six-stop grey scale.
how do I use CSS variables to switch between light and dark themes
Generate both themes using the same prefix, then place the light set inside :root and the dark set inside a [data-theme='dark'] selector or a @media (prefers-color-scheme: dark) block. Toggle the attribute on your root element via JavaScript or let the media query handle it automatically.
what prefix should I use for CSS custom properties
Use a short, project-specific prefix like --app, --ds, or an abbreviated brand name — avoid generic names like --css or --var that can collide with third-party libraries. A consistent prefix also makes your tokens easy to identify in browser DevTools.
why use CSS custom properties instead of Sass variables
CSS custom properties are live at runtime — you can change them with JavaScript, override them per component or media query, and re-theme instantly — whereas Sass variables are resolved at build time and fixed once compiled. That runtime power is what makes them ideal for theming and dark mode. The generator outputs native custom properties so you get those dynamic capabilities without a build step.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.