Design system generator
Cocoa #6B3122
Cocoa sits at step 900 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 red (#EF4444).
Color scales
| Cocoa | 50#FCF3F1 | 100#F8E5E0 | 200#F3D0C7 | 300#E9B1A2 | 400#D78975 | 500#C96950 | 600#B44F35 | 700#9D3E25 | 800#823420 | 900#6B3122 | 950#3E1B12 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Dark Lagoon | 50#F0F7F9 | 100#DEEDF1 | 200#C2DFE7 | 300#98CAD7 | 400#62ADC1 | 500#2897B0 | 600#008097 | 700#006C81 | 800#005A6B | 900#004D5C | 950#032C35 |
| Neutral | 50#FBFAF9 | 100#F7F3F2 | 200#ECE6E4 | 300#DDD2D0 | 400#AB9D9A | 500#7C6E6B | 600#5E514E | 700#4A3D3A | 800#312523 | 900#1F1614 | 950#0E0908 |
| Error | 50#FFF2F0 | 300#FFA595 | 500#E03119 | 800#971200 | 950#4B0B04 | ||||||
| Warning | 50#FFF3EB | 300#FF9543 | 500#CD6900 | 800#7B3D00 | 950#3E1C00 | ||||||
| Success | 50#F0F8F1 | 300#9ECFA3 | 500#53B665 | 800#006222 | 950#092F12 |
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 900. Its lightness (39% in OKLCH) matches step 900 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 #6B3122 is 10.1:1, above the 4.5:1 that WCAG AA asks for. Hover uses step 950, pressed 950.
- 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
| Pair | Mode | Colors | WCAG 2 | Level | APCA |
|---|---|---|---|---|---|
| text/primary on bg/surface | Light | 17.75:1 | AAA | Lc 105 | |
| text/secondary on bg/surface | Light | 7.60:1 | AAA | Lc 86 | |
| text/tertiary on bg/surface | Light | 4.88:1 | AA | Lc 74 | |
| text/brand on bg/surface | Light | 5.11:1 | AA | Lc 75 | |
| text/danger on bg/surface | Light | 8.74:1 | AAA | Lc 88 | |
| text/warning on bg/surface | Light | 8.37:1 | AAA | Lc 88 | |
| text/success on bg/surface | Light | 7.58:1 | AAA | Lc 86 | |
| text/primary on bg/canvas | Light | 17.03:1 | AAA | Lc 102 | |
| text/secondary on bg/canvas | Light | 7.29:1 | AAA | Lc 84 | |
| text/tertiary on bg/canvas | Light | 4.68:1 | AA | Lc 71 | |
| text/secondary on bg/subtle | Light | 6.90:1 | AA | Lc 80 | |
| text/on-brand on bg/brand | Light | 10.06:1 | AAA | Lc 97 | |
| text/on-brand on bg/brand-hover | Light | 15.32:1 | AAA | Lc 105 | |
| text/on-danger on bg/danger | Light | 4.54:1 | AA | Lc 75 | |
| text/on-secondary on bg/secondary | Light | 4.63:1 | AA | Lc 77 | |
| text/inverse on bg/inverse | Light | 17.75:1 | AAA | Lc 107 | |
| text/brand on bg/brand-subtle | Light | 4.68:1 | AA | Lc 69 | |
| text/danger on bg/danger-subtle | Light | 8.00:1 | AAA | Lc 82 | |
| text/success on bg/success-subtle | Light | 7.00:1 | AAA | Lc 80 | |
| text/warning on bg/warning-subtle | Light | 7.68:1 | AAA | Lc 82 | |
| text/primary on bg/surface | Dark | 17.03:1 | AAA | Lc 104 | |
| text/secondary on bg/surface | Dark | 12.01:1 | AAA | Lc 80 | |
| text/tertiary on bg/surface | Dark | 6.78:1 | AA | Lc 50 | |
| text/brand on bg/surface | Dark | 6.53:1 | AA | Lc 48 | |
| text/danger on bg/surface | Dark | 9.35:1 | AAA | Lc 65 | |
| text/warning on bg/surface | Dark | 8.14:1 | AAA | Lc 59 | |
| text/success on bg/surface | Dark | 10.06:1 | AAA | Lc 69 | |
| text/primary on bg/canvas | Dark | 18.98:1 | AAA | Lc 105 | |
| text/secondary on bg/canvas | Dark | 13.38:1 | AAA | Lc 80 | |
| text/tertiary on bg/canvas | Dark | 7.56:1 | AAA | Lc 51 | |
| text/secondary on bg/subtle | Dark | 10.01:1 | AAA | Lc 77 | |
| text/on-brand on bg/brand | Dark | 5.11:1 | AA | Lc 80 | |
| text/on-brand on bg/brand-hover | Dark | 6.67:1 | AA | Lc 87 | |
| text/on-danger on bg/danger | Dark | 4.54:1 | AA | Lc 75 | |
| text/on-secondary on bg/secondary | Dark | 7.79:1 | AAA | Lc 54 | |
| text/inverse on bg/inverse | Dark | 17.03:1 | AAA | Lc 102 | |
| text/brand on bg/brand-subtle | Dark | 5.64:1 | AA | Lc 46 | |
| text/danger on bg/danger-subtle | Dark | 8.21:1 | AAA | Lc 63 | |
| text/success on bg/success-subtle | Dark | 8.34:1 | AAA | Lc 67 | |
| text/warning on bg/warning-subtle | Dark | 7.03:1 | AAA | Lc 57 |