Forgelit

Design Token Builder

Generate CSS variables for colors, spacing, radius, and typography without hand-writing the boilerplate.

How to Use
  1. Pick a palette and adjust the naming prefix
  2. Choose spacing density and corner radius
  3. Check the live preview and contrast readouts
  4. Copy the generated CSS variables into your stylesheet or Webflow custom code

Note: All token generation happens locally in your browser.

Palette

Text on background -
Text on surface -

Preview

New project

Clean tokens, fewer mystery values.

Use the exported variables as a small design foundation for static sites, Webflow embeds, or client handoff docs.

Space 2 Space 4 Space 6

Generated CSS

Privacy

This tool runs entirely in your browser. No data is sent to any server.

Related Tools