CSS Design Token Generator

Define a set of design tokens — colors, spacing, font sizes, radii, shadows, or any name/value pair — and export them as CSS custom properties (--name: value), SCSS variables ($name), a JS object, or JSON. Add or remove tokens, pick a prefix (e.g. color-), and copy the result. Pairs with the Type Scale, CSS Grid, and CSS Named Colors tools. Everything runs locally in your browser.