create_token

Creates a new design token within a specific mode of a tokenset.

Tool Schema

{
  "name": "create_token",
  "description": "Create a new token in a mode",
  "inputSchema": {
    "type": "object",
    "properties": {
      "tokenset_id": {
        "type": "string",
        "description": "The ID of the tokenset"
      },
      "mode_id": {
        "type": "string",
        "description": "The ID of the mode"
      },
      "name": {
        "type": "string",
        "minLength": 1,
        "description": "The name of the token"
      },
      "type": {
        "type": "string",
        "enum": [
          "color", "dimension", "fontFamily", "fontWeight", "fontSize",
          "lineHeight", "letterSpacing", "duration", "cubicBezier",
          "number", "strokeStyle", "border", "transition", "shadow",
          "gradient", "typography", "string", "boolean"
        ],
        "description": "The type of the token"
      },
      "value": {
        "type": "string",
        "description": "The value of the token"
      },
      "description": {
        "type": "string",
        "description": "Optional description of the token"
      },
      "alias_to": {
        "type": "string",
        "description": "Optional token name to alias to"
      }
    },
    "required": ["tokenset_id", "mode_id", "name", "type", "value"]
  }
}

Parameters

Parameter	Type	Required	Description
`tokenset_id`	string	Yes	The ID of the tokenset
`mode_id`	string	Yes	The ID of the mode
`name`	string	Yes	The name of the token (e.g., “color.primary”)
`type`	string	Yes	The token type (see supported types below)
`value`	string	Yes	The value of the token
`description`	string	No	Optional description of the token
`alias_to`	string	No	Optional token name to reference (for aliases)

Supported Token Types

Type	Description	Example Value
`color`	Color values	`#FF0000`, `rgb(255,0,0)`
`dimension`	Spacing, sizing	`16px`, `1rem`, `2em`
`fontFamily`	Font family names	`Inter`, `Arial, sans-serif`
`fontWeight`	Font weight values	`400`, `bold`, `normal`
`fontSize`	Font sizes	`16px`, `1.25rem`
`lineHeight`	Line height values	`1.5`, `24px`
`letterSpacing`	Letter spacing	`0.5px`, `-0.02em`
`duration`	Time durations	`200ms`, `0.3s`
`cubicBezier`	Easing curves	`cubic-bezier(0.4, 0, 0.2, 1)`
`number`	Numeric values	`42`, `3.14`
`string`	Text values	`"Hello World"`
`boolean`	True/false values	`true`, `false`
`strokeStyle`	Border styles	`solid`, `dashed`
`border`	Border definitions	`1px solid #000`
`transition`	CSS transitions	`all 0.3s ease`
`shadow`	Box shadows	`0 2px 4px rgba(0,0,0,0.1)`
`gradient`	CSS gradients	`linear-gradient(to right, #fff, #000)`
`typography`	Complete text styles	Complex typography object

Response

{
  "id": "550e8400-e29b-41d4-a716-446655440035",
  "name": "color.primary",
  "type": "color",
  "value": "#007AFF",
  "description": "Primary brand color",
  "alias_to": null,
  "mode_id": "550e8400-e29b-41d4-a716-446655440020",
  "tokenset_id": "550e8400-e29b-41d4-a716-446655440010",
  "created_at": "2025-01-20T18:00:00Z",
  "updated_at": "2025-01-20T18:00:00Z"
}

Example Usage in Claude

Create a Color Token

You: Create a primary color token with value #007AFF in the Light mode

Claude: I'll create a new color token in the Light mode.

Token created successfully:
- **Name**: color.primary
- **Type**: color
- **Value**: #007AFF
- **Description**: Primary brand color
- **ID**: 550e8400-e29b-41d4-a716-446655440035

Create an Alias Token

You: Create a "color.brand" token that aliases to "color.primary"

Claude: I'll create an alias token that references the primary color.

Token created successfully:
- **Name**: color.brand
- **Type**: color
- **Value**: (alias)
- **Alias To**: color.primary
- **Resolved Value**: #007AFF

Create Different Token Types

You: Create spacing tokens for the design system

Claude: I'll create several spacing tokens.

Created tokens:
- **spacing.small**: 8px (dimension)
- **spacing.medium**: 16px (dimension)
- **spacing.large**: 24px (dimension)
- **spacing.xl**: 32px (dimension)

Token Naming Conventions

Use consistent naming patterns:

color.primary, color.secondary
spacing.sm, spacing.md, spacing.lg
font.size.sm, font.size.lg
border.radius.sm, border.radius.lg

Aliases vs Direct Values

Direct tokens: Have their own value (e.g., color.primary: "#007AFF")
Alias tokens: Reference other tokens by name (e.g., color.brand → color.primary)

Common Use Cases

1. Brand Colors

You: Add the new brand color palette to the Light mode

2. Spacing System

You: Create a consistent spacing scale (4px, 8px, 16px, 32px...)

3. Typography Scale

You: Set up font sizes for the design system

4. Component Tokens

You: Create tokens for button styles and states

Notes

Token names must be unique within a mode
Aliased tokens automatically resolve to their referenced token’s value
You can create tokens in any mode, allowing different values per theme
Use descriptive names that follow your design system conventions

​create_token

​Tool Schema

​Parameters

​Supported Token Types

​Response

​Example Usage in Claude

​Create a Color Token

​Create an Alias Token

​Create Different Token Types

​Token Naming Conventions

​Aliases vs Direct Values

​Common Use Cases

​1. Brand Colors

​2. Spacing System

​3. Typography Scale

​4. Component Tokens

​Notes

​See Also

create_token

Tool Schema

Parameters

Supported Token Types

Response

Example Usage in Claude

Create a Color Token

Create an Alias Token

Create Different Token Types

Token Naming Conventions

Aliases vs Direct Values

Common Use Cases

1. Brand Colors

2. Spacing System

3. Typography Scale

4. Component Tokens

Notes

See Also