export_mode

Exports design tokens from a specific mode in your chosen format (JSON, CSS, iOS, Android).

Tool Schema

{
  "name": "export_mode",
  "description": "Export a specific mode's tokens in various formats (json, css, ios, android)",
  "inputSchema": {
    "type": "object",
    "properties": {
      "tokenset_id": {
        "type": "string",
        "description": "The ID of the tokenset"
      },
      "mode_id": {
        "type": "string",
        "description": "The ID of the mode to export"
      },
      "format": {
        "type": "string",
        "enum": ["json", "css", "ios", "android"],
        "default": "json",
        "description": "The export format (default: json)"
      }
    },
    "required": ["tokenset_id", "mode_id"]
  }
}

Parameters

Parameter	Type	Required	Description
`tokenset_id`	string	Yes	The ID of the tokenset to export from
`mode_id`	string	Yes	The ID of the mode to export
`format`	string	No	Export format: `json`, `css`, `ios`, `android` (default: `json`)

Response

The response contains the exported token data as a string in the requested format.

{
  "content": ":root {\n  --colors-primary: #007AFF;\n  --spacing-medium: 16px;\n}",
  "format": "css"
}

Supported Formats

JSON (W3C Design Tokens)

Standard W3C Design Tokens format:

{
  "color": {
    "primary": {
      "value": "#007AFF",
      "type": "color",
      "description": "Primary brand color"
    }
  },
  "spacing": {
    "medium": {
      "value": "16px",
      "type": "dimension"
    }
  }
}

CSS Custom Properties

CSS variables ready for your stylesheets:

:root {
  /* Primary brand color */
  --color-primary: #007AFF;
  --spacing-medium: 16px;
  --font-size-base: 16px;
}

iOS (Swift)

Swift code with UIColor and CGFloat definitions:

import UIKit

extension UIColor {
    static let colorPrimary = UIColor(red: 0.000, green: 0.475, blue: 1.000, alpha: 1.000)
}

extension CGFloat {
    static let spacingMedium: CGFloat = 16.0
    static let fontSizeBase: CGFloat = 16.0
}

Android (XML)

Android XML resources:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="color_primary">#007AFF</color>
    <dimen name="spacing_medium">16dp</dimen>
    <dimen name="font_size_base">16sp</dimen>
</resources>

Example Usage in Claude

Export CSS Variables

You: Export the Light mode from my Colors tokenset as CSS

Claude: I'll export the Light mode tokens as CSS custom properties.

Here's your CSS export:

```css
:root {
  /* Brand Colors */
  --color-primary: #007AFF;
  --color-secondary: #5856D6;
  --color-background: #FFFFFF;

  /* Spacing */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
}

You can copy this CSS and use it in your project.


### Export for Development

You: Give me the JSON format for the Dark mode so I can use it in my design system Claude: I’ll export the Dark mode tokens in W3C Design Tokens JSON format.

{
  "color": {
    "primary": {
      "value": "#0A84FF",
      "type": "color",
      "description": "Primary brand color for dark mode"
    },
    "background": {
      "value": "#000000",
      "type": "color"
    }
  }
}


### Cross-Platform Export

You: Export the Light mode in both iOS Swift and Android XML formats Claude: I’ll export the tokens in both formats for you. iOS Swift:

extension UIColor {
    static let colorPrimary = UIColor(red: 0.000, green: 0.475, blue: 1.000, alpha: 1.000)
    static let colorBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
}

Android XML:

<color name="color_primary">#007AFF</color>
<color name="color_background">#FFFFFF</color>

## Common Use Cases

### 1. Web Development

You: Export CSS variables for my component library


### 2. Mobile Apps

You: Generate Swift color constants for the iOS app


### 3. Design System Documentation

You: Export JSON format to generate style documentation


### 4. Cross-Platform Consistency

You: Export both iOS and Android formats to ensure consistency

## Notes

- Only exports tokens from the specified mode
- Aliased tokens are resolved to their actual values in the export
- Comments and descriptions are included where supported by the format
- The export is returned as a string that you can copy to your project

## Tips

1. **Format Selection**: Choose the format that matches your target platform
2. **Mode Selection**: Export different modes for theme support (Light/Dark)
3. **Copy Content**: The export content is displayed but not automatically saved
4. **Batch Exports**: Request multiple formats in one conversation

## See Also

- [export_tokenset](/mcp/tools/export-tokens) - Export complete tokenset with all modes
- [list_tokens_by_mode](/mcp/tools/list-tokens-by-mode) - Preview tokens before export
- [get_mode](/mcp/tools/get-mode) - Get mode details

​export_mode

​Tool Schema

​Parameters

​Response

​Supported Formats

​JSON (W3C Design Tokens)

​CSS Custom Properties

​iOS (Swift)

​Android (XML)

​Example Usage in Claude

​Export CSS Variables