Single Action
From Modern SaaS · Colors chosen by Aesthetary, following the documented color rules
A near-white page where one saturated color marks the primary action and nothing else.
#FFFFFF, canvas, 62%. #F7F7F8, surface, 15%. #0F1115, text, 12%. #5B6270, muted text, 4%. #E6E7EB, border, 2%. #F5A524, primary action, 5%.
Suggested proportions
- 62% Canvas
- 15% Surface
- 12% Text
- 5% Primary action
- 4% Muted text
- 2% Border
In use
New
Shift rotas in one screen.
Drag a name onto a day. Everyone gets the change.
Start freeWatch a demo
Create your team
Free for up to 12 people.
Work email
ana@harbourcafe.example
Use a work address.
Using it well
16 color pairs are approved for use. 8 pairs are not for text; the ones that matter most for this palette:
- Primary action on Canvas Not for text. The amber is 2.04:1 on white: never text, never a link, never a focus ring or an icon. A button in it is identified by its dark label.
Roles
12 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #FFFFFF | The page: near-white, the most common case. | From the Modern SaaS page’s “ground” color. Basis: a documented rule. |
| Surface | #F7F7F8 | Alternate sections and panels. | From the Modern SaaS page’s “band” color. Basis: Aesthetary’s interpretation. |
| Text | #0F1115 | Headings and body. | From the Modern SaaS page’s “ink” color. Basis: Aesthetary’s interpretation. |
| Muted text | #5B6270 | Secondary text, never below 4.5:1. | From the Modern SaaS page’s “muted” color. Basis: Aesthetary’s interpretation. |
| Secondary action | #0F1115 | Label and outline of a secondary action. | Added by Aesthetary. The Modern SaaS page names no secondary action; it takes the text color as an outline. |
| Border | #E6E7EB | Hairlines on cards and dividers. Decorative only. | From the Modern SaaS page’s “line” color. Basis: Aesthetary’s interpretation. |
| Input border | #7D838E | The edge of an input. | Added by Aesthetary. The Modern SaaS page’s line is 1.24:1, too faint to be a field’s only edge. |
| Primary action | #F5A524 | The primary action, and nothing else. | From the Modern SaaS page’s “accent” color. Basis: Aesthetary’s interpretation. |
| Text on primary | #1A1204 | Label on the primary action. | From the Modern SaaS page’s “accent-ink” color. Basis: Aesthetary’s interpretation. |
| Accent | #F5A524 | The same amber; it marks nothing but the action. | From the Modern SaaS page’s “accent” color. Basis: Aesthetary’s interpretation. |
| Focus | #0F1115 | Focus ring. | Added by Aesthetary. The Modern SaaS page defines no focus color, and the amber is 2.04:1 on white, too faint for a ring. |
| Error | #B3261E | Errors, always with a word. | Added by Aesthetary. The Modern SaaS page defines no status colors. |
Contrast, by use
16 approved pairs, all passing · 8 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 | 18.90:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 17.65:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 6.13:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 5.73:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 9.09:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 18.90:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 17.65:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Focus on Canvas | 18.90:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 17.65:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.81: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 | 6.54:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 6.11:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 2.04:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Accent on Surface | 1.91:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Text on Accent | 9.26:1 | 4.5:1 | TextText set on the accent fill | Passes |
Not for text
- Primary action on Canvas 2.04:1. Not for text. Fill or decoration only. The amber is 2.04:1 on white: never text, never a link, never a focus ring or an icon. A button in it is identified by its dark label.
- Primary action on Surface 1.91: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.
- Accent on Canvas 2.04: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.
- Accent on Surface 1.91: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.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.
- Border on Surface 1.15: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.81: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
Saturation is spent once. Everything else is near-white, near-black and two grays, so the eye goes to the one colored button. The sources say no hue is characteristic; the amber here is a choice.
Limits of this palette
- Flat Signal and Single Action share a structure: a neutral ground, near-black text and one accent. The difference is the accent’s job: Swiss gives it one job at a time (action, current item or error); Modern SaaS reserves it for the action.
What the sources say
1 color descriptions in their own words · 5 color rules, each marked documented or Aesthetary’s interpretation
Named in the sources
- “One saturated accent, reserved for the primary action”
Color rules for this Aesthetic
- One saturated accent, reserved for the primary action. No hue is characteristic: choose freely. a documented rule
- Most often a near-white ground; dark-first also occurs, and neither is required. a documented rule
- Secondary text must still meet 4.5:1. a documented rule
- A gradient field is background only and never the contrast source for text. a documented rule
- Use amber as the accent. Aesthetary’s interpretation
Related
AestheticModern SaaS
Colour Elements in this AestheticAurora / Gradient Mesh
Related palettesFlat Signal