> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tokencraft.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get started with Tokencraft in under 5 minutes

# Quickstart Guide

Get up and running with Tokencraft in just a few steps.

## Step 1: Create an Account

Visit [app.tokencraft.dev](https://app.tokencraft.dev) and sign up for a free account.

## Step 2: Review Your Workspace

When you sign up, Tokencraft automatically creates a default workspace for you.
You're ready to go right away—no extra setup needed.

Want additional workspaces?

1. Click **"New Workspace"**
2. Give it a name (e.g., "Design System")
3. Add an optional description
4. Click **"Create"**

## Step 3: Create a Tokenset

Inside your workspace:

1. Click **"New Tokenset"**
2. Name it (e.g., "Colors")
3. The default mode "Base" is created automatically

## Step 4: Add Your First Token

1. Click **"Add Token"** in your tokenset
2. Fill in the details:
   * **Name**: `colors.primary.500`
   * **Type**: Color
   * **Value**: `#3b82f6`
   * **Description**: "Primary brand color"
3. Click **"Save"**

## Step 5: Generate an API Token

To access your tokens via the API:

1. Navigate to **API** in the sidebar
2. Click **"New Token"**
3. Give it a name (e.g., "Production API")
4. Copy the token immediately (you won't see it again!)

<Warning>
  Store your API token securely. It provides full access to your design tokens.
</Warning>

## Step 6: Make Your First API Call

Test your API token:

<CodeGroup>
  ```bash cURL theme={null}
  curl -H "Authorization: Bearer YOUR_TOKEN" \
    https://app.tokencraft.dev/api/v1/workspaces
  ```

  ```javascript JavaScript theme={null}
  const TOKENCRAFT_TOKEN = 'tkc_your_token_here';

  async function getWorkspaces() {
    const response = await fetch(
      'https://app.tokencraft.dev/api/v1/workspaces',
      {
        headers: {
          'Authorization': `Bearer ${TOKENCRAFT_TOKEN}`
        }
      }
    );
    
    const data = await response.json();
    console.log(data.workspaces);
  }

  getWorkspaces();
  ```

  ```python Python theme={null}
  import requests

  TOKENCRAFT_TOKEN = 'tkc_your_token_here'

  response = requests.get(
      'https://app.tokencraft.dev/api/v1/workspaces',
      headers={'Authorization': f'Bearer {TOKENCRAFT_TOKEN}'}
  )

  print(response.json()['workspaces'])
  ```
</CodeGroup>

## Step 7: Export Your Tokens

Export your tokens in your preferred format:

<CodeGroup>
  ```bash CSS Variables theme={null}
  curl -H "Authorization: Bearer YOUR_TOKEN" \
    "https://app.tokencraft.dev/api/v1/tokensets/{TOKENSET_ID}/modes/{MODE_ID}/export?format=css" \
    -o tokens.css
  ```

  ```bash JSON (W3C) theme={null}
  curl -H "Authorization: Bearer YOUR_TOKEN" \
    "https://app.tokencraft.dev/api/v1/tokensets/{TOKENSET_ID}/modes/{MODE_ID}/export?format=json" \
    -o tokens.json
  ```

  ```bash iOS (Swift) theme={null}
  curl -H "Authorization: Bearer YOUR_TOKEN" \
    "https://app.tokencraft.dev/api/v1/tokensets/{TOKENSET_ID}/modes/{MODE_ID}/export?format=ios" \
    -o DesignTokens.swift
  ```

  ```bash Android (XML) theme={null}
  curl -H "Authorization: Bearer YOUR_TOKEN" \
    "https://app.tokencraft.dev/api/v1/tokensets/{TOKENSET_ID}/modes/{MODE_ID}/export?format=android" \
    -o tokens.xml
  ```
</CodeGroup>

## What's Next?

<CardGroup cols={2}>
  <Card title="Learn Core Concepts" icon="book" href="/concepts/workspaces">
    Understand workspaces, tokensets, and modes
  </Card>

  <Card title="Explore the API" icon="code" href="/api-reference/introduction">
    Deep dive into all available endpoints
  </Card>

  <Card title="Setup MCP Server" icon="robot" href="/mcp/configuration">
    Use Tokencraft with Claude Desktop
  </Card>

  <Card title="CI/CD Integration" icon="github" href="/integrations/github-actions">
    Automate token syncing
  </Card>
</CardGroup>

## Environment Setup

For convenience, store your credentials as environment variables:

```bash .env theme={null}
TOKENCRAFT_TOKEN=tkc_your_token_here
```

## Common Use Cases

### 1. Web Development

Export as CSS variables and import into your stylesheet:

```css styles/tokens.css theme={null}
@import url('tokens.css');

.button-primary {
  background-color: var(--colors-primary-500);
}
```

### 2. React/Vue Applications

Fetch tokens at build time:

```javascript scripts/sync-tokens.js theme={null}
const fs = require('fs');
const fetch = require('node-fetch');

async function syncTokens() {
  const response = await fetch(
    `https://app.tokencraft.dev/api/v1/tokensets/${TOKENSET_ID}/modes/${MODE_ID}/export?format=json`,
    {
      headers: { 'Authorization': `Bearer ${process.env.TOKENCRAFT_TOKEN}` }
    }
  );
  
  const tokens = await response.json();
  fs.writeFileSync('src/tokens.json', JSON.stringify(tokens, null, 2));
}

syncTokens();
```

### 3. Mobile Applications

Download platform-specific files during your build:

```bash prebuild.sh theme={null}
#!/bin/bash

# iOS
curl -H "Authorization: Bearer $TOKENCRAFT_TOKEN" \
  "https://app.tokencraft.dev/api/v1/tokensets/$TOKENSET_ID/modes/$MODE_ID/export?format=ios" \
  -o ios/DesignTokens.swift

# Android
curl -H "Authorization: Bearer $TOKENCRAFT_TOKEN" \
  "https://app.tokencraft.dev/api/v1/tokensets/$TOKENSET_ID/modes/$MODE_ID/export?format=android" \
  -o android/app/src/main/res/values/tokens.xml
```

## Need Help?

<Card title="API Authentication" icon="key" href="/authentication">
  Learn more about API authentication and security
</Card>