UIX
Sign in Start free

UIX Design System Generator

Generate a design system from one color

Your brand, as a system. Pick a color and the Generator builds the shades, type, tokens, themes and components, checks every text color for contrast, and writes the code. Designers, developers and AI agents then follow the same rules.

Start free Use it in Figma

UIX at a glance

What it is
A design system generator for the web and Figma.
Who it is for
Designers, developers and teams who want one set of rules.
Input
One brand color, a logo or a preset.
Output
11-shade colors, type, tokens, themes, 74 components and 21 code formats.
Works with
Figma, your browser, the CLI and AI agents through MCP.
Price
Free to start

Colors

Pick one color. Get every shade.

One brand color becomes 11 shades per color, in evenly stepped OKLCH, with a contrast ratio shown on each one.

11 shades per color

Brand, neutral and feedback colors, named 50 to 950 or in the naming your team already uses. Shades step evenly in perceived lightness, so mid-tones stay clean.

Contrast on every shade

Each shade shows its WCAG ratio, so you know which ones are safe for text. APCA and a color-blind preview are there too.

Typography

Fonts and sizes that fit together.

Choose a font pairing and a scale ratio. UIX writes every text style, from Display to Caption.

50 pairings, 11 ratios

Pairs are grouped by mood, from clean sans to editorial serif. Ratios run from Minor Second to Octave, including the Golden Ratio.

Sizes per device

Each style gets its own size, line height and letter spacing for desktop, tablet and mobile. Free covers desktop; tablet and mobile are Pro.

Tokens

Every foundation, named and linked.

Spacing, radius, shadow, motion, opacity and z-index, saved as variables your developers read by name.

Tokens in three layers

Shades feed roles, roles feed parts. Change a shade once and every part that uses it follows.

Spacing to motion

A spacing scale from one base unit, five radius personalities, 15 effect presets and motion curves you can drag. Developers see the token name in Dev Mode, not a raw number.

Themes

Light and dark, wired up.

Tokens like bg/surface and text/primary point at your palette in every mode. Switch theme with one click in Figma and one attribute in code.

Dark mode in one click

UIX mirrors each token to the right shade on the other side of the scale. Dark mode is Pro; the semantic tokens and light theme are free.

Contrast fixes

Every text and background pair is checked against WCAG and APCA. Pairs that fall short get a one-click fix.

Modes and brands

High-contrast modes and extra brands share the same tokens. Both are Pro.

Components

74 components in your brand.

Real Figma components with variants and properties, built from your tokens. Change a color, sync again, and every component follows.

Every part, every state

Buttons, inputs, tabs, tables and modals, plus a marketing set. Sizes and states are variants, so icons and badges change without detaching.

Bound to your tokens

Fills, text, radius and spacing use your variables. Nothing is hard-coded.

Code

Ship it to the platform you use.

21 code formats from one source, with light and dark themes and responsive type. Download one .zip or sync to GitHub.

21 formats, 4 free

CSS variables, Tailwind v4, W3C design tokens and the AI Pack are free. Pro adds React, SwiftUI, Jetpack Compose, Flutter, WordPress, Webflow and more.

The AI Pack

AGENTS.md, CLAUDE.md, DESIGN.md and llms.txt, so Claude Code, Cursor and v0 read your tokens instead of guessing.

Audit

Find what drifted, then fix it.

Scan a page for a health score and the hard-coded values, misused tokens and near-duplicate colors behind it.

One health score

A single number for the page, from semantic, primitive and hard-coded usage.

Problems with a fix

Hard-coded colors, text, spacing and radius come with the closest token. Near-duplicates can be merged into one.

Accessibility check

WCAG 2.2 AA on your real layers: contrast, target size, text size, line height and focus. Pro adds an HTML report.

Plans

Free to start. Pro when you need it all.

Free gives you your first design system. Pro unlocks everything, with a 7-day free trial. Full details are on the pricing page.

Free

$0

  • 1 saved design system
  • 41 free presets and the free components
  • 4 code formats
Start free

Pro

$5.99 a month, or $48.99 a year

  • All 251 presets and 74 components in 10 styles
  • All 21 code formats
  • Dark, high-contrast and multi-brand themes
Start 7-day free trial

Questions

Questions people ask.

Short answers about the Generator, Figma, contrast and plans.

Ask us anything
What does the Generator do?

It turns one brand color into a full design system: 11-shade color scales, type, spacing, light and dark themes, 74 components and code in 21 formats. You can use it in the browser, in Figma, from the CLI or through MCP.

Do I need Figma?

No. The Generator and Studio run in your browser. If you use Figma, the plugin adds the same system as real variables, styles and components.

How is contrast checked?

Every text and background pair is measured with the WCAG 2.2 formula in light and dark. Normal text needs 4.5:1. When a pair falls short, UIX moves the text to a darker or lighter shade.

Which code formats are free?

Four of the 21: CSS variables, Tailwind v4, W3C design tokens and the AI Pack. Pro adds React, SwiftUI, Jetpack Compose, Flutter, WordPress, Webflow and more.

Can I cancel or get a refund?

Yes. Cancel any time from the link in your Paddle receipt, and Pro stays on until the end of the period you paid for. Ask within 14 days of your first payment for a full refund. One license works on up to 3 devices.

Start with one color.

Free to start. Your designers, your developers and your AI agent get one system to follow.

Start free Get the Figma plugin