Design Token Studio

A year or so back, I was trying to design something on Figma. By then, I already had different types of type scales and color systems scattered across many Figma files. I don't like working on someone else's templates, and I don't want to copy from other projects either, because as a design matures, my priorities and taste also change. For many months, I never even bothered to move away from a blue color system. I somehow found comfort in a few shades and kept using them.

Then the vibe coding era started. The initial hiccup was always from the development side. Setting things up can be exhausting, and if it's not handled in an enjoyable way, it quickly becomes overwhelming. For one, I didn't have much knowledge of development, but I knew a few things from a more all round perspective. The boom of AI, along with my decision to experiment with projects, pushed me a step closer at each stage. I started with the vanilla HTML, CSS, and JS approach, with zero knowledge of JS and only some familiarity with HTML and CSS. Back then, LLMs had this weird tendency to return everything using Tailwind. I don't know why, but I've never been a fan of that method, and I still like to write CSS. That process is what makes the whole journey enjoyable. While building this project, I realised I'm nowhere near becoming a master in CSS. It's a sea.

Knowing CSS and having a designer mindset is a great combination. You can do a lot of things. Before my current phase, I was fully focused on Framer, and yes, that was my stepping stone. Framer pushed me towards code more than Figma ever did. In Figma, there's a kind of barrier. The code side of Figma, now known as Dev Mode, used to be free, then it was locked behind a paywall, and I kind of stopped looking deeper into the code side. Even though Framer doesn't allow us to export code, I became more familiar with the logic by using it continuously. That enthusiasm, combined with the availability of an AI chat service that could explain anything at any time, really pushed past a lot of barriers.

I started creating things, and my first versions of a color palette and a type scale generator came out of that phase. I used only pure HTML, CSS, and JS. LLMs didn't have large context windows back then, and somehow I still managed to launch those projects.

When I checked Google Search Console one day, I noticed there was traffic to both of these, even though I hadn't shared them anywhere. That surprised me a bit. So I think there are still people who look for tools like this outside of Figma.

As time went on, I moved to Astro, then Next.js, and tried out other frameworks. With the help of LLMs, you can kickstart almost anything these days.

After creating the skeleton of each project, I used to copy the global CSS from different projects. That process can be a bit of a friction. One day, I thought, why not try again with the color palette project? I simply started from there, and as I reached each milestone, I kept adding more features and functionality. I know this may not be everyone's workflow, but my motto is to create everything for myself. If I keep using it, I'll make it better. That's exactly why I decided to redo these two projects: color and type. Because I did face friction with both of them from time to time.

Just before finalising this as a color palette project, I gave another task to a different LLM and got a skeleton for type. Then I went further and added transitions, then a gradient page, then came back to transitions and added animations. After that, I went back to type and added two more sections where I could create more variables in :root and define global CSS.

I didn't look for other projects to get any inspiration. I just started based on my need and it just grew. If I look for other projects I can never start.

I know we can just write all of this directly in a CSS file. But for me, both experiences feel different. I also know some sections are too complicated now, and that's one of the pain points of vibe coding. As I kept adding features and functionality, the structure became more than I could easily handle. For an experienced developer, this might be a simple case. But when you're creating without fully understanding the code, even if all the features work, there's still a right way to write code and structure a project. To this day, most LLMs will write everything in a single file, even when we explicitly ask for a component wise structure. Because of context limits, and because starting a new chat means you might forget to restate certain rules, the architecture can easily get messed up.

The front end might still work, but you'll always have that fear of touching the project again. The good old saying applies “If it is working, don't touch it.” Ideally, I'm against that. If I don't know how something works or how it's written, I don't really have control over it, and I'll never know its full possibilities or limitations. Sometimes you might be standing on a gold mine, or, on a bad day, a landmine and that's when vibe coding burnout hits. I experienced an overwhelming feeling many times while spending time on this. But as I fixed each bug and added tiny new functionalities, I managed to maintain the balance and eventually reached here.

ColorTypescaleTransitionGradientIdentifier

I also created a few more pages to address other pain points, but some of them became overcomplicated. Still, I feel I'll try to optimise them in the future. What motivates me to explore this area is that as AI becomes more advanced and the barrier to entry lowers, we should find better ways to optimise the new challenges that come with it.

I'm going to release this as it is for now. As I tinkered with many other features and functionalities along the way, things became too complicated and kept pushing the release plan I had in mind. I remember a quote from somewhere: “When in doubt, reduce, reduce, reduce.” To simplify anything, we need to reduce.

Many of the features are experimental and may change over time. I also know some parts aren't very well designed yet, and I'll revisit everything once I start using it continuously.

I also realise that anything can become obsolete, and this tool is not immune to that.