Workbench
Modern SaaS, technical, efficient · Aesthetary’s guidance, not research
A tool you can work in all day, with color kept for state.
Light variant
#F4F4F1, canvas, 58%. #FFFFFF, surface, 18%. #17181A, text and primary action, 17%. #55585E, muted text, 4%. #C2410C, accent, 3%.
Suggested proportions
- 58% Canvas
- 18% Surface
- 12% Text
- 5% Primary action
- 4% Muted text
- 3% Accent
In use
New
Three invoices due this week.
Send reminders in one go, or one by one.
Send remindersExport CSV
INV-0412 · Brightwater Ltd
£1,200 · due Friday
Reminder date
Yesterday
Pick a date from today on.
2 reminders sent.
Using it well
21 color pairs are approved for use. 4 pairs are not for text. Each is listed under Contrast, by use.
Roles
14 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #F4F4F1 | The page ground. | Aesthetary’s guidance |
| Surface | #FFFFFF | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #17181A | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #55585E | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #17181A | 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 | #17181A | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #DCDCD7 | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #85878C | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #C2410C | Orange: the current selection, the running job, the focus. One meaning: “where you are”. | Aesthetary’s guidance |
| Focus | #C2410C | Focus ring, in the same orange as the selection. | 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 · 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.12:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 17.77:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 6.47:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 7.13:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 17.77:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 16.12:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 17.77:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 16.12:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 17.77:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 4.70:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 5.18:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.26:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.59:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Success on Canvas | 4.85: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.38: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.93: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 | 4.70:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 5.18:1 | 4.5:1 | TextAccent text | Passes |
Not for text
- Border on Canvas 1.25: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.38: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.26:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.59:1. Not for text. Non-text only. An edge or ring, not a text color.
Dark variant
#121314, canvas, 58%. #1C1D1F, surface, 18%. #ECECEA, text and primary action, 17%. #A3A5A8, muted text, 4%. #FF8A3D, accent, 3%.
Suggested proportions
- 58% Canvas
- 18% Surface
- 12% Text
- 5% Primary action
- 4% Muted text
- 3% Accent
In use
New
Three invoices due this week.
Send reminders in one go, or one by one.
Send remindersExport CSV
INV-0412 · Brightwater Ltd
£1,200 · due Friday
Reminder date
Yesterday
Pick a date from today on.
2 reminders sent.
Using it well
21 color pairs are approved for use. 4 pairs are not for text. Each is listed under Contrast, by use.
Roles
14 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #121314 | The page ground. | Aesthetary’s guidance |
| Surface | #1C1D1F | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #ECECEA | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #A3A5A8 | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #ECECEA | The primary action: a light button on graphite. | Aesthetary’s guidance |
| Text on primary | #121314 | Label on the primary action. | Aesthetary’s guidance |
| Secondary action | #ECECEA | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #2E3033 | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #6E7176 | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #FF8A3D | Orange, lightened for the dark ground: selection, running job, focus. | Aesthetary’s guidance |
| Focus | #FF8A3D | Focus ring, 2px, offset from the control. | Aesthetary’s guidance |
| Success | #4CC38A | Confirmation, always with a word or icon. | Aesthetary’s guidance |
| Warning | #F2C14E | Warnings, always with a word or icon. | Aesthetary’s guidance |
| Error | #FF6B5E | Errors, always with a word or icon. | Aesthetary’s guidance |
Contrast, by use
21 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 | 15.72:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 14.26:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 7.53:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 6.83:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 15.72:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 15.72:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 14.26:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 15.72:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 14.26:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 7.93:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 7.19:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.80:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.44:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Success on Canvas | 8.40:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Success on Surface | 7.62:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Canvas | 11.08:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Warning on Surface | 10.05:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Canvas | 6.66:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 6.04:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 7.93:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 7.19:1 | 4.5:1 | TextAccent text | Passes |
Not for text
- Border on Canvas 1.41: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.27: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.80:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.44:1. Not for text. Non-text only. An edge or ring, not a text color.
What makes it characteristic
The interface is graphite and paper; the primary button is simply black. One orange means “where you are”: the selection, the focus, the thing running now. Status colors are the only other hues.
Avoids: Navy and purple gradient with glows.
Related
Shares a principle with (Aesthetary’s guidance)Modern SaaS, Swiss Style
Related palettesFlat Signal, Single Action, Daylight Clinic, Ledger