Skip to content
Recursica

Theme Forge

Theme Forge is the editor for a Recursica design system’s tokens: colors, type, spacing, corner radius, elevation, and light and dark mode. Every change shows up on real components as it’s made, with no need for Figma’s variable editor.

A finished theme exports as standard design token files, or goes to GitHub as a pull request. A developer reviews and merges it like any other change, so nobody has to copy values by hand or file a ticket.

Launch Theme Forge

View on GitHub

The problem Theme Forge solves

Anyone who has kept a multi-theme design system going knows where it hurts:

  • Figma’s variable editor is slow. Editing hundreds of variables, modes, and aliases in a small dialog is tedious and easy to get wrong.
  • Changes travel by ticket. A new color means exporting files, syncing them by hand, and a developer copying values across.
  • Themes drift. Light and dark fall out of step, contrast is hard to check by eye, and variables break on the way into code.

Theme Forge in practice

Theme Forge holds the one copy of a design system’s tokens. Design and code both read from it.

  • Edit visually. Change palettes, type, spacing, corner radius, and elevation and see the result on components straight away.
  • Send changes as a pull request. Changes go from the browser straight to a code repository instead of being handed off as a file.
  • Export standard files. W3C DTCG JSON and plain CSS variables, ready for the UI adapters, the Figma Kit, or any tool that reads design tokens.

Privacy and ownership

  • Nothing leaves the browser. Theme Forge doesn’t store or track design system data on a server. All work stays in the browser.
  • Free and open source. MIT licensed, on GitHub.
  • Self-hosted. Theme Forge can run offline, behind a company firewall, or on a team’s own servers.

Editable tokens

  • Palettes: light and dark color scales, with text colors checked for contrast.
  • Type: primary, secondary, and tertiary fonts and how they map to the type styles.
  • Spacing and shape: spacing steps, corner radius, and elevation.
  • Live preview: try a theme on components before exporting it.