ESC

Design Token Naming Generator

Generate consistent, scalable names for design tokens used across your design system and component library. Choose a token category, naming style, state, and token mode to create standardized names.

What Is a Design Token Naming Generator?

A Design Token Naming Generator creates structured names for design tokens used in design systems and UI component libraries.

How to Use the Design Token Naming Generator

  1. Choose a Token Category: Select Color, Spacing, Typography, Border Radius, Shadow, Breakpoint, Z-Index, Motion, Opacity, or Component.

  2. Enter the Purpose or Name: Add the main purpose of your token.

  3. Add a Variant: Enter an optional variation such as primary, secondary, or another token variant.

  4. Set the Scale or Size: Add a size or scale value when applicable.

  5. Choose a State: Select None, Default, Hover, Active, Focus, Disabled, Selected, or Visited.

  6. Select a Naming Style: Choose Kebab Case, Camel Case, Snake Case, CSS Custom Property, or Dot Notation.

  7. Add a Prefix: Optionally add a project or design-system prefix.

  8. Choose Token Mode: Select Semantic, Primitive, or Component.

  9. Generate the Token: Click Generate Token to create the standardized token name.

Example

Input:

Token Category: Color

Purpose / Name: Primary

Variant: Background

State: Default

Naming Style: CSS Custom Property

Token Mode: Semantic

Prefix: app

Output: --app-color-primary-background

The exact output depends on the values and naming style you select.

Supported Token Categories

The generator supports common design-system token categories:

  • Color

  • Spacing

  • Typography

  • Border Radius

  • Shadow

  • Breakpoint

  • Z-Index

  • Motion

  • Opacity

  • Component

Naming Styles

Choose the naming format that matches your design system:

  • Kebab Case: color-primary-hover

  • Camel Case: colorPrimaryHover

  • Snake Case: color_primary_hover

  • CSS Custom Property: --color-primary-hover

  • Dot Notation: color.primary.hover

Semantic vs Primitive vs Component Tokens

Primitive tokens represent foundational values such as colors, spacing values, or font sizes.

Semantic tokens describe how a value is used, such as text-primary or surface-background.

Component tokens are tied to specific UI components and their properties or states.

Using different token modes can help separate raw design values from their intended usage.

Bulk Token Generator

The Bulk Token Generator lets you enter multiple token names separated by commas and generate tokens in one operation. This can be useful when creating several related tokens with the same naming configuration.

Why Use a Design Token Naming Generator?

  • Create consistent token names

  • Standardize design-system naming

  • Support multiple naming conventions

  • Generate semantic, primitive, and component tokens

  • Include UI states such as hover and disabled

  • Create multiple tokens in bulk

  • Reduce naming inconsistencies across design and development

Frequently Asked Questions

What are design tokens? add
Design tokens are named values that store reusable design decisions such as colors, spacing, typography, shadows, and motion. They help keep design systems consistent across products and platforms.
What naming convention should design tokens use? add
The naming convention should match your team's tooling and workflow. Common options include kebab case, camel case, snake case, CSS custom properties, and dot notation.
What is the difference between semantic and primitive tokens? add
Primitive tokens represent foundational values, while semantic tokens describe how those values are used. For example, a raw color can be a primitive token while text-primary can be semantic.
Can I generate multiple design tokens? add
The Bulk Token Generator lets you enter multiple token names separated by commas and generate multiple tokens using your configured naming options.