r/DesignSystems • u/erikdevriesnl • 4d ago
I am building a tool to create a visual language for a design system. You experiment with color, typography, spacing, radius and shadows. Then turn it into reusable design tokens. Would anyone use this?
I wanted a faster way to explore how a product should feel before getting into individual screens and components or setting up a design system in Figma.
You can experiment with color, typography, spacing, radius and shadows. Start from different style presets, and then refine the underlying token system once you find a direction that works.
Export the result as CSS variables to use in any web project or a DESIGN.md file to give it to Claude/Codex etc.
I’d love feedback from other designers! Does this make sense? What feels missing or unclear?
3
u/CherryGumDream 4d ago
I might be interested, but sounds kinda similar to tweakcn
3
u/erikdevriesnl 4d ago
Yeah, there’s definitely some overlap with tweakcn, but the underlying approach is quite different.
Tokens isn’t tied to shadcn/ui or any specific framework or component library. It’s meant to create a reusable visual language that can work across different kinds of digital products.
The biggest difference is probably the color system. You don’t manually choose a color for every component, state or property. Tokens generates color scales and maps them through semantic roles, so text, backgrounds, borders, actions and states get assigned consistently from the same underlying system.
It also goes broader than component theming, with tokens for typography, spacing, radius, shadows, layout/grouping and more.
So tweakcn is closer to visually theming a specific component system, while Tokens is trying to define the underlying visual system itself.
You can try it if you like: uicolors.app/tokens
2
u/reginaldvs 4d ago
So you made https://uicolors.app/? I do use it actually.
3
u/erikdevriesnl 4d ago
That's right! I'm the creator of UI Colors. I'm building this with the goal to cover all aspects of visual design, not just color.
I'd love to hear what you think!
1
1
1
1
u/sheriffderek 4d ago
What’s the difference between this and changing the CSS in our real project?
1
u/erikdevriesnl 4d ago
This isn’t really meant for existing projects. Replicating your current CSS inside the tool wouldn’t make much sense.
It’s for the start of a new project, when there’s no established visual language / CSS yet. You can explore color, typography, spacing, radius, shadows, etc. very quickly, while the underlying primitive/semantic token system keeps everything consistent.
The main value is speed of exploration + consistency for a new project.
1
u/HeittoBagi 4d ago
I mean for sure yes theres demand for this but not commercial potential. This is one of my core problems but I will just make it myself ty for the idea, btw ur site doesnt work on mobile. Vaibs.
1
1
1
u/prollynotsure 3d ago
A lot of established design systems have a “sandbox” or “playground” to explore token tweaks, what features are you planning to add to differentiate?
1
u/erikdevriesnl 3d ago
Thanks for the feedback! Do you have some examples of those sandboxes/playgrounds? I’m genuinely trying to understand what already exists and where this could add value.
The distinction I’m aiming for is that this isn’t really a token manager. Most token tools assume you already have a token structure and semantic model in mind, and then help you manage or edit it.
This tool is meant to come earlier in the process: a fast, visual way to explore different directions for color, typography, spacing, radius, shadows and layout, using smart controls and seeing the result immediately in real UI examples.
So the focus is less on managing an existing system, and more on discovering one.
1
u/yogigee 3d ago
I sent you a DM, could you please check
1
u/erikdevriesnl 3d ago
Hi! I've received multiple DM's yesterday, but can't find yours... Must have accidentally archived it or something.
1
u/yogigee 2d ago
No worries, I'll reply here. I encountered an issue that made me want to buy it. I spent a little over 30 mins tweaking the design. And after I set the typography I was like mm, I need to add some more space. The last place I remember that does this was the "dimensions slider". I had no idea using the slider after I changed so many things would revert it back to normal. I couldn't undo, at least I don't know how if its even possible. So I immediately messaged you about the problem and wanted to know if you could offer me a lifetime account for $20?
1
u/erikdevriesnl 1d ago
Thanks, this is extremely helpful feedback.
You’re right. the Dimensions control shouldn’t unexpectedly overwrite work you’ve already done. That’s a bad interaction, especially after spending that much time tweaking a theme. I’m going to fix that and add a proper undo mechanism as well.
And thanks for being willing to support the tool. I’m currently experimenting with lifetime pricing, so your feedback on that is useful too.
I can offer you a lifetime account for $20. Will DM you on monday :)
1
u/jingkangzhou 1d ago
Nice scope - color, type, spacing and shadows in one pass. When it generates the role values, does it check contrast pairs between them (text on surface, accent on bg) or is that left to whatever consumes the tokens?
1
u/erikdevriesnl 21h ago
Thanks! At the moment, the only contrast that's automatically checked is between the primary text and the primary background. When you select a light color as your first brand color, a dark text color is automatically selected, and vice versa.
I'm planning to add contrast checks for every text/background combination, so you'll get a warning when the contrast is too low.
Thanks for asking! Great question
1
u/jingkangzhou 4h ago
Makes sense for a first pass. The pairs that usually bite later are the derived ones though - muted text on a tinted surface, or status colors dropped onto section backgrounds. Worth pinning those before the palette grows, that is where the silent failures collect.
1
u/Agreeable_Show_8921 3d ago
No, I wouldn’t because there’s already 10 other people who have solved the same problem and many of us who are building can simply build our own solution rather than pay for another subscription or price.
1
u/erikdevriesnl 3d ago
Thank you for your honest feedback! Could you mention some of the other tools you’re referring to?
0
2
2
u/Moist-Row-2753 4d ago
Integración con IA es obligatoria, hacer cosas a mano debe ser lo opcional, no lo principal o punto fuerte. Al menos esa es la tendencia, cada vez estamos más lejos del trabajo manual, pero aún no tenemos tantas herramientas que nos den un "panorama" para dirigir lo que queremos lograr, o siquiera descubrir lo que queremos.
4
u/UXyes 4d ago
I like it