Late Edition
Editorial, intellectual, sophisticated · Aesthetary’s guidance, not research
A paper you trust because it is plain about what it is.
Light variant
#F3F2EE, canvas, 58%. #FFFFFF, surface, 18%. #111111, text and primary action, 17%. #4D4C48, muted text, 4%. #2338C6, accent, 3%.
Suggested proportions
- 58% Canvas
- 18% Surface
- 12% Text
- 5% Primary action
- 4% Muted text
- 3% Accent
In use
New
What the river towns forgot.
An essay in four parts. 22 minutes.
SubscribeRead free
Newsletter
One essay a week, Sunday morning.
reader@example
Add the end of your address, like .com.
Using it well
17 color pairs are approved for use. 4 pairs are not for text. Each is listed under Contrast, by use.
Roles
12 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #F3F2EE | The page ground. | Aesthetary’s guidance |
| Surface | #FFFFFF | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #111111 | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #4D4C48 | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #111111 | The primary action, and links where it passes as text. | Aesthetary’s guidance |
| Text on primary | #FFFFFF | Label on the primary action. | Aesthetary’s guidance |
| Secondary action | #111111 | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #D6D4CD | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #7A7872 | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #2338C6 | Ultramarine: links and section kickers. | Aesthetary’s guidance |
| Focus | #2338C6 | Focus ring, 2px, offset from the control. | Aesthetary’s guidance |
| Error | #B3261E | Errors, always with a word or icon. | Aesthetary’s guidance |
Contrast, by use
17 approved pairs, all passing · 4 not for text
WCAG 2 ratios, computed from the colors. Text needs 4.5:1; large text (24px, or 18.66px bold) and non-text (a focus ring, a field’s only edge, an icon) need 3:1. Only the pairs listed as approved are recommended.
Approved pairs
| Pair | Contrast | Needs | For | Result |
|---|---|---|---|---|
| Text on Canvas | 16.86:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 18.88:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 7.67:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 8.60:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 18.88:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 16.86:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 18.88:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 16.86:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 18.88:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 7.64:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 8.56:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.94:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 4.41:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Error on Canvas | 5.84:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 6.54:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 7.64:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 8.56:1 | 4.5:1 | TextAccent text | Passes |
Not for text
- Border on Canvas 1.32:1. Not for text. Fill or decoration only. Under 3:1: a fill or decoration only. Never text, an icon or a field’s only edge.
- Border on Surface 1.48:1. Not for text. Fill or decoration only. Under 3:1: a fill or decoration only. Never text, an icon or a field’s only edge.
- Input border on Canvas 3.94:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 4.41:1. Not for text. Non-text only. An edge or ring, not a text color.
Dark variant
#141413, canvas, 58%. #1D1D1B, surface, 18%. #E8E6E1, text and primary action, 17%. #A9A7A0, muted text, 4%. #8C9BFF, accent, 3%.
Suggested proportions
- 58% Canvas
- 18% Surface
- 12% Text
- 5% Primary action
- 4% Muted text
- 3% Accent
In use
New
What the river towns forgot.
An essay in four parts. 22 minutes.
SubscribeRead free
Newsletter
One essay a week, Sunday morning.
reader@example
Add the end of your address, like .com.
Using it well
17 color pairs are approved for use. 4 pairs are not for text. Each is listed under Contrast, by use.
Roles
12 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #141413 | The page ground. | Aesthetary’s guidance |
| Surface | #1D1D1B | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #E8E6E1 | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #A9A7A0 | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #E8E6E1 | The primary action, and links where it passes as text. | Aesthetary’s guidance |
| Text on primary | #141413 | Label on the primary action. | Aesthetary’s guidance |
| Secondary action | #E8E6E1 | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #2E2E2B | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #75736D | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #8C9BFF | Ultramarine, lightened for night reading. | Aesthetary’s guidance |
| Focus | #8C9BFF | Focus ring, 2px, offset from the control. | Aesthetary’s guidance |
| Error | #FF7A6E | Errors, always with a word or icon. | Aesthetary’s guidance |
Contrast, by use
17 approved pairs, all passing · 4 not for text
WCAG 2 ratios, computed from the colors. Text needs 4.5:1; large text (24px, or 18.66px bold) and non-text (a focus ring, a field’s only edge, an icon) need 3:1. Only the pairs listed as approved are recommended.
Approved pairs
| Pair | Contrast | Needs | For | Result |
|---|---|---|---|---|
| Text on Canvas | 14.78:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 13.54:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 7.66:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 7.01:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 14.78:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 14.78:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 13.54:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 14.78:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 13.54:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 7.24:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 6.63:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.89:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.56:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Error on Canvas | 7.25:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 6.64:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 7.24:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 6.63:1 | 4.5:1 | TextAccent text | Passes |
Not for text
- Border on Canvas 1.35:1. Not for text. Fill or decoration only. Under 3:1: a fill or decoration only. Never text, an icon or a field’s only edge.
- Border on Surface 1.24:1. Not for text. Fill or decoration only. Under 3:1: a fill or decoration only. Never text, an icon or a field’s only edge.
- Input border on Canvas 3.89:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.56:1. Not for text. Non-text only. An edge or ring, not a text color.
What makes it characteristic
Gray-white newsprint, true black, and one ultramarine ink for links and kickers, the way a pen marks a proof. No cream, no coral. The dark variant is for reading at night, not for mood.
Avoids: Cream ground, soft serif and coral.
Limits of this palette
- Body text on both variants is above 7:1, the level long reading deserves.
Related
Shares a principle with (Aesthetary’s guidance)Editorial Modernism, New Wave Typography, Swiss Style
Related palettesFlat Signal, Black Blade, Stacked Film, Powder and Ink, Cellar