Loken

Loken

Drawing rectangles is not your job.

Loken is a powerful visual editor for design tokens, components, and more, inspired by modular synthesis and built for modern design systems.

Join the mailing list for updates on development and early access availability.

All rights reserved © 2024 Loken Ltd.
Registered in England and Wales No. 15438618

Hello World

Hey there 👋

It’s been a little while since we last spoke, and a lot has happened with Loken.

Like, a lot.

Loken started as a curious side-project, a sort of alternate-reality “what if?” experiment. Exploring new approaches to UI design and design system management, mashing up the tactile UI of music production software with the incredible power of design tokens and modern CSS.

In November last year, I wrote a tiny blog post about it and shared it to LinkedIn, expecting maybe a couple hundred people to even see it.

70,000 people saw it.

Hundreds of people got in touch via LinkedIn and email. My poor phone nearly died of exhaustion with the notifications.

It was awesome. And humbling. So I reached out to some friends to help me out, and got to work on nailing it down properly.

Now, I’ve got a couple things I’m very excited to share with you;

Firstly, that Loken is now the first product of a real-life, actual, honest-to-goodness start-up, and I’m not on my own any more.

Our first hire is the marvellous James Coughlan, who has brought his incredible skills in product management and strategy to the fore on this, enabling me to focus entirely on designing and building the application itself.

Secondly, that Loken has transmogrified, Calvin and Hobbes-style, into a desktop app.

The restrictions of cloud-based SaaS apps felt like too much of a devil’s bargain for me. I’ll be going into much deeper detail about this decision here on the site over the coming weeks as we roll into the next phase.

Thirdly, we’re opening up our beta testing to early access subscribers. We’ll be onboarding people in batches over the next couple of weeks. If you're interested in getting involved, we'll be offering discounts on the final version to active beta testers, and we're super excited to hear what you all think, good and bad.

(This is MacOS-only for this round, but we’re investigating the viability of Windows and Linux versions of the app. Let us know if you’re interested! It really helps.)

Looking forward to seeing you all on the other side.

Turbines to speed!

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.