From palette to color system
Map UI roles, generate OKLCH-based scales, export production-ready tokens, and preview in realistic mockups — all from one palette. Available on Plus and Pro.
UI role mapping
Assign semantic roles to your palette colors: background, surface, border, text, action, and state. The preview system uses these roles to render realistic UI mockups.
- 6 core role categories covering all UI needs
- Automatic contrast validation for role pairs
- Preview in landing, dashboard, and mobile mockups
--bg--surface--border--text--action--stateOKLCH scale generation
Generate perceptually uniform scales from 50 to 900 using OKLCH color space. Every scale has monotonic lightness — no unexpected brightness jumps.
- Steps 50–900 with consistent perceptual spacing
- OKLCH ensures visual uniformity across hues
- Gamut-safe hex output — no clipped colors
50
100
200
300
400
500
600
700
800
900
Monotonic OKLCH lightness · Perceptually uniform
Token export & publishing
Export your design system as structured JSON tokens, CSS custom properties, or Figma-compatible files. Pro users can publish systems with shareable URLs.
- Core tokens, derived tokens, and role usage maps
- Publish and share via unique system URL
- Score report with subscores and remediation advice
Ready for the full design system?
See design.md — our 8-step spec workflow that adds typography, components, iconography, and guardrails on top of your color system.
Build your color system
Roles, scales, and token export are available on Plus and Pro plans. Start free and upgrade when you're ready.