Product
TokenStyles
A browser-based design-token editor, and the starting point for a design system. Tune a theme against a live full page, then export production-ready tokens in ten formats at once.
I designed and built it myself, with AI.
The editor and its marketing site · One codebase, roughly 39,000 lines · Free to edit, $19 to export · Live at tokenstyles.com
14
Themes
Designed and WCAG-checked.
~163
Tokens
Generated from one function.
10
Export formats
In a single download.
11
Control panels
To tune a theme against a live full page.
Zero accounts, zero tracking scripts, zero stored designs.
The TokenStyles homepage demo: the real editor, running a scripted sequence of real adjustments. Nothing is faked, so nothing can disappoint. Try it at tokenstyles.com.
The problem
The first real chore sits right at the start
The people this is for are starting a design system, not learning what one is. Once the palette, type scale and spacing are decided, someone still has to get them into Figma, Tailwind, plain CSS and AI tooling.
- Five or more files saying the same thing in five dialects
- Files maintained by hand, drifting apart the moment one changes
- Contrast checks that skip translucency, and pass what fails in the browser
- A tool that ships components becomes a framework you have to adopt
The solution
TokenStyles removes that one chore
It is the starting point for a design system, not a design system builder, and its copy assumes you know the vocabulary.
- One complete token set, in every format at once
- All generated from one map, so they can never contradict each other
- Translucent surfaces composited before contrast is measured
- Something you drop into any stack, not a framework to adopt
Takeaway: It ships the values, not the components, and that line is load-bearing.
Insight
The whole product hangs on one rule
There is a single source of truth, and no separate path computes the preview one way and the file another.
- The editor's state
- One token map
- The preview and every export
Takeaway: One path means the preview is a promise.
Decisions
What I decided, and what it cost
One function is the only source of truth
Instead of: Let the preview and each export format compute independently, which is faster to ship one format at a time.
Cost: Every feature has to route through that map. The one time a preview stylesheet quietly went around it, with a responsive block that hard-replaced nine tokens and forced the headings with !important, the tool's own type controls stopped working at some widths, and the central promise was silently false for weeks. A preview that does not obey the system is worse than no preview.
Contrast as an output, not a warning
Instead of: Show a red badge in the UI when a pair fails, which is what every other generator does, and stop there.
Cost: More to build, and it commits you to being right. All 14 built-in themes are checked against this before they ship.
Generate on the server, then rewrite the privacy policy
Instead of: Keep generating in the browser, which sends nothing, and soften the privacy wording if anyone asks.
Cost: A technical decision created an honesty obligation. Getting it right meant treating the privacy policy as part of the product, not paperwork.
Free editor, paid export
Instead of: A free plan or a time-limited trial, the default for tools like this.
Cost: No recurring revenue and no captured accounts. Every sale is a fresh decision made at the export step, which is a harder place to win.
Merchant of record, because the price said so
Instead of: Stripe, with lower fees and full control of the checkout.
Cost: A larger cut per sale and less control over the payment experience.
No accounts, no database
Instead of: The usual account-and-database setup that buys sync, saved libraries and a mailing list.
Cost: No cross-device sync, and clearing your browser clears your library. Accepted on purpose.
Takeaway: A preview that does not obey the system is worse than no preview.
Outcome
It is live and taking payments
- A real purchase, a real card, the files delivered: not a prototype
- Every export ships a dated WCAG contrast report, covering every default pairing in light and dark
- No team features, no version-control integration, no cross-device sync: all deliberate
Takeaway: A tool that claims to do everything is one you cannot trust to do a single thing well.