Most color tools still generate palettes that look mismatched across hues—a problem baked into HSL itself. FramingUI takes a different approach, using the OKLCH color space to build perceptually uniform palettes that your whole team can trust.
OKLCH corrects a fundamental flaw in older color models. In HSL, "50% lightness" looks dramatically brighter in yellow than in blue. OKLCH maps lightness to how humans actually perceive it, so a color at L=0.5 reads as equally bright regardless of hue. The practical result: your primary, success, warning, and error palettes feel visually balanced without manual tweaking.
Generating Your First Token Set
Open the interactive playground at framingui.com. Choose a base hue for your brand's primary color—FramingUI handles the rest.
From that single input, the generator builds:
- A primary palette with 10 perceptually uniform shades
- Semantic color roles: success, warning, error, info
- A neutral scale calibrated against the same lightness curve
Every color combination is checked against WCAG 2.1 contrast ratios in real time. Pairs that fall below the AA threshold are flagged before you export anything. Dark mode palettes are generated alongside light mode, maintaining the same visual hierarchy and contrast across both.
The component preview panel applies your tokens to real UI elements—buttons, form fields, cards, badges—so you can validate decisions in context rather than in the abstract.
Exporting Your Tokens
FramingUI exports in three formats, each suited to a different part of your stack:
CSS Custom Properties drop directly into any project. The generated file uses var(--token-name) references throughout, so theming works without JavaScript.
Tailwind CSS output extends your tailwind.config.js with a colors object keyed to your token names. Every Tailwind utility class maps back to a token.
JSON gives you the raw token structure following the W3C Design Token format. Use it with Style Dictionary, import it into Figma via Tokens Studio, or feed it to FramingUI's MCP server so AI tools can read your design system directly.
Connecting to AI Tools
Once you have a tokens.json file, you can wire it to Claude Code or Cursor through FramingUI's MCP server. The server exposes your tokens over the Model Context Protocol so AI can query them on demand rather than relying on training data defaults.
The one-time setup looks like this:
npx -y @framingui/mcp-server@latest init
This command detects your project framework, installs the necessary packages, and writes a .mcp.json at the project root:
{
"mcpServers": {
"framingui": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@framingui/mcp-server@latest"]
}
}
}
Restart Claude Code, then ask it to build any component. Instead of generating bg-blue-500 or #3B82F6, the AI queries your tokens and uses the actual names from your design system.
What the Workflow Looks Like in Practice
A typical session: you pick a brand hue, adjust the contrast level target (AA or AAA), and preview the generated palette against your component set. Satisfied with the result, you export to JSON and run init. From that point, every AI-generated component starts from your tokens rather than from generic Tailwind defaults.
The playground is non-destructive—you can iterate on hue, chroma, and neutral balance without touching your codebase. Commit the tokens.json when you're ready. The MCP server reads the file on demand, so the next AI generation automatically picks up any changes.
Start with a single brand color. Build a complete, accessible, AI-ready design system in one session.