Tokens is a visual playground for creating a unique visual language for your digital product. Explore colors, typography, spacing, radius, and shadows with simple controls, then fine-tune every detail with advanced customization options. Tokens uses a reusable system of primitive and semantic design tokens to help keep your interfaces consistent across websites, SaaS products, and apps, whether built by humans or AI agents. Export it as CSS variables or a DESIGN.md file.
I’m Erik, the maker of UI Colors. UI Colors started as a tool for generating and exploring (Tailwind CSS) color scales.
With Tokens, I wanted to take the product further and make it possible to explore the full visual language of a product: color, typography, spacing, radius, shadows and semantic roles.
You can use presets and quick controls to explore different directions fast, fine-tune the underlying design tokens, preview everything in real UI examples, and export the result as CSS variables or a DESIGN.md file.
I’d really love to know:
Would this fit into your workflow, and what would make it significantly more useful?
I build native apps, so my tokens live in code — but the preview-in-real-UI step is the part that would actually pull me in. I usually only find out a token is wrong once it's sitting in a real screen. Exporting as CSS variables is a good call — that's something I can translate into my own setup without much friction.
About Tokens by UI Colors on Product Hunt
“Build your product’s visual language with design tokens”
Tokens by UI Colors launched on Product Hunt on November 10th, 2026 and earned 61 upvotes and 3 comments, placing #42 on the daily leaderboard. Tokens is a visual playground for creating a unique visual language for your digital product. Explore colors, typography, spacing, radius, and shadows with simple controls, then fine-tune every detail with advanced customization options. Tokens uses a reusable system of primitive and semantic design tokens to help keep your interfaces consistent across websites, SaaS products, and apps, whether built by humans or AI agents. Export it as CSS variables or a DESIGN.md file.
Tokens by UI Colors was featured in Design Tools (264k followers), Developer Tools (523.1k followers) and UX Design (7.1k followers) on Product Hunt. Together, these topics include over 142.7k products, making this a competitive space to launch in.
Who hunted Tokens by UI Colors?
Tokens by UI Colors was hunted by Erik de Vries. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Tokens by UI Colors stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Erik de Vries
Hi!
I’m Erik, the maker of UI Colors. UI Colors started as a tool for generating and exploring (Tailwind CSS) color scales.
With Tokens, I wanted to take the product further and make it possible to explore the full visual language of a product: color, typography, spacing, radius, shadows and semantic roles.
You can use presets and quick controls to explore different directions fast, fine-tune the underlying design tokens, preview everything in real UI examples, and export the result as CSS variables or a DESIGN.md file.
I’d really love to know:
Would this fit into your workflow, and what would make it significantly more useful?
Cheers!
Erik