UIX Design System
Turns one brand color into a complete design system in Figma.
Free to start, with a Pro plan. New in UIX 3: brand guidelines, bulk social posts, an accessibility check, and React code with an AI pack (AGENTS.md, CLAUDE.md, llms.txt).
What it does
One brand color in, a full system out
Start from one brand color. It builds the colors, type, tokens and components around it.
Colors with a method
Perceptual OKLCH scales with 11 shades each, checked for WCAG contrast.
Type and 74 components
50 font pairings with responsive Desktop, Tablet and Mobile styles, and 74 components in 10 visual styles.
Code out, in 21 formats
Export CSS, SCSS, Tailwind, W3C tokens, SwiftUI, Compose, Flutter and React, or open a GitHub PR.
How it works
- 1
Open the plugin in Figma
Run UIX Design System from the Figma Community.
- 2
Pick one brand color
Choose a color and a font pairing, then a visual style and light or dark themes.
- 3
Get the system, docs and code
Variables, components and documentation in Figma, and your tokens exported as code.
More from the lab
Want a product like this?
We design and build for founders the same way we build our own. Book a 20-minute call and tell us what you have in mind.