Design system generator
Sage #54726D
Sage sits at step 600 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 zinc (#71717A).
Color scales
| Sage | 50#F4F6F5 | 100#E6EBEA | 200#D2DBDA | 300#B4C4C1 | 400#8FA6A2 | 500#738F8A | 600#54726D | 700#4B6763 | 800#3E5552 | 900#374845 | 950#1E2927 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Slate | 50#F7F5F5 | 100#EDE8E9 | 200#E0D6D8 | 300#CBBCBF | 400#B09A9F | 500#9B8086 | 600#7E6369 | 700#72595E | 800#5E4A4E | 900#4F3F42 | 950#2D2326 |
| 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 600. Its lightness (53% in OKLCH) matches step 600 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 #54726D is 5.2:1, above the 4.5:1 that WCAG AA asks for. Hover uses step 700, pressed 800.
- 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.
- An almost grey brand. With so little color, the secondary scale does the work of drawing attention. Pick a scheme with a stronger secondary.
- 2 tokens moved for contrast. bg/danger (Light): error 600 → error 800, because text/on-danger on bg/danger was 4.43: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.24:1 | AA | Lc 76 | |
| 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 | 5.24:1 | AA | Lc 81 | |
| text/on-brand on bg/brand-hover | Light | 6.14:1 | AA | Lc 86 | |
| text/on-danger on bg/danger | Light | 8.56:1 | AAA | Lc 93 | |
| text/on-secondary on bg/secondary | Light | 5.42:1 | AA | Lc 82 | |
| text/inverse on bg/inverse | Light | 17.58:1 | AAA | Lc 107 | |
| text/brand on bg/brand-subtle | Light | 4.83:1 | AA | Lc 70 | |
| 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.82: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 | 5.24:1 | AA | Lc 81 | |
| text/on-brand on bg/brand-hover | Dark | 6.14:1 | AA | Lc 86 | |
| text/on-danger on bg/danger | Dark | 8.56:1 | AAA | Lc 93 | |
| text/on-secondary on bg/secondary | Dark | 7.48:1 | AAA | Lc 52 | |
| text/inverse on bg/inverse | Dark | 16.81:1 | AAA | Lc 101 | |
| text/brand on bg/brand-subtle | Dark | 5.81: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 |