Our story
One brand color in, a whole set of design tokens out.
I'm Johnny Mobley. I started building systems for other people in 2000, when I was 16, and I've been doing it ever since. Along the way I automated most of my own work, and the tools I built for myself became these companies. Each one runs on rules I wrote down, not on paid AI calls, which is why it can cost so little.
Every new site needs the same groundwork: a range of shades for the brand color, a spacing scale and a type scale, written as CSS variables. I kept doing it by hand across my own sites, so I wrote it down once.
Pick a color and up to three words for the feel (minimal, bold, airy and so on). The page works out a 10-step color scale, spacing and type sizes, and lets you download them as CSS or JSON. It all runs in your browser; nothing is sent anywhere.
What works today
- Turns one brand color into a 10-step color scale, plus a spacing scale and a type scale picked by the words you choose
- Downloads the tokens as a CSS file or a JSON file, or copies the CSS
- Runs entirely in your browser; nothing you type is sent to a server
What it doesn't do yet
Tokens Studio still does things SingularityUI doesn't:
- Syncing tokens into Figma.
- Pushing tokens to a Git repository.
- Themes (light, dark, brand variants) kept in step with each other.
- Shared projects for a team.
What it costs
| What you get | Price | |
|---|---|---|
| Tokens Studio Team, billed yearly | The Figma plugin's paid features (Git sync, multi-theme tokens, on-canvas docs) and their Studio platform, with 5 projects. Their free plan covers one project and one editor. | €39/mo |
| SingularityUI | The generator above, no account needed. | Free |
Tokens Studio's price is from their pricing page as of October 29, 2026. Prices change, so check theirs before you compare.
Open the token generator— Johnny