Tokven Mcp
About
Generate complete design token systems from a hex color — OKLCH-derived, WCAG-validated, multi-format
Details
- Author
- Mihkel00
- Downloads
- 250
- Categories
- Other
Jump to
- 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
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Tokven McpCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
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.
generate_tokens
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.
get_token_preview
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.
validate_contrast
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.
list_moods
Returns all available mood presets for the generate_tokens tool, with descriptions of the visual personality each produces.
derive_color
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?'
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"tokven mcp": {
"tokven": {
"command": "npx",
"args": [
"-y",
"tokven-mcp"
]
}
}
}
}McpServers
{
"tokven": {
"command": "npx",
"args": [
"-y",
"tokven-mcp"
]
}
}Tokven — Design Token Generator
Generate a complete design token system from a single brand hex color. Returns OKLCH-derived colors (light + dark mode), typography pairing, spacing scale, border radius, shadows, and WCAG contrast validation. Output in CSS Custom Properties, Tailwind v4 @theme, Tailwind v3 config, or W3C DTCG JSON.
Tools:
generate_tokens — Generate a complete design token system from a brand hex color
get_token_preview — Quick preview of tokens without full CSS output
validate_contrast — Check WCAG 2.1 contrast ratio between two colors
list_moods — List all available mood presets (warm, cool, bold, dark, soft, minimal, brutalist, playful, vintage, luxury, nature, neon, corporate, retro)
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
