Everything has to start somewhere, right?
It started about a year ago as a small evening side project, a mostly experimental collection of
functions for transforming design tokens parametrically. Feed in some source tokens, pass in some
parameters to follow, let the functions handle the grunt work of figuring out how to get from A to
B... But I was working full-time on a large-scale corporate design system project that didn't leave
much time for anything else, so it was mostly just a bit of fun.
After finding myself with a bit of free time later this year, I wanted to see if I could make
something that was both fun and useful out of that collection of spare functions. My educational
background is in music production, and I wanted to build a UI design tool that felt as intuitive and
fun to use as something like Ableton Live. I realized that the modular, patch-based interface of a
synthesizer could be a good fit for the way I was thinking about design tokens. So, I started
And now it's nearly ready to share with the world.
It's called Loken, and it's a design synthesis tool.
Most modern design tools are, by convention, more about freeform creativity than they are about
structure and constraint. And that's fine. That's what they're for. But as we've collectively moved
towards a world of design tokens, where decisions can be shared and mapped between teams and across
disciplines and tools, we've had to extend our tooling to accommodate, to provide benchmarks and
This has left us in a slightly strange place. Design tokens are platform-agnostic by design, and
their format is coalescing around a JSON schema. But crowbarring a JSON editor (or what amounts to
one) into tools originally designed for drawing and arranging rectangles is not ideal. It's a bit
like using Excel to edit a photo. It's not a natural fit.
And to my mind, it doesn't scratch the surface of the creative potential of playing with and
exploring design through tokens.
Design synthesis is how I refer to Loken's way of working with design tokens. It's a method of
generating and manipulating design data in a fashion similar to the way modular synthesizers
generate and manipulate control voltage and audio signals. Loken is directly inspired by modular
synthesis and guitar pedals, and how they can be chained together to create new and interesting
creative outputs from simple inputs.
The core of it is this: You take a piece of raw design data as an input source and pass it through a
series of modules, each of which transforms that data in some way and passes the result onwards,
either to another module, to the overall output, or both.
You might start with your brand's designated primary color, then feed it through a chain to generate
a palette, or two palettes — let's say one each for light and dark mode. You could take that same
color and send it through a chain to generate harmonious new colors based on its saturation and
brightness. You could then take the individual values from those palettes and pass them to modules
that generate gradients, or text styles, or whatever you like. And you can cherry-pick any of the
outputs from any of the modules and make them available globally as design tokens, which can then be
The possibilities are endless, really. You can create:
- Fluid, viewport-or-container-driven modular typography scales without wrangling with complex
mathematics and tooling that isn't designed for it.
- Color palettes that are guaranteed to work together and meet WCAG contrast requirements.
- Adaptive semantic color palettes that work in both light and dark mode.
- Fluid and static spacing scales from the same parameters, keeping your design language consistent
- Complex, multi-layered gradients that can be used as backgrounds, text colors, and more.
- Reusable component styles with brand-specific colors and typography, shared across radically
And so on.
It's a way of working that's both creative and structured. It turns the inherent and desirable
constraints of design tokens into a playground for experimentation and exploration.
That's what design synthesis is.
That's what Loken does.