Design system generator
Sage #6B8373
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 stone (#78716C).
Color scales
| Sage | 50#F4F6F5 | 100#E7EBE8 | 200#D4DBD6 | 300#B7C4BB | 400#94A69A | 500#788F80 | 600#6B8373 | 700#516758 | 800#435549 | 900#3A483E | 950#212923 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Slate | 50#F7F5F6 | 100#ECE8EB | 200#DED6DC | 300#C9BCC5 | 400#AC9AA7 | 500#968191 | 600#8B7485 | 700#6E5969 | 800#5B4A57 | 900#4C3F49 | 950#2C2429 |
| Neutral | 50#F9FAF9 | 100#F2F5F3 | 200#E4E8E5 | 300#CFD7D1 | 400#99A49C | 500#6A756D | 600#4D5750 | 700#3A433C | 800#222B25 | 900#131A15 | 950#070B08 |
| Error | 50#FFF3EE | 300#F6AC8F | 500#D04D00 | 800#882F00 | 950#451501 | ||||||
| Warning | 50#FDF5E4 | 300#E1AA00 | 500#AB8100 | 800#664B00 | 950#332400 | ||||||
| Success | 50#EFF8F3 | 300#93D1AE | 500#28B87B | 800#00603C | 950#002F1B |
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 (59% in OKLCH) matches step 600 of the scale, so the other ten steps are built around it instead of forcing it to 500.
- Buttons use step 700, not your exact color. White text on #6B8373 is only 4.1:1. Step 700 is the closest one that passes AA, so it looks like your brand and stays readable.
- Brand text starts at step 700. Links and brand-colored text need 4.5:1 on white. Step 700 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.
- 3 tokens moved for contrast. bg/danger (Light): error 600 → error 800, because text/on-danger on bg/danger was 4.43:1 · bg/secondary (Light): secondary 600 → secondary 700, because text/on-secondary on bg/secondary was 4.26: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.70:1 | AAA | Lc 105 | |
| text/secondary on bg/surface | Light | 7.51:1 | AAA | Lc 86 | |
| text/tertiary on bg/surface | Light | 4.80:1 | AA | Lc 73 | |
| text/brand on bg/surface | Light | 6.12:1 | AA | Lc 81 | |
| 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.67:1 | AAA | Lc 86 | |
| text/primary on bg/canvas | Light | 16.92:1 | AAA | Lc 101 | |
| text/secondary on bg/canvas | Light | 7.18:1 | AAA | Lc 83 | |
| text/tertiary on bg/canvas | Light | 4.58:1 | AA | Lc 70 | |
| text/secondary on bg/subtle | Light | 6.85:1 | AA | Lc 80 | |
| text/on-brand on bg/brand | Light | 6.12:1 | AA | Lc 86 | |
| text/on-brand on bg/brand-hover | Light | 7.97:1 | AAA | Lc 92 | |
| text/on-danger on bg/danger | Light | 8.56:1 | AAA | Lc 93 | |
| text/on-secondary on bg/secondary | Light | 6.37:1 | AA | Lc 87 | |
| text/inverse on bg/inverse | Light | 17.70:1 | AAA | Lc 107 | |
| text/brand on bg/brand-subtle | Light | 5.64:1 | AA | Lc 75 | |
| text/danger on bg/danger-subtle | Light | 7.87:1 | AAA | Lc 83 | |
| text/success on bg/success-subtle | Light | 7.08:1 | AAA | Lc 81 | |
| text/warning on bg/warning-subtle | Light | 7.53:1 | AAA | Lc 82 | |
| text/primary on bg/surface | Dark | 16.92:1 | AAA | Lc 103 | |
| text/secondary on bg/surface | Dark | 12.05:1 | AAA | Lc 80 | |
| text/tertiary on bg/surface | Dark | 6.87:1 | AA | Lc 50 | |
| text/brand on bg/surface | Dark | 6.90:1 | AA | Lc 51 | |
| text/danger on bg/surface | Dark | 9.45:1 | AAA | Lc 66 | |
| text/warning on bg/surface | Dark | 8.39:1 | AAA | Lc 60 | |
| text/success on bg/surface | Dark | 10.09:1 | AAA | Lc 70 | |
| text/primary on bg/canvas | Dark | 18.93:1 | AAA | Lc 104 | |
| text/secondary on bg/canvas | Dark | 13.48:1 | AAA | Lc 81 | |
| text/tertiary on bg/canvas | Dark | 7.68:1 | AAA | Lc 51 | |
| text/secondary on bg/subtle | Dark | 9.92:1 | AAA | Lc 77 | |
| text/on-brand on bg/brand | Dark | 6.12:1 | AA | Lc 86 | |
| text/on-brand on bg/brand-hover | Dark | 7.97:1 | AAA | Lc 92 | |
| 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.92:1 | AAA | Lc 101 | |
| text/brand on bg/brand-subtle | Dark | 5.82: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.42:1 | AAA | Lc 67 | |
| text/warning on bg/warning-subtle | Dark | 7.14:1 | AAA | Lc 58 |