Design system generator
Electric Violet #884FFF
Electric Violet sits at step 500 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
| Electric Violet | 50#F5F4FF | 100#EAE6FF | 200#D9D3FF | 300#C1B4FF | 400#A48AFF | 500#884FFF | 600#7F36FB | 700#6D1FE0 | 800#5A1EB8 | 900#4A2692 | 950#2A1556 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chartreuse | 50#F5F6EE | 100#EAECDB | 200#D9DCBD | 300#C0C690 | 400#A2A757 | 500#808500 | 600#747900 | 700#626600 | 800#515500 | 900#454800 | 950#272901 |
| Neutral | 50#FAFAFB | 100#F4F4F7 | 200#E7E6EC | 300#D4D4DD | 400#A09FAB | 500#71707C | 600#54535E | 700#403F4A | 800#282731 | 900#18171F | 950#0A090E |
| Error | 50#FFF2F3 | 300#FFA2AD | 500#DE295B | 800#970036 | 950#4A081A | ||||||
| Warning | 50#FFF3EB | 300#FF9543 | 500#CD6900 | 800#7B3D00 | 950#3E1C00 | ||||||
| Success | 50#EFF8F5 | 300#8FD0BF | 500#00B79C | 800#005E4F | 950#002E26 |
What each step is for
50Page and card backgrounds100Page and card backgrounds200Hover and selected backgrounds300Borders and dividers400Strong borders, focus rings, icons on dark500Solid fills, charts600Buttons and links700Hover on buttons, brand text800Pressed states, text on light tints900Headings and text on light backgrounds950Headings and text on light backgrounds
Why these choices
- Your color sits at step 500. Its lightness (59% in OKLCH) matches step 500 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 #884FFF is 4.6:1, above the 4.5:1 that WCAG AA asks for. Hover uses step 600, pressed 700.
- Brand text starts at step 500. Links and brand-colored text need 4.5:1 on white. Step 500 is the lightest that gets there; anything lighter is for large headings and icons only.
- 1 token moved for contrast. text/brand (Light): primary 500 → primary 600, because text/brand on bg/brand-subtle was 4.18:1
- Every text pair passes AA. 40 foreground and background pairs checked in light and dark.
Contrast receipt
| Pair | Mode | Colors | WCAG 2 | Level | APCA |
|---|---|---|---|---|---|
| text/primary on bg/surface | Light | 17.78:1 | AAA | Lc 105 | |
| text/secondary on bg/surface | Light | 7.57:1 | AAA | Lc 86 | |
| text/tertiary on bg/surface | Light | 4.87:1 | AA | Lc 74 | |
| text/brand on bg/surface | Light | 5.49:1 | AA | Lc 76 | |
| text/danger on bg/surface | Light | 8.86:1 | AAA | Lc 88 | |
| text/warning on bg/surface | Light | 8.37:1 | AAA | Lc 88 | |
| text/success on bg/surface | Light | 7.74:1 | AAA | Lc 86 | |
| text/primary on bg/canvas | Light | 17.04:1 | AAA | Lc 102 | |
| text/secondary on bg/canvas | Light | 7.25:1 | AAA | Lc 83 | |
| text/tertiary on bg/canvas | Light | 4.67:1 | AA | Lc 71 | |
| text/secondary on bg/subtle | Light | 6.89:1 | AA | Lc 80 | |
| text/on-brand on bg/brand | Light | 4.56:1 | AA | Lc 76 | |
| text/on-brand on bg/brand-hover | Light | 5.49:1 | AA | Lc 82 | |
| text/on-danger on bg/danger | Light | 4.59:1 | AA | Lc 76 | |
| text/on-secondary on bg/secondary | Light | 4.69:1 | AA | Lc 78 | |
| text/inverse on bg/inverse | Light | 17.78:1 | AAA | Lc 107 | |
| text/brand on bg/brand-subtle | Light | 5.04:1 | AA | Lc 70 | |
| text/danger on bg/danger-subtle | Light | 8.12:1 | AAA | Lc 82 | |
| text/success on bg/success-subtle | Light | 7.15:1 | AAA | Lc 81 | |
| text/warning on bg/warning-subtle | Light | 7.68:1 | AAA | Lc 82 | |
| text/primary on bg/surface | Dark | 17.04:1 | AAA | Lc 104 | |
| text/secondary on bg/surface | Dark | 12.07:1 | AAA | Lc 80 | |
| text/tertiary on bg/surface | Dark | 6.81:1 | AA | Lc 50 | |
| text/brand on bg/surface | Dark | 6.48:1 | AA | Lc 48 | |
| text/danger on bg/surface | Dark | 9.33:1 | AAA | Lc 65 | |
| text/warning on bg/surface | Dark | 8.15:1 | AAA | Lc 59 | |
| text/success on bg/surface | Dark | 10.11:1 | AAA | Lc 69 | |
| text/primary on bg/canvas | Dark | 19.02:1 | AAA | Lc 104 | |
| text/secondary on bg/canvas | Dark | 13.48:1 | AAA | Lc 81 | |
| text/tertiary on bg/canvas | Dark | 7.60:1 | AAA | Lc 51 | |
| text/secondary on bg/subtle | Dark | 10.01:1 | AAA | Lc 77 | |
| text/on-brand on bg/brand | Dark | 4.56:1 | AA | Lc 76 | |
| text/on-brand on bg/brand-hover | Dark | 5.49:1 | AA | Lc 82 | |
| text/on-danger on bg/danger | Dark | 4.59:1 | AA | Lc 76 | |
| text/on-secondary on bg/secondary | Dark | 7.75:1 | AAA | Lc 54 | |
| text/inverse on bg/inverse | Dark | 17.04:1 | AAA | Lc 102 | |
| text/brand on bg/brand-subtle | Dark | 5.71:1 | AA | Lc 46 | |
| text/danger on bg/danger-subtle | Dark | 8.22:1 | AAA | Lc 63 | |
| text/success on bg/success-subtle | Dark | 8.42:1 | AAA | Lc 67 | |
| text/warning on bg/warning-subtle | Dark | 7.03:1 | AAA | Lc 57 |