Overview
A design-token exporter that turns colors, spacing values, border radii and a base font size into one :root block of CSS custom properties. Nine color tokens are editable by name and value, spacing and radius scales are typed as comma-separated pixel lists, and the typography tokens derive four derived sizes from your base. The result copies to the clipboard or downloads as tokens.css.
How It Works
Edit any of the default color tokens: each row has a color picker, a name field and a delete button, and the Add Color button appends a new row. Type your spacing scale and radius scale as comma-separated pixel values, and set the base font size between 10 and 24 pixels. The generated panel assembles a :root block with comment-separated sections for colors, spacing, radii and typography. Use Copy for the clipboard or Download to save a tokens.css file directly.
Step-by-Step Usage Guide
- Edit, add or remove color tokens with the picker and name fields.
- Enter your spacing and radius scales as comma-separated pixel lists.
- Set the base font size for the typography tokens.
- Copy the :root block or download it as tokens.css.
Technical Specifications & Standards
Color variables are named after your token names with a --color- prefix, while spacing and radius values are numbered by position: --space-1 through --space-N and --radius-1 through --radius-N, in the exact order you typed them. That positional naming is a real trade-off to understand: reordering the list changes which variable points at which value, so treat the emitted names as a committed API once other files consume them. The typography section derives four steps from the base with fixed multipliers: small at 0.875 times, large at 1.25, extra large at 1.5 and double at 2, all rounded to whole pixels. Custom properties cascade and inherit like any CSS value, so a token redefined on a subtree wins locally, and var() accepts a second argument as a fallback for tokens that may not exist yet.
Targeted Use Cases
- Bootstrapping a token file for a new component library.
- Sharing one palette between a stylesheet and design documentation.
- Standardizing spacing and radius scales across a codebase.
- Handing a ready-to-import tokens.css to a team or client.
Notes & Gotchas
- Freeze the order of spacing and radius tokens early, because the numbered variable names depend on it.
- Keep token names lowercase and hyphenated so they stay valid CSS identifiers.
- Import tokens.css once at the top level; redefining tokens further down the tree silently overrides them.
- Consider switching pixel values to rem in your own code if the design must respect user font-size settings.
Frequently Asked Questions
How are the spacing variables named?
Positionally: the first value becomes --space-1, the second --space-2 and so on, regardless of the pixel amount. Reordering the comma list therefore reorders which variable holds which value.
Where do the typography sizes come from?
Four fixed multipliers applied to your base size: 0.875 for small, 1.25 for large, 1.5 for extra large and 2 for double. Each result is rounded to a whole pixel and emitted as --font-size-*.
Can I download the tokens as a file?
Yes. The Download button saves the exact :root block shown in the panel as tokens.css, alongside the normal clipboard Copy button. Both reflect the current state of every field.
What happens if two color tokens share a name?
The generator emits both lines, and in CSS the later declaration wins for that variable name. Give every token a distinct name before copying so the output is unambiguous.