Getting Started
Tokens helps you create professional design tokens from your brand colors. You can use it directly in your browser, or connect it to your AI assistant for a more conversational experience.
Web Interface
Pick your colors, preview the generated tokens, and export them in your preferred format.
Open GeneratorWhat are Design Tokens?
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
Primitive Colors
Color scales from 10 (lightest) to 100 (darkest) for each brand color. These are the raw colors you'll reference.
Semantic Colors
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 Model Context Protocol allows AI assistants to use external tools. There are two ways to use Tokens with MCP:
Hosted Server
Connect directly to our server. Best for quick setup and always up-to-date.
https://tokens.flett.cc/mcpClaude Desktop
Add to your Claude Desktop 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 VS Code settings.json:
Hosted Server
{
"github.copilot.chat.mcp": {
"servers": {
"tokens": {
"url": "https://tokens.flett.cc/mcp"
}
}
}
}Then ask Copilot: "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 shadcn/ui 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 color scales using OKLCH color space with different approaches for chromatic and achromatic colors.
Overview
Tokens uses a sophisticated dual-algorithm approach to generate color scales that are both aesthetically pleasing and functionally superior for UI design. The system automatically detects whether a color is chromatic (has hue) or achromatic (neutral/gray) and applies the appropriate algorithm.
Why Two Algorithms?
Different colors have different needs in UI design:
- Chromatic colors (blues, greens, oranges, etc.) benefit from vibrant mid-tones and smooth transitions
- Achromatic colors (grays, neutrals) need subtle light shades for backgrounds and high-contrast dark shades for text
The OKLCH Foundation
Both algorithms use OKLCH color space, which provides perceptually uniform color manipulation. This means equal numeric changes produce equal visual changesâsomething RGB and HSL can't guarantee.
L - Lightness (0-1)
Perceived brightness from black (0) to white (1). Unlike HSL, lightness values match human perception.
C - Chroma (0+)
Colorfulness or saturation. Higher values = more vibrant. Can exceed 0.37 for very saturated colors.
H - Hue (0-360°)
Color angle: 0° = red, 120° = green, 240° = blue, etc.
Learn more at oklch.com
APCA Contrast for Accessibility
We use APCA (Advanced Perceptual Contrast Algorithm) to ensure our color scales meet modern accessibility standards. Unlike WCAG 2.x contrast ratios, APCA provides perceptually accurate, context-aware contrast measurements.
Perceptually Accurate
APCA accounts for how humans actually perceive contrast, including spatial frequency, polarity effects, and ambient lighting conditions.
Directional Awareness
Unlike WCAG ratios, APCA recognizes that light text on dark backgrounds needs different treatment than dark text on light backgrounds.
Context-Aware Scoring
APCA Lc values directly relate to use cases: Lc 90 for body text, Lc 75 for large text, Lc 60 for UI elements, Lc 45 for disabled states.
How We Use APCA
When generating color scales, we use APCA to compute optimal lightness values that ensure sufficient contrast for different use cases. This guarantees that:
- Light shades work for subtle backgrounds without accessibility issues
- Mid-range shades provide appropriate contrast for interactive elements
- Dark shades meet standards for body text (Lc 90+)
- All scales are perceptually uniform and predictable
Chromatic Color Algorithm
For colors with hue (blues, greens, oranges, purples, etc.), we use a Radix Colors-inspired approach with smooth easing curves, progressive chroma distribution, and constant hue for brand consistency.
Lightness uses adaptive scaling based on available headroom above and below the base color. Smooth easing curves at the light end optimize for UI backgrounds, while larger jumps at the dark end ensure text contrast and accessibility.
Shade Headroom Usage Purpose 25 +98% of available Nearly white (subtle tint) 50 +93% of available Very light background 100 +86% of available Light background 200 +76% of available Soft background 300 +62% of available UI element background 400 +38% of available Hover state 500 0% (exact base) Base/primary color 600 -20% of available Active/pressed state 700 -38% of available Borders 800 -56% of available Solid backgrounds 900 -76% of available High contrast text 950 -90% of available Highest contrast
This adaptive approach ensures optimal results regardless of your base color's lightnessâwhether you start with a light pastel or a dark, rich hue.
Chroma follows a progressive easing curve that creates subtle pastel tints at the light end while maintaining full vibrancy through the interactive range (shades 400-900).
Shade Range Chroma % Purpose 25 8-23% Very subtle hint of color 50-100 23-55% Gentle color introduction 100-200 55-85% Smooth progression 200-400 85-100% Approaching peak 400-900 100% Full peak maintained 900-950 94-100% Minimal reduction
This distribution ensures light backgrounds feel clean and subtle while interactive elements (buttons, links, badges) remain vibrant and engaging. The extended peak range through shade 900 maintains color presence even in darker UI elements.
Unlike some algorithms that apply hue rotation, we maintain constant hue across all shades. This ensures perfect brand color consistency and creates a cohesive, recognizable palette.
Formula: H(n) = H_base (constant) Example: If base hue = 310.4° (purple) Shade 25: 310.4° Shade 500: 310.4° (exact base) Shade 950: 310.4°
This approach, inspired by Radix Colors, prioritizes brand recognition and visual consistency. Users will immediately recognize your brand color across all shades, from the lightest backgrounds to the darkest text.
Reference
This approach is inspired by Radix Colors' methodology for creating accessible, beautiful color systems:
Radix Colors Documentation âAchromatic Color Algorithm
For neutral colors (grays with chroma < 0.01), we use a distribution pattern inspired by Tailwind CSS that prioritizes readability and subtle UI backgrounds.
Neutrals need different behavior than chromatic colors. Light shades must be very subtle (close to white) for card backgrounds and subtle borders, while dark shades need aggressive contrast for readable text.
Shade Offset from base (500) Step Size Purpose 50 +0.429 0.015 Subtle backgrounds 100 +0.414 0.048 Very light UI elements 200 +0.366 0.052 Light borders/dividers 300 +0.314 0.162 Card backgrounds 400 +0.152 âĄHUGE Hover states 500 0.000 (base) 0.117 Base neutral 600 -0.117 0.068 Muted text 700 -0.185 0.102 Secondary text 800 -0.287 0.064 Body text (dark mode) 900 -0.351 0.060 Headings 950 -0.411 Deep backgrounds
Notice the massive lightness drops between shades 300-500. This creates excellent contrast for text on light backgrounds while keeping the lighter shades subtle and non-distracting.
Real-World Validation
This distribution closely matches Tailwind CSS's neutral scale, which has been battle-tested across thousands of production applications:
Tailwind neutral-500 in OKLCH: oklch(0.556 0 0) Our algorithm at base 0.556: 50: 0.985 (vs Tailwind 0.985) â 400: 0.708 (vs Tailwind 0.708) â 950: 0.145 (vs Tailwind 0.145) â
Benefits of This Approach
OKLCH ensures equal lightness changes produce equal visual changes. Shade 300 looks equally lighter than 400 as 700 looks darker than 600.
The parabolic chroma curve creates punchy, engaging colors for interactive elements like buttons and links without oversaturating backgrounds.
Neutral scales provide high-contrast text options while keeping light shades subtle enough for backgrounds and dividers.
Based on proven approaches from Radix Colors and Tailwind CSS, methodologies used in thousands of production applications and design systems.
Constant hue throughout the scale ensures perfect brand color recognition. Your purple stays purple from the lightest tint to the darkest shade.
Both chromatic and achromatic scales work together seamlessly, ensuring your entire design system feels cohesive.
Technical Implementation
A color is considered achromatic (neutral) if its chroma value is less than 0.01. This catches pure grays as well as colors that are nearly imperceptible from gray.
Regardless of algorithm, shade 500 always exactly matches your input color. This ensures your brand color appears precisely as intended in the generated scale.
The complete implementation is open source and available in our repository:
View oklch.ts on GitHub âGlossary
Hover over or tap any underlined term to see its definition. Here are some key terms: