Building design tokens app
I've been doing frontend profesionally for 13 years though never been great at design systems. Probably because, with a lack of designers on the team, I ended up building component libraries and reusing a few (hundred) style values.
When DTCG released a stable design tokens specification, I got very excited how expressive and more complex it become comparing to previous iterations. So couldn’t stop myself from creating an app around it. Especially since I got a lot of experience building UI for web at Webstudio for the last three years and needed to put ideas into something new.
It also felt like a great opportunity to learn design systems.
What are design tokens? I'd call them smallest pieces of visual work. Colors, sizes and typography. Design Tokens Community Group (DTCG) formalized design tokens as specification to unify them across different tools and platforms. Stable version made it even more strict and less CSS-like.
Using opencode for rapid prototyping and Svelte as a lightweight framework (already worked with it), I made a simple two-pane UI: a tokens tree on the left and generated CSS variables on the right. AI helps a ton with moving forward from "blank pages".
From the start, the project has been completely open source, and I’m posting progress everywhere Reddit can’t block me (yep, they’re super unfriendly to new users). You can check it out on GitHub.
While I was working on the prototype, Adam Argyle released a great new color picker with all modern color spaces like OKLCH, LAB etc. supported in CSS. By the way, the design tokens specification relies on those exact color spaces for color tokens. Perfect timing.
Besides picking colors, I still needed a way to parse them and convert them to the DTCG color format, so I needed a solid library to avoid getting lost in color specifications. color-input uses the super cool colorjs.io library. I’ve been hearing about it for years but never found it before, because I was spelling it wrong when searching :)
Then I rebuilt the tree again. I relied heavily on the WAI-ARIA recommendations and Adam Argyle’s advice to always support multi-select.
Drag-and-drop is still tricky, especially choosing the right parent to drop into, need to make it more intuitive.
For UI components, I decided to go with HTML. Yeah, it got a lot of good stuff recently.
- Popover API for the app menu, adding tokens, and the token editor
- The dialog element for “About” info
- Invokers for declarative opening of dialogs and popovers
- Will definitely use interest invokers for tooltips
These are very easy to polyfill, except for anchor positioning, but I worked around that with a custom floating-ui setup.
Now we have a token editor and CSS/JSON preview. That’s good for coding but not for visual exploration.
What would be useful is an automatically generated style guide based on design tokens. All these values can be rendered as widgets and placed on one page for designers to overview.
There were a few ideas suggested on socials though already liking the progress. I’m especially happy with the cubic-bezier preview. Would reuse it for bezier editor later.
What about AI? Can design tokens improve the results of generated websites and applications? Experience shows, the more specific your question - the better the results you get. Design tokens might help a lot with this, and I’m going to explore this later.
While researching I read a ton about design systems, especially recommend Brad Frost’s book and articles . That’s where I learned how essential token aliasing is. One great concept is a 3-tier token architecture which defines arbitrary, semantic, and component values, where each layer maps to the next. For example arbitrary color-blue-100 can be aliased to semantic text-color-primary which maps to button-text-color.
The design tokens specification offers a few options for this. One is the “extends” syntax like {{path.to.my.token}} (I use this one in the app), another uses JSON Schema refs (which I find trickier to represent in a UI).
By the way, I called this tool Engramma. I wanted an original name, so I borrowed it from one of my favorite games and used the Italian variant. You can check it out at engramma.dev.
What’s next? I’ll keep improving the tool and start using it for new projects. Here are the closest ideas to implement:
- A resolver specification that extends the DTCG format with “Sets” and “Modifiers” to enable defining tokens for different themes, modes, color schemes, and breakpoints
- Synchronize tokens with project code
- Explore integrations with external graphic editors and website builders
If you work with design systems, I’d love your feedback on Engramma—try it at engramma.dev, import your JSON with tokens, and tell me what’s missing.
