# Color.

> Markdown twin of [/brand/color](/brand/color).

Four boards. No fifth hue exists — no red, no blue, no purple, anywhere. A
wrong color reads as someone else's site faster than any other mistake.

## What each board means

- **cream is paper.** Surfaces, references, quiet chrome. The site is printed on it.
- **wood is ink.** Every word wears it — wood-800 primary, wood-500 secondary, wood-300 muted.
- **orange is action.** Links, buttons, the wordmark stop, THE chart color (orange-500). Scarce on purpose.
- **sage is assent.** Passes, savings, asides. Calm agreement, never celebration.

## The ramps

Defined once in `globals.css`, mirrored in
[/brand/tokens.json](/brand/tokens.json). Noted steps carry a standing job.

### cream — `--c-cream-*`

| step | hex | standing job |
|---|---|---|
| 50 | #F9F8F6 | page + chart surface |
| 100 | #EFEBE6 | |
| 200 | #E9E2D8 | grid lines |
| 300 | #E2D8CB | |
| 400 | #D8CCBA | |
| 500 | #CFC0AA | |
| 600 | #C1AC90 | reference bars |
| 700 | #B09673 | |
| 800 | #997D56 | |
| 900 | #7C6546 | |

### wood — `--c-wood-*`

| step | hex | standing job |
|---|---|---|
| 100 | #D7D0CB | |
| 200 | #BCB1A9 | |
| 300 | #A29286 | axes, muted ink |
| 400 | #877668 | |
| 500 | #6B5D52 | secondary ink |
| 600 | #51463E | |
| 700 | #3A322C | |
| 800 | #201C18 | primary ink |
| 900 | #110F0D | |

### orange — `--c-orange-*`

| step | hex | standing job |
|---|---|---|
| 50 | #F7F3ED | |
| 100 | #F0E7DB | |
| 200 | #E7D1B6 | |
| 300 | #DAB990 | |
| 400 | #CB9C62 | |
| 500 | #B47E3C | THE chart color |
| 600 | #9D6E34 | |
| 700 | #825B2B | fail / cost marks |
| 800 | #634621 | |
| 900 | #412E16 | |

### sage — `--c-sage-*`

| step | hex | standing job |
|---|---|---|
| 50 | #F4F6F3 | |
| 100 | #E9EDE8 | |
| 200 | #D1DBCC | |
| 300 | #B8C8B1 | |
| 400 | #A0B597 | |
| 500 | #8AA47F | |
| 600 | #6D8961 | pass / savings marks |
| 700 | #53684A | |
| 800 | #3B4B35 | |
| 900 | #212A1E | |

## Accessible pairs

Computed WCAG ratios for the standing text pairs. wood-300 fails even
large-text AA: decorative only, never the sole carrier of information.
orange-600 passes only as large or underlined text — links are always
underlined here.

| pair | ratio | verdict |
|---|---|---|
| wood-800 on cream-50 | 15.95:1 | ✓ AA, body and smaller |
| wood-500 on cream-50 | 5.97:1 | ✓ AA, body and smaller |
| sage-700 on cream-50 | 5.74:1 | ✓ AA, body and smaller |
| orange-700 on cream-50 | 5.68:1 | ✓ AA, body and smaller |
| orange-600 on cream-50 | 4.20:1 | × large or underlined only |
| wood-400 on cream-50 | 4.10:1 | × large text only |
| wood-300 on cream-50 | 2.83:1 | × decorative only |
| cream-100 on wood-800 | 14.26:1 | ✓ AA, reversed surfaces |
| orange-300 on wood-800 | 9.13:1 | ✓ AA, reversed links |

## On the dark board

wood-800 is the one dark surface. Inks on it are fixed roles, computed the
same way as the light pairs. The floor is wood-300: nothing quieter may carry
text on dark — wood-400 is large-text only, wood-500 on wood-800 (2.67:1) is
banned outright.

| ink on wood-800 | ratio | role |
|---|---|---|
| cream-100 | 14.26:1 | primary ink — headlines, labels |
| wood-200 | 8.06:1 | secondary ink — body, day numbers |
| wood-300 | 5.64:1 | muted ink — the smallest-text floor |
| orange-300 | 9.13:1 | action — links, next-up markers |
| sage-300 | 9.62:1 | assent — passes, confirmations |
| wood-400 | 3.89:1 | large text only |

## The hard rule

For data marks, exactly one brand hue passes the palette validator on cream:
**orange-500 #B47E3C**. Everything else fails the chroma floor or colorblind
separation. The chart law that follows from this lives at [/brand/data](/brand/data.md).