Daylight Clinic
Clinical, clean, precise · Aesthetary’s guidance, not research
Competent and unhurried, no alarm.
#F4F2EE, canvas, 58%. #FFFFFF, surface, 18%. #1B2421, text, 12%. #55605B, muted text, 4%. #0F6B5C, primary action and accent, 8%.
Suggested proportions
- 58% Canvas
- 18% Surface
- 12% Text
- 5% Primary action
- 4% Muted text
- 3% Accent
In use
Back on your feet, at your pace.
Thirty-minute assessments, Monday to Saturday.
Book an assessmentPrices
Choose a time
Tuesday 14 May, three times left.
Date of birth
31/02/1980
That date doesn’t exist.
Booked: Tuesday 14 May, 09:30.
Using it well
21 color pairs are approved for use. 5 pairs are not for text; the ones that matter most for this palette:
- Focus on Canvas Not for text. The focus amber is 4.49:1 on the ground: a ring, never text.
Roles
14 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #F4F2EE | Warm neutral ground, not blue-white. | Aesthetary’s guidance |
| Surface | #FFFFFF | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #1B2421 | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #55605B | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #0F6B5C | 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 | #1B2421 | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #C9C4BB | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #7A837E | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #0F6B5C | The same green marks the one thing to do next; nothing else is colored. | Aesthetary’s guidance |
| Focus | #B4530B | Focus ring only, never text: 4.49:1 on the ground, under the 4.5 text needs. | Aesthetary’s guidance |
| Success | #1E7A46 | 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
21 approved pairs, all passing · 5 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.22:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 15.90:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 5.85:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 6.54:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 6.41:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 14.22:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 15.90:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 5.73:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 6.41:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 4.49:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 5.02:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.49:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.91:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Success on Canvas | 4.78:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Success on Surface | 5.35:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Canvas | 5.30: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 | 5.85: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 | 5.73:1 | 3:1 | Non-text (3:1)Accent as a mark, rule or indicator | Passes |
| Accent on Surface | 6.41:1 | 3:1 | Non-text (3:1)Accent as a mark, rule or indicator | Passes |
Not for text
- Focus on Canvas 4.49:1. Not for text. Non-text only. The focus amber is 4.49:1 on the ground: a ring, never text.
- Border on Canvas 1.55: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.74: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.49:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.91:1. Not for text. Non-text only. An edge or ring, not a text color.
What makes it characteristic
A warm neutral ground instead of blue-white, one deep green that marks the next step, and status colors that never borrow the brand’s hue. It is a forms-heavy palette: every field edge reaches 3:1.
Avoids: Hospital blue on white with rounded cards.
Related
Shares a principle with (Aesthetary’s guidance)Swiss Style, Japanese Minimalism
Related palettesFlat Signal, Unbleached, Ledger, Workbench