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 building.

And now it's nearly ready to share with the world.

It's called Loken, and it's a design synthesis tool.

Why do this?

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 guardrails.

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.

Introducing Design Synthesis

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 consumed elsewhere.

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 across breakpoints.
• 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 different products.

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.

What's Next?

The site is still a work in progress. I'm currently building out the documentation and the feature roadmap alongside the app itself, lots and lots of things to keep me busy.

I'll be posting regular updates to both the blog here and on Twitter, so stay tuned.

After another week or two of tidying up and testing, I should be able to open signups for public consumption. If you're interested in playing with an early version of it, or simply just learning more about it, please ping me an email, I'd love to hear from you.