Loken: An easy interactive way to better looking websites
(2025/02/17)
- Reference: 1739794682
- News link: https://www.theregister.co.uk/2025/02/17/loken_css_synthesizer/
- Source link:
Interview Loken is a new type of tool which aims to let website designers feel their way towards a design in the same sort of way as musicians do with a software synthesizer.
[1]Loken is a bit of a departure from the Reg FOSS desk's usual fare, but then again, so was the [2]Ardour FOSS DAW that we looked at a few years ago. Ardour is a software-based synthesizer, letting someone create music without playing physical instruments or using traditional music notation. Ardour is unusual for being FOSS, but there are quite a few such tools out there, from Ableton to [3]Zrythm .
As for Loken, it aims to bring a similar sort of intuitive, point-and-click improvisational design process to a very different domain – the process of designing the look and feel of a website. An [4]archived project description says:
"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.
Loken is still under construction by solo Berlin startup Steve Mitchell, who as well as being a software developer is also a trained musician. "It started out as a sort of fidget toy, and the current demo sort of still is," he told us. "Back in November, we launched a beta as an anti-burnout measure, but February will be the proper version 1.0."
The Register : So why are you building this? How do you feel it offers something new?
[5]
Mitchell : It's true, there are other theme generators online, but they need you to have defined ideas of your desired output. If you have a goal in mind like that, there are loads of tools. But Loken is for exploring, for finding your way when you don't know where you're going. It felt like an opportunity to change the whole thing.
[6]
[7]
The Register : So what is your background, and what led you to this?
Mitchell : I was a front-end developer. I worked in London for an offshoot of J Walter Thompson, doing a lot of Drupal, handling things like mailing lists and email templates. It made me think about the possibility of tools to abstract this into something more modern, a bit more cool. So I decided to make my own. My initial reaction was "Oh god, I don't know how to do this!" But now I do. I had to teach myself graph theory and back-end development.
[8]
The Register : Why now?
Mitchell : It feels like when the front-end industry chose React as The Way – or at least Javascript – that as opposed to learning PHP, and CSS, and design, and accessibility, now, people enter with ten years of comp-sci experience. They treat design as boxes they can colour in. For user interface, currently, they mock it up in Figma, then they send it to someone who makes it work.
Instead, Loken can form any DOM-shaped object in one go in one place. You can build, and maintain, and develop, and it emits design tokens that can be used in [9]token.studio . You don't need to learn something arcane like CSS, and there's no typing.
[10]
The Register : How is it implemented?
Mitchell : Well, it's a web app for now, although there is also an Electron app – but that's going. It's also Mac-only, but that will change in time. There's quite a lot of supporting back-end stuff, including CRM – user management, ticketing, support, payment processing, and subscriptions. But there's lots of sandboxing stuff, so that it can be local too. It has a WebSockets layer for front-end/back-end communications. One of the next things on the to-do list is that it needs a REST-esque "API" layer.
Most of it is written in PHP, using [11]Laravel , so I don't need to pay others to support things. It's really impressive that a language as maligned as PHP has FOSS tools like this, which make this sort of project possible.
The Register : Is it open source? How are you going to make it pay?
[12]SuperHTML is here to rescue you from syntax errors, and it's FOSS
[13]Oracle urged again to give up JavaScript trademark
[14]What is missing from the web? We're asking for Google
[15]Small CSS tweaks can help nasty emails slip through Outlook's anti-phishing net
Mitchell : No, it isn't, but there are tools and components that we're building which we plan to make FOSS. There are no backers, no free version or free tier. The "freemium" model is a venture capitalist sort of thing, and none of them are involved. For now, it's growing by word of mouth. When I put the beta version up in November, it suddenly went from about 100 followers to about 1,000.
Now, I'm also working on documentation. I built a [16]Puppeteer script. It walks through all the important elements: it boots up, logs in as its own special user, walks through all the screens, taking screenshots of every page, and saves them all. Then, it switches to dark mode, and does it again. It's saved so much time. Before, every time something changed, I had to go through and work out which bits needed new pictures. I may open source this bit, for example. Chunks of the tech are interesting enough that they perform as micro specs themselves. That would be interesting to open up, too.
The Register : How many people are involved?
Mitchell : It's just me. I have a colleague in the UK who does the legal things, and acts as a project manager for me. For now, I am doing all the coding, but I can't write all the possible plug-ins for all the things it could potentially do. But maybe, if it's simple enough, others can.
Getting to the right level of extreme simplicity is really, really hard. But sometime, you realize, if you need the thing, you just have to build it yourself. ®
Get our [17]Tech Resources
[1] https://loken.io/
[2] https://www.theregister.com/2022/10/18/foss_digital_audio_workstation_ardour/
[3] https://www.zrythm.org/en/index.html
[4] https://web.archive.org/web/20231201011436/http://loken.io/blog/turbines-to-speed
[5] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=2&c=2Z7NrMQrroCZoV3csRxf3FQAAAIM&t=ct%3Dns%26unitnum%3D2%26raptor%3Dcondor%26pos%3Dtop%26test%3D0
[6] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44Z7NrMQrroCZoV3csRxf3FQAAAIM&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[7] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33Z7NrMQrroCZoV3csRxf3FQAAAIM&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[8] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44Z7NrMQrroCZoV3csRxf3FQAAAIM&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[9] https://tokens.studio/
[10] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33Z7NrMQrroCZoV3csRxf3FQAAAIM&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[11] https://laravel.com/
[12] https://www.theregister.com/2024/10/23/superhtml_live_html_syntax_checking/
[13] https://www.theregister.com/2024/09/17/oracle_urged_to_surrender_javascript_trademark/
[14] https://www.theregister.com/2024/08/30/what_is_missing_from_web/
[15] https://www.theregister.com/2024/08/07/small_css_tweaks_can_help/
[16] https://github.com/puppeteer/puppeteer
[17] https://whitepapers.theregister.com/
[1]Loken is a bit of a departure from the Reg FOSS desk's usual fare, but then again, so was the [2]Ardour FOSS DAW that we looked at a few years ago. Ardour is a software-based synthesizer, letting someone create music without playing physical instruments or using traditional music notation. Ardour is unusual for being FOSS, but there are quite a few such tools out there, from Ableton to [3]Zrythm .
As for Loken, it aims to bring a similar sort of intuitive, point-and-click improvisational design process to a very different domain – the process of designing the look and feel of a website. An [4]archived project description says:
"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.
Loken is still under construction by solo Berlin startup Steve Mitchell, who as well as being a software developer is also a trained musician. "It started out as a sort of fidget toy, and the current demo sort of still is," he told us. "Back in November, we launched a beta as an anti-burnout measure, but February will be the proper version 1.0."
The Register : So why are you building this? How do you feel it offers something new?
[5]
Mitchell : It's true, there are other theme generators online, but they need you to have defined ideas of your desired output. If you have a goal in mind like that, there are loads of tools. But Loken is for exploring, for finding your way when you don't know where you're going. It felt like an opportunity to change the whole thing.
[6]
[7]
The Register : So what is your background, and what led you to this?
Mitchell : I was a front-end developer. I worked in London for an offshoot of J Walter Thompson, doing a lot of Drupal, handling things like mailing lists and email templates. It made me think about the possibility of tools to abstract this into something more modern, a bit more cool. So I decided to make my own. My initial reaction was "Oh god, I don't know how to do this!" But now I do. I had to teach myself graph theory and back-end development.
[8]
The Register : Why now?
Mitchell : It feels like when the front-end industry chose React as The Way – or at least Javascript – that as opposed to learning PHP, and CSS, and design, and accessibility, now, people enter with ten years of comp-sci experience. They treat design as boxes they can colour in. For user interface, currently, they mock it up in Figma, then they send it to someone who makes it work.
Instead, Loken can form any DOM-shaped object in one go in one place. You can build, and maintain, and develop, and it emits design tokens that can be used in [9]token.studio . You don't need to learn something arcane like CSS, and there's no typing.
[10]
The Register : How is it implemented?
Mitchell : Well, it's a web app for now, although there is also an Electron app – but that's going. It's also Mac-only, but that will change in time. There's quite a lot of supporting back-end stuff, including CRM – user management, ticketing, support, payment processing, and subscriptions. But there's lots of sandboxing stuff, so that it can be local too. It has a WebSockets layer for front-end/back-end communications. One of the next things on the to-do list is that it needs a REST-esque "API" layer.
Most of it is written in PHP, using [11]Laravel , so I don't need to pay others to support things. It's really impressive that a language as maligned as PHP has FOSS tools like this, which make this sort of project possible.
The Register : Is it open source? How are you going to make it pay?
[12]SuperHTML is here to rescue you from syntax errors, and it's FOSS
[13]Oracle urged again to give up JavaScript trademark
[14]What is missing from the web? We're asking for Google
[15]Small CSS tweaks can help nasty emails slip through Outlook's anti-phishing net
Mitchell : No, it isn't, but there are tools and components that we're building which we plan to make FOSS. There are no backers, no free version or free tier. The "freemium" model is a venture capitalist sort of thing, and none of them are involved. For now, it's growing by word of mouth. When I put the beta version up in November, it suddenly went from about 100 followers to about 1,000.
Now, I'm also working on documentation. I built a [16]Puppeteer script. It walks through all the important elements: it boots up, logs in as its own special user, walks through all the screens, taking screenshots of every page, and saves them all. Then, it switches to dark mode, and does it again. It's saved so much time. Before, every time something changed, I had to go through and work out which bits needed new pictures. I may open source this bit, for example. Chunks of the tech are interesting enough that they perform as micro specs themselves. That would be interesting to open up, too.
The Register : How many people are involved?
Mitchell : It's just me. I have a colleague in the UK who does the legal things, and acts as a project manager for me. For now, I am doing all the coding, but I can't write all the possible plug-ins for all the things it could potentially do. But maybe, if it's simple enough, others can.
Getting to the right level of extreme simplicity is really, really hard. But sometime, you realize, if you need the thing, you just have to build it yourself. ®
Get our [17]Tech Resources
[1] https://loken.io/
[2] https://www.theregister.com/2022/10/18/foss_digital_audio_workstation_ardour/
[3] https://www.zrythm.org/en/index.html
[4] https://web.archive.org/web/20231201011436/http://loken.io/blog/turbines-to-speed
[5] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=2&c=2Z7NrMQrroCZoV3csRxf3FQAAAIM&t=ct%3Dns%26unitnum%3D2%26raptor%3Dcondor%26pos%3Dtop%26test%3D0
[6] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44Z7NrMQrroCZoV3csRxf3FQAAAIM&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[7] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33Z7NrMQrroCZoV3csRxf3FQAAAIM&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[8] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=4&c=44Z7NrMQrroCZoV3csRxf3FQAAAIM&t=ct%3Dns%26unitnum%3D4%26raptor%3Dfalcon%26pos%3Dmid%26test%3D0
[9] https://tokens.studio/
[10] https://pubads.g.doubleclick.net/gampad/jump?co=1&iu=/6978/reg_software/front&sz=300x50%7C300x100%7C300x250%7C300x251%7C300x252%7C300x600%7C300x601&tile=3&c=33Z7NrMQrroCZoV3csRxf3FQAAAIM&t=ct%3Dns%26unitnum%3D3%26raptor%3Deagle%26pos%3Dmid%26test%3D0
[11] https://laravel.com/
[12] https://www.theregister.com/2024/10/23/superhtml_live_html_syntax_checking/
[13] https://www.theregister.com/2024/09/17/oracle_urged_to_surrender_javascript_trademark/
[14] https://www.theregister.com/2024/08/30/what_is_missing_from_web/
[15] https://www.theregister.com/2024/08/07/small_css_tweaks_can_help/
[16] https://github.com/puppeteer/puppeteer
[17] https://whitepapers.theregister.com/
myhandler
As a DAW user and owner of a hardware modular this sounds both interesting and curious, even if he's overstretched his metaphor.
so what does it target?
Anonymous Coward
So it is 'Mac only' at least for now, but that presumably means the development environment is Mac only. What about deployment? Presumably the result can run on Mac, but what about Windows, Linux, iOS, Android and in which browsers?
"Getting to the right level of extreme simplicity is really, really hard."
Really refreshing to read of someone in the industry who holds this view against the horde of "Fake it until you make it" also rans.
St Exupéry in Terre des Hommes expressed succinctly:
«Il semble que la perfection soit atteinte non quand il n’y a plus rien à ajouter, mais quand il n’y a plus rien à retrancher.» †
"But sometime, you realize, if you need the thing, you just have to build it yourself."
If it's "need" rather than "want" this is more often the rule rather than the exception, unfortunately.
† Lit. "It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove."