A proposal, for approval. Both themes are rendered in their own real ground rather than following your system setting, so they can be judged side by side. Every contrast ratio is computed from the hex values above it, so the numbers cannot drift.
| paper | card | sunk | |
|---|---|---|---|
| ink | 14.44AAA | 16.44AAA | 13.11AAA |
| ink-soft | 6.23AA | 7.09AAA | 5.65AA |
| ink-faint | 4.72AA | 5.37AA | 4.29AA lg |
| clay | 5.24AA | 5.96AA | 4.75AA |
| clay-fill | 4.29AA lg | 4.89AA | 3.90AA lg |
| pine | 5.97AA | 6.79AA | 5.42AA |
| amber | 5.40AA | 6.14AA | 4.90AA |
| steel | 5.98AA | 6.80AA | 5.42AA |
Charter carries the lede. It is the only place a serif appears.
Body copy sits in ink on paper. Secondary prose drops to ink-soft, and the meta line under it drops again to ink-faint. Color never carries meaning here: that is what the status tokens are for.
A link is clay, and so is the one ask.
| paper | card | sunk | |
|---|---|---|---|
| ink | 16.12AAA | 15.09AAA | 16.83AAA |
| ink-soft | 7.73AAA | 7.24AAA | 8.08AAA |
| ink-faint | 4.84AA | 4.54AA | 5.06AA |
| clay | 6.39AA | 5.98AA | 6.67AA |
| clay-fill | 3.79AA lg | 3.55AA lg | 3.95AA lg |
| pine | 6.84AA | 6.40AA | 7.14AAA |
| amber | 6.80AA | 6.37AA | 7.10AAA |
| steel | 6.85AA | 6.42AA | 7.15AAA |
Charter carries the lede. It is the only place a serif appears.
Body copy sits in ink on paper. Secondary prose drops to ink-soft, and the meta line under it drops again to ink-faint. Color never carries meaning here: that is what the status tokens are for.
A link is clay, and so is the one ask.
The four rules that come with it:
AA is 4.5:1, AAA is 7:1, and AA lg is 3:1, legal only at 19px and up or
14px bold. clay-fill is the saturated clay for filled shapes and underlines: it is
deliberately not text-safe on paper at 4.29, which is why clay exists at 5.24.