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

Basic information

Config

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

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

Tools

No tools detected

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

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)