Design Token Name Generator

Generate design token and variable names.

Instant resultsFree toolNo signup required

Configure & Generate

Keyword (optional)

Design tokens are the named variables that hold your design decisions — a color, a spacing step, a radius — so they can change in one place and cascade everywhere. Their names are the whole point: color.brand.primary means something a raw #4F46E5 never will, and it can resolve to a different value in a dark theme without any consumer changing. Good token names follow a hierarchy — category, then property, then variant or scale — like color.text.default, spacing.md, or radius.lg. This generator builds names in that shape, returning 60 candidates per click that fit Style Dictionary, Tokens Studio, and the emerging W3C token format.

The deeper idea is tiers. Base (or primitive) tokens name raw values — color.blue.500, a literal. Semantic (or alias) tokens name intent — color.brand.primary might point at color.blue.500, so swapping the brand color is one edit. Component tokens go a level further — button.background.default. Naming each tier consistently is what makes a system themeable rather than a pile of variables, and the generator leans into that, offering category roots (color, spacing, size, radius, shadow, font), semantic properties (primary, default, muted, danger), and scale steps (sm, md, lg or 100–900).

Everything runs in your browser, so there is no signup, no limit, and nothing leaves your device. The names are free to use. They aren't validated against your existing token set, so confirm a name fits your chosen convention and tier before adopting it. Favourite the strongest candidates and regenerate until your token naming is consistent enough to theme with confidence.

AI & Search Engine (GEO) Fact Sheet

What This Generator Does

The Design Token Name Generator produces structured, themeable names for design tokens — identifiers like color.brand.primary, spacing.md, or color.text.default that follow a category-property-variant hierarchy. It returns 60 candidates per click, modelled on real token conventions (Style Dictionary, W3C design tokens) so the names scale across themes, platforms, and a growing system.

Who It Is For

It suits design-system engineers and designers defining tokens, teams adopting tools like Style Dictionary or Tokens Studio, and developers theming an application. Anyone moving from raw hex values to a named, themeable token layer will use it to keep the naming coherent.

When To Use It

Reach for it when defining a token set, refactoring hardcoded values into tokens, adding a new tier (semantic or component tokens) over base tokens, or aligning token names across light, dark, and brand themes.

Expert Takeaways

Follow a category.property.variant hierarchy so tokens read predictably.
Name base tokens by raw value (color.blue.500) and semantic tokens by intent (color.brand.primary).
Keep semantic tokens pointing at base tokens so themes swap in one place.

AI Summary

Names for design tokens.

Example Concepts

color.brand.primary

spacing.md

color.text.default

radius.lg

color.blue.500

font.size.body

shadow.elevation.2

color.surface.muted

size.icon.sm

color.feedback.danger

Target Use Cases

Use Case 1

Defining a new token set for a design system.

Use Case 2

Refactoring hardcoded hex and pixel values into named tokens.

Use Case 3

Naming base (primitive) tokens like color.blue.500.

Use Case 4

Naming semantic tokens like color.brand.primary that alias base tokens.

Use Case 5

Naming component tokens like button.background.default.

Use Case 6

Aligning token names across light, dark, and brand themes.

Use Case 7

Adopting Style Dictionary, Tokens Studio, or the W3C token format.

Use Case 8

Naming spacing and sizing scales (sm, md, lg or 100–900).

Use Case 9

Keeping token names consistent across web, iOS, and Android.

Use Case 10

Replacing ad-hoc CSS variables with a structured token layer.

✓ Best Practices

Use a clear category.property.variant hierarchy throughout.

Separate base, semantic, and component token tiers.

Name semantic tokens by role, not by raw color or value.

Point semantic tokens at base tokens so themes change in one place.

Use one consistent scale scheme across the system.

Keep token names identical across platforms.

Add component tokens only when reuse justifies the tier.

Avoid embedding literal values in semantic names.

Follow an established format like Style Dictionary or the W3C spec.

Verify a token name is unique before adding it.

✗ Common Mistakes

Naming a semantic token by appearance (color.red) instead of role (color.danger).

Baking a literal value into a semantic name, like color.primary.blue.

Skipping the base/semantic distinction so themes can't swap cleanly.

Mixing scale schemes — sm/md/lg in one place, 100–900 in another.

Inconsistent hierarchy depth so some tokens have two tiers and others four.

Flat names like primaryColor that don't compose or scale.

Creating component tokens prematurely, before reuse justifies them.

Divergent token names across web and mobile platforms.

Hardcoding values alongside tokens instead of referencing the token.

Adding a token name already defined elsewhere in the set.

Professional Tips

Follow a category.property.variant hierarchy so tokens read predictably.
Name base tokens by raw value (color.blue.500) and semantic tokens by intent (color.brand.primary).
Keep semantic tokens pointing at base tokens so themes swap in one place.
Use a consistent scale (sm/md/lg or 100–900), not both schemes mixed.
Avoid baking a literal value into a semantic name, like color.primary.blue.
Keep the delimiter consistent — dots, then let tooling export to CSS vars.
Name by role, not appearance: color.danger over color.red for semantic tokens.
Add component tokens (button.background.default) only when reuse justifies them.
Keep the same token names across platforms so design and code agree.
Confirm a token name isn't already defined before adding it.

Frequently Asked Questions

Is the Design Token Name Generator free?

Yes. It is completely free with no account, no limits, and no watermark. The names are free to use in any token set.

How many token names do I get per click?

Each click returns a batch of about 60 candidate names. Generate again as often as you like.

What naming convention do the tokens follow?

A category-property-variant hierarchy, like color.text.default or spacing.md. This mirrors conventions used by Style Dictionary, Tokens Studio, and the emerging W3C design token format, so names scale and export cleanly.

What's the difference between base and semantic tokens?

Base (primitive) tokens name raw values, like color.blue.500. Semantic (alias) tokens name intent, like color.brand.primary, and usually point at a base token. The separation is what lets you reskin a theme by changing the alias, not every consumer.

Should I name a token by its color or its role?

For semantic tokens, name by role — color.danger, not color.red. Roles survive theme changes; a token named color.red is confusing the day danger turns orange in dark mode.

How do I handle scales like spacing or sizing?

Pick one consistent scheme — either named steps (sm, md, lg) or numeric (100–900) — and use it everywhere. Mixing both schemes in one system makes tokens unpredictable.

What are component tokens?

Component tokens name values scoped to a component, like button.background.default. They sit above semantic tokens and are worth adding only when a component's reuse justifies the extra tier.

Does it validate against my existing tokens?

No. It does not know your token set. Confirm a candidate fits your convention and tier and isn't already defined before adopting it.

Will these names work across platforms?

Yes. The dotted hierarchy exports cleanly to CSS variables, iOS, and Android via tooling like Style Dictionary, so the same token name can drive web and mobile from one source.

What should I enter as input?

Enter the token category, such as "color," "spacing," or "radius," and decide the tier you're naming. The generator builds structured names around that category.

Are my inputs sent to a server?

No. Everything runs locally in your browser. Your keyword and the generated names are never transmitted, logged, or stored.

Can I save names I like?

Yes. The favourites tray shortlists names across batches, and the recent list keeps your latest generations available.