Tokven Mcp

Name: Tokven Mcp
Author: Mihkel00

@Mihkel00

About Tokven Mcp

Generate complete design token systems from a hex color — OKLCH-derived, WCAG-validated, multi-format

#design-tokens #design-system #css-variables #tailwind #shadcn #oklch #wcag #color #typography #cursor #claude #windsurf #brand

Config

Add this server to your MCP-compatible client using the configuration below.

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

Tools

Generate a complete design token system from a brand hex color. Returns OKLCH-derived colors (light + dark mode), typography pairing, spacing scale, border radius, shadows, WCAG contrast validation, APCA scoring, design intent brief, and a visual preview URL on tokven.dev. Output in CSS, Tailwind v4, Tailwind v3, or DTCG JSON. Tip: call get_token_preview first to let the user approve the palette visually.

Quick preview of a design token system without full CSS output. Returns colors for light and/or dark mode, font pairing, radius, shadow style, WCAG contrast summary with near-failing pairs, design intent brief, and a visual preview URL on tokven.dev. Recommended first step: call this before generate_tokens so the user can approve the palette visually.

Check WCAG 2.1 contrast ratio and APCA (WCAG 3 candidate) contrast between two colors. Returns ratio, AA/AAA pass/fail for normal and large text, and APCA Lc value.

Returns all available mood presets for the generate_tokens tool, with descriptions of the visual personality each produces.

Lightweight single-purpose color derivation. Derive accessible background scales, text colors, brand color 4-token sets, status color variants, or light↔dark counterpart backgrounds. Returns raw tokens as JSON — no CSS wrapping. Use this when you need a quick answer like 'give me accessible grays for this background' or 'what text colors work on #0d0d0d?'

Overview

What is Tokven Mcp?

Tokven Mcp is a design token generator that creates a complete design system from a single brand hex color. It outputs OKLCH-derived colors for light and dark modes, typography pairings, spacing scales, border radii, shadows, and WCAG contrast validation. It is for developers and designers who need a quick, color-based token system.

How to use Tokven Mcp?

The server exposes four tools: generate_tokens (generate full token set from a hex color), get_token_preview (preview tokens without full CSS output), validate_contrast (check WCAG 2.1 contrast ratio between two colors), and list_moods (list available mood presets). No installation or configuration commands are specified in the README.

Key features of Tokven Mcp

Generates design tokens from a single brand hex color
Returns OKLCH-derived colors with light and dark modes
Includes typography pairing, spacing, border radius, shadows
Validates colors for WCAG 2.1 contrast compliance
Supports output in CSS Custom Properties, Tailwind v4/v3, and W3C DTCG JSON
Offers 13 mood presets: warm, cool, bold, dark, soft, minimal, brutalist, playful, vintage, luxury, nature, neon, corporate

Use cases of Tokven Mcp

Quickly generate a full design token system from a brand color
Validate color contrast for accessibility during design
Preview token outputs before generating CSS
Apply mood presets to change the aesthetic of the token set
Output tokens in multiple formats for different frameworks (Tailwind, CSS, JSON)