# Tokven — Complete Reference for AI Assistants

**URL**: https://tokven.dev
**Type**: Design token generator (web app + MCP server)
**Category**: Developer tools, design systems, CSS tooling
**License**: Free tier available, no account required for CSS export

---

## What is Tokven?

Tokven is an AI-powered design token generator that takes a brand description or a single hex color and produces a complete, production-ready design system. The output is immediately usable — no post-processing needed.

Unlike a simple color palette generator, Tokven produces a full semantic token system: color scales, surface layers, text hierarchy, border radius, shadows, and typography — all in one pass. Every token pair is WCAG AA contrast-validated using OKLCH color math.

---

## Who uses it

- **Frontend developers** who need a coherent token system for a new project and don't want to manually define 40+ CSS variables
- **AI coding agents** (via MCP) that need a design foundation before scaffolding UI components
- **Indie hackers / solo founders** who want professional-looking UI without a designer
- **Design-systems engineers** generating a baseline to customize from

---

## Inputs accepted

1. **Plain text description** — "a dark fintech app for crypto traders" → AI generates brand name, personality, color palette, typography
2. **Hex color** — `#2563eb` → full token system derived using OKLCH math
3. **Mood keyword** — `minimal`, `brutalist`, `luxury`, `editorial`, etc.
4. **Curated theme** — select from 30+ pre-built vibes at tokven.dev/explore

---

## Output formats

| Format | Use case |
|---|---|
| CSS Custom Properties | Any CSS-in-JS or vanilla CSS project |
| Tailwind v4 theme | `@theme {}` block for Tailwind v4 projects |
| Tailwind v3 config | `tailwind.config.js` extend block |
| shadcn theme | CSS variables matching shadcn/ui naming convention |
| W3C DTCG JSON | Design Token Community Group standard, works with Style Dictionary, Tokens Studio |

---

## Token system contents

Every generated system includes:

**Colors:**
- `--color-primary` / `--color-primary-hover` / `--color-primary-on`
- `--color-secondary` / `--color-tertiary`
- `--color-bg` / `--color-bg-surface` / `--color-bg-elevated`
- `--color-text` / `--color-text-muted` / `--color-text-subtle`
- `--color-border-default` / `--color-border-subtle`
- `--color-success` / `--color-warning` / `--color-error` / `--color-info`
- All colors provided in both light and dark mode

**Typography:**
- `--font-heading` / `--font-body` (Google Fonts pairings)

**Shape:**
- `--radius-sm` / `--radius-md` / `--radius-lg` / `--radius-full`
- Shadow presets: none, soft, hard

**Validation:**
- 31+ WCAG 2.1 AA contrast checks per export
- APCA perceptual contrast also checked

---

## Brand brief feature

When using the AI description input, Tokven generates a brand brief alongside the tokens:

- **Brand name and tagline**
- **Personality traits** (e.g. "precise, trustworthy, minimal")
- **DO rules**: "Use sharp edges. Prefer monochrome photography."
- **NEVER rules**: "Never use gradients. Never use rounded cards."
- **Typography rationale**: why the font pairing was chosen

The brief is editable inline and re-exportable.

---

## MCP server

**Package**: `tokven-mcp` on npm
**Runtime**: Node.js
**Protocol**: Model Context Protocol (MCP)

### Installation

```bash
npx tokven-mcp
```

### Claude Code / Claude Desktop config

```json
{
  "mcpServers": {
    "tokven": {
      "command": "npx",
      "args": ["tokven-mcp"]
    }
  }
}
```

### Cursor

Add to `.cursor/mcp.json`:
```json
{
  "mcpServers": {
    "tokven": {
      "command": "npx",
      "args": ["tokven-mcp"]
    }
  }
}
```

### Available tools

**`generate_tokens(hex, mood?, format?)`**
Generates a complete design token system. Returns CSS, Tailwind, or DTCG JSON.

