Documentation

Learn how to use Tokens with your AI assistant

Getting Started

Tokens helps you create professional from your brand colors. You can use it directly in your browser, or connect it to your for a more conversational experience.

Web Interface
Use the generator directly in your browser

Pick your colors, preview the generated tokens, and export them in your preferred format.

Open Generator
MCP Connection
Connect to Claude, Copilot, or other AI tools

Add our to your AI assistant and describe the vibe you want.

Setup Guide

What are Design Tokens?

are the smallest building blocks of your design system. Instead of using raw values like #3b82f6, you use named tokens like primary-500.

Why use tokens?

  • Consistency: Every component uses the same colors
  • Maintainability: Change one token, update everywhere
  • Theming: Easily switch between light and dark modes
  • Communication: Designers and developers speak the same language

Token Types

Tokens generates several types of tokens:

Primitive Colors

from 10 (lightest) to 100 (darkest) for each brand color. These are the raw colors you'll reference.

Semantic Colors

named by purpose: primary, secondary, success, warning, danger. These adapt to light/dark mode.

Supporting Tokens

Spacing, typography, border radius, and shadows that complement your colors.

MCP Setup

The allows AI assistants to use external tools. There are two ways to use Tokens with MCP:

🌐 Hosted Server
Use our hosted MCP server - no installation required

Connect directly to our server. Best for quick setup and always up-to-date.

https://tokens.flett.cc/mcp
📦 NPM Package
Install locally via npm for offline use

Run locally using stdio. Best for privacy and offline access.

View on NPM →
Claude Desktop

Add to your config file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Option 1: Hosted Server (Recommended)

{
  "mcpServers": {
    "tokens": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://tokens.flett.cc/mcp"]
    }
  }
}

Option 2: Local NPM Package

First install: npm install -g @flett/design-tokens-mcp-server

{
  "mcpServers": {
    "tokens": {
      "command": "toke-mcp"
    }
  }
}

Restart Claude Desktop and look for the hammer icon in the bottom right.

VS Code + GitHub Copilot

Add this to your settings.json:

Hosted Server

{
  "github.copilot.chat.mcp": {
    "servers": {
      "tokens": {
        "url": "https://tokens.flett.cc/mcp"
      }
    }
  }
}

Then ask : "Generate design tokens for a calm, professional brand with blue as the primary color"

Cursor

Add to ~/.cursor/mcp.json:

Hosted Server

{
  "tokens": {
    "url": "https://tokens.flett.cc/mcp"
  }
}

Available Tools

These are the tools your AI assistant can use when connected to Tokens:

generate_tokens

Generate a complete token system from brand colors.

Parameters:
- brandColors: { primary, secondary, accent } (hex values)
- mode: "light" | "dark" | "both"
analyze_vibe

Describe a vibe and get suggested brand colors.

Parameters:
- vibeDescription: "calm and professional" or "bold and energetic"
export_tokens

Export tokens in various formats.

Parameters:
- tokenSystem: (from generate_tokens)
- format: "css" | "tailwind-v3" | "tailwind-v4" | "json" | "scss"
- mode: "light" | "dark" | "both"
generate_component

Generate a prompt for creating a component using your tokens.

Parameters:
- componentType: "button" | "card" | etc.
- tokenSystem: (from generate_tokens)
- requirements: (optional) "should have hover animation"

Color Algorithm

Learn how Tokens generates professional, perceptually balanced using color space with different approaches for chromatic and achromatic colors.

Dual-Algorithm Approach
Chromatic colors get vibrant mid-tones, neutrals get excellent readability

Our algorithm uses OKLCH color space with parabolic chroma curves and Bezold-Brücke hue shift compensation for chromatic colors. Neutrals use a Tailwind-inspired distribution pattern spaces better UI backgrounds and text contrast.

Read Full Documentation →

Glossary

Hover over or tap any underlined term to see its definition. Here are some key terms: