Skip to main content

​
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

ParameterTypeRequiredDescription
tokenset_idstringYesThe ID of the tokenset
mode_idstringYesThe ID of the mode
namestringYesThe name of the token (e.g., “color.primary”)
typestringYesThe token type (see supported types below)
valuestringYesThe value of the token
descriptionstringNoOptional description of the token
alias_tostringNoOptional token name to reference (for aliases)

​
Supported Token Types

TypeDescriptionExample Value
colorColor values#FF0000, rgb(255,0,0)
dimensionSpacing, sizing16px, 1rem, 2em
fontFamilyFont family namesInter, Arial, sans-serif
fontWeightFont weight values400, bold, normal
fontSizeFont sizes16px, 1.25rem
lineHeightLine height values1.5, 24px
letterSpacingLetter spacing0.5px, -0.02em
durationTime durations200ms, 0.3s
cubicBezierEasing curvescubic-bezier(0.4, 0, 0.2, 1)
numberNumeric values42, 3.14
stringText values"Hello World"
booleanTrue/false valuestrue, false
strokeStyleBorder stylessolid, dashed
borderBorder definitions1px solid #000
transitionCSS transitionsall 0.3s ease
shadowBox shadows0 2px 4px rgba(0,0,0,0.1)
gradientCSS gradientslinear-gradient(to right, #fff, #000)
typographyComplete text stylesComplex 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

​
See Also