Design system generator
Teal #3DB2A3
Teal sits at step 400 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 teal (#14B8A6).
Color scales
| Teal | 50#EEF8F6 | 100#DAEFEB | 200#BBE3DC | 300#8AD0C5 | 400#3DB2A3 | 500#009E8F | 600#008578 | 700#007065 | 800#005D54 | 900#004F47 | 950#002E29 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Rose | 50#FCF3F5 | 100#F8E4E8 | 200#F3CED6 | 300#E9ADBC | 400#D38096 | 500#C96280 | 600#B4476A | 700#9D3759 | 800#822E4A | 900#6A2C3F | 950#3E1823 |
| Neutral | 50#F9FAFA | 100#F1F5F4 | 200#E2E9E7 | 300#CDD8D5 | 400#95A4A1 | 500#677572 | 600#4A5855 | 700#364441 | 800#1F2B29 | 900#111B19 | 950#060C0A |
| Error | 50#FFF3EE | 300#F6AC8F | 500#D04D00 | 800#882F00 | 950#451501 | ||||||
| Warning | 50#FDF5E4 | 300#E1AA00 | 500#AB8100 | 800#664B00 | 950#332400 | ||||||
| Success | 50#EFF8F5 | 300#8FD0BC | 500#00B795 | 800#005E4C | 950#002E24 |
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 400. Its lightness (69% in OKLCH) matches step 400 of the scale, so the other ten steps are built around it instead of forcing it to 500.
- Buttons keep your color, with dark text. White text on a color this light would be 2.6:1 and fail. Dark text passes, so buttons stay on brand instead of turning muddy.
- 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.
- 3 tokens moved for contrast. bg/danger (Light): error 600 → error 800, because text/on-danger on bg/danger was 4.43:1 · text/brand (Light): primary 600 → primary 700, because text/brand on bg/brand-subtle was 4.19:1 · bg/danger (Dark): error 600 → error 800, because text/on-danger on bg/danger was 4.43: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.58:1 | AAA | Lc 104 | |
| text/secondary on bg/surface | Light | 7.45:1 | AAA | Lc 86 | |
| text/tertiary on bg/surface | Light | 4.81:1 | AA | Lc 73 | |
| text/brand on bg/surface | Light | 5.99:1 | AA | Lc 79 | |
| text/danger on bg/surface | Light | 8.56:1 | AAA | Lc 88 | |
| text/warning on bg/surface | Light | 8.17:1 | AAA | Lc 88 | |
| text/success on bg/surface | Light | 7.76:1 | AAA | Lc 86 | |
| text/primary on bg/canvas | Light | 16.81:1 | AAA | Lc 101 | |
| text/secondary on bg/canvas | Light | 7.13:1 | AAA | Lc 83 | |
| text/tertiary on bg/canvas | Light | 4.60:1 | AA | Lc 70 | |
| text/secondary on bg/subtle | Light | 6.78:1 | AA | Lc 79 | |
| text/on-brand on bg/brand | Light | 7.60:1 | AAA | Lc 53 | |
| text/on-brand on bg/brand-hover | Light | 11.19:1 | AAA | Lc 71 | |
| text/on-danger on bg/danger | Light | 8.56:1 | AAA | Lc 93 | |
| text/on-secondary on bg/secondary | Light | 5.19:1 | AA | Lc 80 | |
| text/inverse on bg/inverse | Light | 17.58:1 | AAA | Lc 107 | |
| text/brand on bg/brand-subtle | Light | 5.53:1 | AA | Lc 74 | |
| text/danger on bg/danger-subtle | Light | 7.87:1 | AAA | Lc 83 | |
| text/success on bg/success-subtle | Light | 7.18:1 | AAA | Lc 81 | |
| text/warning on bg/warning-subtle | Light | 7.53:1 | AAA | Lc 82 | |
| text/primary on bg/surface | Dark | 16.81:1 | AAA | Lc 103 | |
| text/secondary on bg/surface | Dark | 12.04:1 | AAA | Lc 80 | |
| text/tertiary on bg/surface | Dark | 6.78:1 | AA | Lc 50 | |
| text/brand on bg/surface | Dark | 6.78:1 | AA | Lc 50 | |
| text/danger on bg/surface | Dark | 9.39:1 | AAA | Lc 66 | |
| text/warning on bg/surface | Dark | 8.33:1 | AAA | Lc 60 | |
| text/success on bg/surface | Dark | 9.97:1 | AAA | Lc 69 | |
| text/primary on bg/canvas | Dark | 18.86:1 | AAA | Lc 104 | |
| text/secondary on bg/canvas | Dark | 13.51:1 | AAA | Lc 81 | |
| text/tertiary on bg/canvas | Dark | 7.61:1 | AAA | Lc 51 | |
| text/secondary on bg/subtle | Dark | 10.01:1 | AAA | Lc 78 | |
| text/on-brand on bg/brand | Dark | 7.60:1 | AAA | Lc 53 | |
| text/on-brand on bg/brand-hover | Dark | 11.19:1 | AAA | Lc 71 | |
| text/on-danger on bg/danger | Dark | 8.56:1 | AAA | Lc 93 | |
| text/on-secondary on bg/secondary | Dark | 6.85:1 | AA | Lc 49 | |
| text/inverse on bg/inverse | Dark | 16.81:1 | AAA | Lc 101 | |
| text/brand on bg/brand-subtle | Dark | 5.69:1 | AA | Lc 48 | |
| text/danger on bg/danger-subtle | Dark | 8.24:1 | AAA | Lc 64 | |
| text/success on bg/success-subtle | Dark | 8.41:1 | AAA | Lc 67 | |
| text/warning on bg/warning-subtle | Dark | 7.14:1 | AAA | Lc 58 |