Skip to content
Recursica

Theme Forge

Theme Forge is a clean, WYSIWYG visual composer to manage all of your design system variables, scales, and modes in one place—completely bypassing Figma’s painful default variable editor.

It generates standards-based, portable design tokens and themes that are ready to be exported for consumption by coded UI adapters or downstream Figma files. Best of all, you can push theme updates directly to GitHub to automatically generate a Pull Request—eliminating the need to manually sync assets or file Jira tickets to get design updates into code.

Launch Theme Forge

View on GitHub

The pain of variable management

If you have ever built or maintained a multi-theme design system, you know the bottlenecks:

  • Figma’s Variable Editor is Sluggish — Editing hundreds of variables, modes, and aliases in a tiny modal is error-prone, tedious, and frustratingly slow.
  • The Jira Ticket Sync Loop — When design changes a color or spacing step, it starts a cycle of file exports, manual syncs, and developers copy-pasting values. Design updates shouldn’t require developers to write manual tickets.
  • Theme Fragmenting — Light and dark themes drift apart, contrast ratios are hard to test visually, and variables break when brought downstream.

How Theme Forge solves it

Theme Forge acts as the single source of truth for your design tokens, sitting between design planning and product code.

  • 1. WYSIWYG Variable Control — Manage all your color palettes, typography styles, spacing steps, border-radii, and elevation scales in a visual playground. See your changes updated in real-time in context, without jumping between menus.
  • 2. Auto-Generate GitHub Pull Requests — When you make updates in Theme Forge, you don’t need to hand off a file. Push your changes directly from the browser to your GitHub repository. Theme Forge automatically generates a Pull Request with updated code assets, letting developers merge design changes instantly.
  • 3. Native JSON & CSS Exports — Theme Forge exports standard W3C DTCG-compliant JSON and vanilla CSS variables. These are immediately ready for downstream consumption by Figma UI Kits, Tailwind, Mantine, or custom React/Vue UI adapters.

Security & portability first

We believe your design tokens belong to you, which is why Theme Forge is designed with a strict client-side architecture:

  • Zero Data Storage (Client-Side Only) — Theme Forge does not track, collect, or store your design system data on any server. All processing happens entirely in your browser.
  • 100% Free & Open Source — Distributed under the MIT license on GitHub.
  • Self-Hostable — You can clone the repository and run Theme Forge completely offline, behind your company’s firewall, or on your own internal servers.

Core features

  • Visual Palette Editor — Build custom light and dark color scales with automated color mapping and contrast-checked foregrounds.
  • Typeface Management — Configure primary, secondary, and tertiary fonts, mapping them seamlessly to your typeface variables.
  • Dimensional Scales — Define responsive spacing steps, border-radii, and elevation offsets visually.
  • Dynamic Theme Injection — Preview and test customized theme CSS live on components before exporting.