Design system generator

Pick one brand color and UIX turns it into a full design system: color scales, light and dark tokens, a contrast check for every text pair, and code you can paste into Tailwind, CSS or shadcn. It is free and runs in your browser. The sheet below shows what you get for one example color.

Example: Deep Violet #6C2BD9

Deep Violet sits at step 700 of its scale. UIX builds a full design system around it: 11-step scales, light and dark tokens, 40 contrast-checked text pairs, type and radius. It is close to Tailwind’s violet (#8B5CF6).

Color scales

What each step is for

• 50 Page and card backgrounds
• 100 Page and card backgrounds
• 200 Hover and selected backgrounds
• 300 Borders and dividers
• 400 Strong borders, focus rings, icons on dark
• 500 Solid fills, charts
• 600 Buttons and links
• 700 Hover on buttons, brand text
• 800 Pressed states, text on light tints
• 900 Headings and text on light backgrounds
• 950 Headings and text on light backgrounds

Why these choices

• Your color sits at step 700. Its lightness (49% in OKLCH) matches step 700 of the scale, so the other ten steps are built around it instead of forcing it to 500.
• Your exact color is your button. White text on #6C2BD9 is 7.0:1, above the 4.5:1 that WCAG AA asks for. Hover uses step 800, pressed 900.
• Brand text starts at step 600. Links and brand-colored text need 4.5:1 on white. Step 600 is the lightest that gets there; anything lighter is for large headings and icons only.
• Every text pair passes AA. 40 foreground and background pairs checked in light and dark.

Contrast receipt

Nearby colors

Edit every detail in Studio