Question 1

What are design tokens?

Accepted Answer

Design tokens are named values for the visual decisions in a UI — colors, spacing, radius, shadows, type sizes, and motion. Exposed as CSS custom properties (variables), they keep a whole game or app visually consistent and easy to re-theme from one place.

Question 2

How do I use CSS custom properties from this tool?

Accepted Answer

Copy the generated :root { ... } block into your stylesheet, then reference the variables anywhere, e.g. background: var(--surface); box-shadow: var(--e2); border-radius: var(--radius). Change a token once and every element using it updates.

Question 3

How can one hue produce a whole palette?

Accepted Answer

All colors are derived in HSL from your base hue. The primary uses the hue at a fixed lightness, the accent is shifted about 160 degrees away for contrast, and backgrounds, surfaces, and text use the same hue at low saturation. This keeps the palette harmonious instead of randomly mixed.

Question 4

What is the difference between HSL and hex colors?

Accepted Answer

Hex (#3b82f6) encodes red, green, and blue channels and is hard to reason about. HSL describes hue, saturation, and lightness, so you can shift a whole theme by changing one hue number or darken a color by lowering lightness. This tool designs in HSL and you can convert to hex afterward if needed.

Question 5

How should dark-mode tokens differ from light mode?

Accepted Answer

Switching mode inverts lightness: dark mode uses very dark backgrounds with light text, light mode the reverse. Surfaces sit slightly above the background, shadows stay low-opacity and hue-tinted, and the same accent and primary hues carry across both so your brand stays recognizable.

Design Tokens Generator