Turn a colour and spacing scale into working CSS variables
Enter your colours, spacing scale, and type sizes, and this tool builds them out into a structured set of CSS custom properties, named and grouped. It handles the repetitive part of setting up a design system so you can focus on the decisions that actually need a designer. The output is a starting point, so check the naming and values suit your project before you commit to them.
Building a design token system with CSS Variable Architect
CSS Variable Architect turns a handful of base values, colour, spacing, type size, into a full set of CSS custom properties you can drop straight into a stylesheet. This guide is for anyone building or maintaining a design system who wants variables that hold together under real use. By the end you'll know how to set up your base tokens, generate the scale, and override it safely for components and themes.
-
Set your base tokens
Enter the core colours, spacing units and type sizes the rest of the system will scale from.
-
Generate the variable scale
Let the tool expand those base values into a structured, consistently named set of CSS custom properties.
-
Override and apply in context
See how to scope a variable to a single component or theme without breaking the inheritance it relies on.
CSS Variable Architect
Pick a few base values and get a ready to paste CSS custom property block. Everything updates live in your browser, nothing is sent anywhere.
Preview card
This card uses the generated surface, text, border and radius tokens.
Build your CSS variable system without leaving the browser
CSS Variable Architect takes a set of design values, colours, spacing units, type sizes, and turns them into a structured set of CSS custom properties ready to drop into a stylesheet. It's built for anyone maintaining a design system who would rather not name and re-name variables by hand every time a token changes. The tool suggests groupings and fallbacks based on common conventions, so it's worth checking the output against your own naming scheme before it goes anywhere near production.
No sign-up needed · Works in your browser · Free to use
Popular Tools
CSS Variable Architect
An interactive CSS Variable Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Variable Architect
True-Contrast Smart Palette
An interactive True-Contrast Smart Palette, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / True-Contrast Smart Palette
CSS Unit Converter (px / rem / em / vw / vh)
An interactive CSS Unit Converter (px / rem / em / vw / vh), free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Unit Converter (px / rem / em / vw / vh)
Aspect Ratio Calculator
An interactive Aspect Ratio Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / Aspect Ratio Calculator