Build your product’s visual language with design tokens
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?
Cheers!
Erik
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.
On the analytics side, Tokens by UI Colors competes within Design Tools, Developer Tools and UX Design — topics that collectively have 794.2k followers on Product Hunt. The dashboard above tracks how Tokens by UI Colors performed against the three products that launched closest to it on the same day.
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.
For a complete overview of Tokens by UI Colors including community comment highlights and product details, visit the product overview.
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