Skip to main content

​
Quickstart Guide

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

​
Step 1: Create an Account

Visit 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!)
Store your API token securely. It provides full access to your design tokens.

​
Step 6: Make Your First API Call

Test your API token: 
curl -H "Authorization: Bearer YOUR_TOKEN" \
  https://app.tokencraft.dev/api/v1/workspaces

​
Step 7: Export Your Tokens

Export your tokens in your preferred format: 
curl -H "Authorization: Bearer YOUR_TOKEN" \
  "https://app.tokencraft.dev/api/v1/tokensets/{TOKENSET_ID}/modes/{MODE_ID}/export?format=css" \
  -o tokens.css

​
What’s Next?

Learn Core Concepts

Understand workspaces, tokensets, and modes

Explore the API

Deep dive into all available endpoints

Setup MCP Server

Use Tokencraft with Claude Desktop

CI/CD Integration

Automate token syncing

​
Environment Setup

For convenience, store your credentials as environment variables:
.env
TOKENCRAFT_TOKEN=dtk_your_token_here
TOKENCRAFT_API_BASE=https://app.tokencraft.dev/api/v1

​
Common Use Cases

​
1. Web Development

Export as CSS variables and import into your stylesheet:
styles/tokens.css
@import url('tokens.css');

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

​
2. React/Vue Applications

Fetch tokens at build time:
scripts/sync-tokens.js
const fs = require('fs');
const fetch = require('node-fetch');

async function syncTokens() {
  const response = await fetch(
    `${process.env.TOKENCRAFT_API_BASE}/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:
prebuild.sh
#!/bin/bash

# iOS
curl -H "Authorization: Bearer $TOKENCRAFT_TOKEN" \
  "$TOKENCRAFT_API_BASE/tokensets/$TOKENSET_ID/modes/$MODE_ID/export?format=ios" \
  -o ios/DesignTokens.swift

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

​
Need Help?

API Authentication

Learn more about API authentication and security