Loud Hailer
Bold, disruptive, confident · Aesthetary’s guidance, not research
One flood of signal orange, black type, and nothing else to look at.
Light variant
#F0EEE8, canvas, 45%. #FFFFFF, surface, 10%. #0A0A0A, text, 15%. #45443F, muted text, 3%. #FF3D00, primary action, 27%.
Suggested proportions
- 45% Canvas
- 27% Primary action
- 15% Text
- 10% Surface
- 3% Muted text
In use
New
Own the power company.
Members set the price. Profits come back.
Join the co-opRead the rules
Member share
£25, once. One member, one vote.
Postcode
ZZ1
We need a full postcode.
Welcome, member 4,113.
Using it well
18 color pairs are approved for use. 6 pairs are not for text; the ones that matter most for this palette:
- Primary action on Canvas Not for text. Orange is 3.06:1 on the ground: a field with black text on it, never text itself.
Roles
13 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #F0EEE8 | The page ground. | Aesthetary’s guidance |
| Surface | #FFFFFF | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #0A0A0A | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #45443F | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #FF3D00 | Signal orange: big fields and the action, with black text on it. | Aesthetary’s guidance |
| Text on primary | #0A0A0A | Label on the primary action. | Aesthetary’s guidance |
| Secondary action | #0A0A0A | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #CFCCC4 | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #0A0A0A | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #FF3D00 | The same orange, used large. | Aesthetary’s guidance |
| Focus | #0A0A0A | Focus ring, 2px, offset from the control. | Aesthetary’s guidance |
| Success | #1E7A46 | Confirmation, always with a word or icon. | Aesthetary’s guidance |
| Error | #A50E26 | Errors, in crimson, always with a word or icon. | Aesthetary’s guidance |
Contrast, by use
18 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 | 17.06:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 19.80:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 8.41:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 9.76:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 5.58:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 17.06:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 19.80:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Focus on Canvas | 17.06:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 19.80:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 17.06:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 19.80:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Success on Canvas | 4.61: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 |
| Error on Canvas | 6.73:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 7.80:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 3.06:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Accent on Surface | 3.55:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Text on Accent | 5.58:1 | 4.5:1 | TextText set on the accent fill | Passes |
Not for text
- Primary action on Canvas 3.06:1. Not for text. Fill or decoration only. Orange is 3.06:1 on the ground: a field with black text on it, never text itself.
- Primary action on Surface 3.55:1. Not for text. Large text and non-text only. Under 4.5:1: display-size text, icons and edges only.
- Accent on Canvas 3.06: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 3.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 Canvas 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.
- Border on Surface 1.60: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.
Dark variant
#0A0A0A, canvas, 50%. #161616, surface, 8%. #F0EEE8, text, 12%. #B0AEA8, muted text, 3%. #FF3D00, primary action, 27%.
Suggested proportions
- 50% Canvas
- 27% Primary action
- 12% Text
- 8% Surface
- 3% Muted text
In use
New
Own the power company.
Members set the price. Profits come back.
Join the co-opRead the rules
Member share
£25, once. One member, one vote.
Postcode
ZZ1
We need a full postcode.
Welcome, member 4,113.
Using it well
19 color pairs are approved for use. 4 pairs are not for text. Each is listed under Contrast, by use.
Roles
13 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #0A0A0A | The page ground. | Aesthetary’s guidance |
| Surface | #161616 | Cards, panels and fields. | Aesthetary’s guidance |
| Text | #F0EEE8 | All reading text and headings. | Aesthetary’s guidance |
| Muted text | #B0AEA8 | Secondary text and captions. | Aesthetary’s guidance |
| Primary action | #FF3D00 | Signal orange on black: the field and the action. | Aesthetary’s guidance |
| Text on primary | #0A0A0A | Label on the primary action. | Aesthetary’s guidance |
| Secondary action | #F0EEE8 | Secondary action: label and outline. | Aesthetary’s guidance |
| Border | #2A2A2A | Hairlines and dividers. Decorative only; never a field’s only edge. | Aesthetary’s guidance |
| Input border | #77756F | The edge of an input, where it is the only boundary. | Aesthetary’s guidance |
| Accent | #FF3D00 | The same orange. | Aesthetary’s guidance |
| Focus | #F0EEE8 | Focus ring, 2px, offset from the control. | Aesthetary’s guidance |
| Success | #4CC38A | Confirmation, always with a word or icon. | Aesthetary’s guidance |
| Error | #FF8577 | Errors, always with a word or icon. | Aesthetary’s guidance |
Contrast, by use
19 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 | 17.06:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 15.60:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 8.92:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 8.16:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 5.58:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 17.06:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 15.60:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 5.58:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 5.10:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 17.06:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 15.60:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 4.30:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.93:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Success on Canvas | 8.94:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Success on Surface | 8.17:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Canvas | 8.37:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 7.65:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 5.58:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 5.10:1 | 4.5:1 | TextAccent text | Passes |
Not for text
- Border on Canvas 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.
- Border on Surface 1.26: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 4.30:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.93:1. Not for text. Non-text only. An edge or ring, not a text color.
What makes it characteristic
Confidence by quantity: the orange is not an accent but a field, used large, with black type set on it. Everything else is off-white and black so the flood has no competition.
Avoids: Black with a neon gradient: the “disruptor” start-up look.
Limits of this palette
- The orange and the error crimson are both warm; the error always carries a word or icon.
Related
Shares a principle with (Aesthetary’s guidance)Neo-Brutalism, Swiss Style
Related palettesFlat Signal, Outline and Fill, Overprint, Porch Light