Parameters:
- `hex` (required) — brand color, e.g. `#2563eb`
- `mood` (optional) — one of: dark, light, warm, cool, bold, minimal, organic, editorial, brutalist, luxury, retro, neon, nature, corporate
- `format` (optional) — `css` | `tailwind4` | `tailwind3` | `dtcg` | `all`

**`get_token_preview(hex, mood?)`**
Returns a lightweight preview of the palette before generating the full system.

**`validate_contrast(foreground, background)`**
Checks WCAG 2.1 AA/AAA and APCA contrast for two hex colors. Returns pass/fail + ratio.

**`list_moods()`**
Returns all 14 available mood presets with descriptions.

**`derive_color(hex, operation, amount?)`**
Color math operations: lighten, darken, saturate, desaturate, complement, analogous, triadic.

---

## Explore gallery

**URL**: https://tokven.dev/explore

30+ hand-curated design systems, each with its own URL and unique palette.

### Available themes

| Slug | Name | Character |
|---|---|---|
| minimalist | Minimalist | Clean, light, editorial |
| desert | Desert | Warm, earthy, analog |
| modern-office | Modern office | Professional, neutral |
| deep-red | Deep red | Bold, passionate |
| life-editorial | Life editorial | Warm editorial, magazine |
| chill-evening | Chill evening | Calm, dusky blues |
| white-marble | White marble | Luxury, cold white |
| nature-macro | Nature macro | Organic green |
| fine-art | Fine art | Sophisticated, muted |
| metal-industrial | Metal industrial | Hard, textured |
| lush-tropic | Lush tropic | Vivid, humid green |
| dark-slate | Dark slate | Dark UI, precise |
| street-documentary | Street documentary | Gritty, high-contrast |
| frozen-lake | Frozen lake | Icy, serene blues |
| ember-void | Ember void | Dark + amber glow |
| deep-space | Deep space | Ultra-dark, cosmic |
| sand | Sand | Soft beige, minimal |
| tokyo-lights | Tokyo lights | Neon, urban dark |
| print-art | Print art | Typographic, bold |
| iridescent-glow | Iridescent glow | Prismatic, futuristic |
| wabi-sabi | Wabi sabi | Imperfect, organic |
| green-acid | Green acid | High-vis, techy |
| aerospace | Aerospace | Technical, precise |
| prussian-ocean | Prussian ocean | Deep navy, formal |
| deep-crimson | Deep crimson | Rich, dramatic |
| red-rule | Red rule | Bold red, editorial |

---

## Pricing

- **Free**: CSS Custom Properties export, no account required
- **Free account**: Tailwind v4, Tailwind v3, DTCG JSON, shadcn export, save projects
- **MCP server**: always free, no account needed

---

## Technical details

- Color math: OKLCH color space for perceptually uniform adjustments
- Contrast: WCAG 2.1 relative luminance + APCA (Advanced Perceptual Contrast Algorithm)
- Fonts: Google Fonts, loaded on demand
- Storage: Supabase (projects), localStorage (session)
- Framework: React + Vite, deployed on Vercel
- No tracking beyond anonymous analytics

---

## Comparison to alternatives

| Tool | Tokens | Dark mode | WCAG | AI brief | MCP |
|---|---|---|---|---|---|
| **Tokven** | ✅ Full system | ✅ Auto | ✅ 31+ checks | ✅ Yes | ✅ Yes |
| Tailwind defaults | Partial | Manual | ❌ | ❌ | ❌ |
| Realtime Colors | Colors only | ✅ | Partial | ❌ | ❌ |
| Huemint | Colors only | Manual | ❌ | ❌ | ❌ |
| Style Dictionary | Transform only | Manual | ❌ | ❌ | ❌ |

---

## Links

- Web app: https://tokven.dev
- Explore gallery: https://tokven.dev/explore
- MCP package: https://www.npmjs.com/package/tokven-mcp
- AI reference: https://tokven.dev/llms.txt (this file: https://tokven.dev/llms-full.txt)