Cold Press
Healthy, fresh, natural · Aesthetary’s guidance, not research
Awake rather than soothing: clean white, black-green type and one sharp lime.
#F6F7F2, canvas, 58%. #FFFFFF, surface, 18%. #13201A, text and primary action, 17%. #4C5A52, muted text, 4%. #D4E85A, accent, 3%.
Suggested proportions
- 58% Canvas
- 18% Surface
- 12% Text
- 5% Primary action
- 4% Muted text
- 3% Accent
In use
New
Pressed at six, gone by noon.
Order by 10pm for tomorrow’s first batch.
Order for tomorrowSee the menu
In season: rhubarb
Rhubarb, apple, ginger. 330ml.
Pick-up time
05:30
We open at 06:00.
Your order is in for 07:15.
Using it well
22 color pairs are approved for use. 6 pairs are not for text; the ones that matter most for this palette:
- Accent on Canvas Not for text. Lime is 1.26:1 on the ground: a fill behind dark text, never text or an icon on its own.
Roles
14 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #F6F7F2 | The page ground. | Aesthetary’s guidance |
| Surface | #FFFFFF | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #13201A | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #4C5A52 | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #13201A | 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 | #13201A | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #D5DAD0 | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #7A857D | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #D4E85A | Lime: a highlight behind black-green text for “new” or “in season”. Never text. | Aesthetary’s guidance |
| Focus | #13201A | Focus ring, 2px, offset from the control. | Aesthetary’s guidance |
| Success | #2D6A1F | Confirmation, always with a word or icon. | Aesthetary’s guidance |
| Warning | #8A5A00 | Warnings, always with a word or icon. | Aesthetary’s guidance |
| Error | #B3261E | Errors, always with a word or icon. | Aesthetary’s guidance |
Contrast, by use
22 approved pairs, all passing · 6 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 | 15.61:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 16.81:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 6.75:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 7.26:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 16.81:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 15.61:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 16.81:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 15.61:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 16.81:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 15.61:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 16.81:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.56:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.83:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Success on Canvas | 6.11:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Success on Surface | 6.58:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Canvas | 5.51:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Surface | 5.93:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Canvas | 6.07: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 | 1.26:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Accent on Surface | 1.36:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Text on Accent | 12.40:1 | 4.5:1 | TextText set on the accent fill | Passes |
Not for text
- Accent on Canvas 1.26:1. Not for text. Fill or decoration only. Lime is 1.26:1 on the ground: a fill behind dark text, never text or an icon on its own.
- Accent on Surface 1.36: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 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.42: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.56:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.83:1. Not for text. Non-text only. An edge or ring, not a text color.
What makes it characteristic
Freshness comes from brightness and one acid note, not from leaves and linen. The lime is a highlighter, never a text color: it marks what is new or in season, with black-green text on it.
Avoids: Sage and beige with a thin serif; leaf icons; kraft paper.
Related
Shares a principle with (Aesthetary’s guidance)Swiss Style
Related palettesFlat Signal, Field Day, Highlighter