Outline and Fill
From Neo-Brutalism · Colors chosen by Aesthetary, following the documented color rules
Black outlines and black text over flat, saturated fills, with nothing soft or muted.
#FFF4E0, canvas, 40%. #FFFFFF, surface, 15%. #000000, text, 15%. #FF7A45, primary action, 8%. #FFC900, accent, 6%. #FF90E8, fill 1, 6%. #7BF1A8, fill 2, 5%. #90A8ED, fill 3, 5%.
Suggested proportions
- 40% Canvas
- 15% Surface
- 15% Text
- 8% Primary action
- 6% Accent
- 6% Fill 1
- 5% Fill 2
- 5% Fill 3
In use
New
Issue 14 is out.
Forty pages. Stapled. Loud.
Buy issue 14Back issues
#FF90E8, fill 1. #7BF1A8, fill 2. #90A8ED, fill 3.
Subscribe
Four issues a year, posted flat.
Postcode
E8 3QA
We need a full postcode.
Using it well
19 color pairs are approved for use. 10 pairs are not for text; the ones that matter most for this palette:
- Primary action on Canvas Not for text. The orange is 2.37:1 on the cream: a fill inside a black outline, never text.
- Accent on Canvas Not for text. Yellow is 1.42:1 on the cream: a fill only. Never a focus 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 | #FFF4E0 | The page: the room’s cream, a choice, not a rule. | From the Neo-Brutalism page’s “ground” color. Basis: Aesthetary’s interpretation. |
| Surface | #FFFFFF | Panels and fields, always outlined in black. | Added by Aesthetary. The Neo-Brutalism page names no surface; white panels sit inside black outlines. |
| Text | #000000 | Every outline, every shadow, all text. | Named in the sources: “thick, solid, dark outlines” From the Neo-Brutalism page’s “ink” color. Basis: a documented rule. |
| Muted text | #000000 | None: the Neo-Brutalism page sets all text in black. Hierarchy is size and weight. | From the Neo-Brutalism page’s “ink” color; Aesthetary gives it this role. Basis: a documented rule. |
| Secondary action | #000000 | Secondary action: a black outline, no fill. | From the Neo-Brutalism page’s “ink” color; Aesthetary gives it this role. Basis: a documented rule. |
| Border | #000000 | Outlines: thick, solid, square-cornered. | From the Neo-Brutalism page’s “ink” color; Aesthetary gives it this role. Basis: a documented rule. |
| Primary action | #FF7A45 | Fill for the loudest action, outlined in black. | From the Neo-Brutalism page’s “orange” color. Basis: Aesthetary’s interpretation. |
| Text on primary | #000000 | Label on the orange. | From the Neo-Brutalism page’s “ink” color; Aesthetary gives it this role. Basis: a documented rule. |
| Accent | #FFC900 | Fill for the current state. Never the focus indicator. | From the Neo-Brutalism page’s “yellow” color. Basis: Aesthetary’s interpretation. |
| Focus | #000000 | Focus: a black outline offset from the control. | Added by Aesthetary. The Neo-Brutalism page’s yellow focus measures 1.42:1 on the cream, under the 3:1 a focus indicator needs. A black outline, offset 3px, reaches 19.27:1. This is Aesthetary’s addition; the Aesthetic page itself is unchanged. |
| Fill 1 | #FF90E8 | Fill. | From the Neo-Brutalism page’s “pink” color. Basis: Aesthetary’s interpretation. |
| Fill 2 | #7BF1A8 | Fill. | From the Neo-Brutalism page’s “mint” color. Basis: Aesthetary’s interpretation. |
| Fill 3 | #90A8ED | Fill. | From the Neo-Brutalism page’s “blue” color. Basis: Aesthetary’s interpretation. |
| Error | #B3261E | Error marker: an outlined red mark beside black text. | Added by Aesthetary. The Neo-Brutalism page defines no status color; black text keeps the rule that no text is set in a candy color, so the red appears only as an outlined marker beside black words. |
Contrast, by use
19 approved pairs, all passing · 10 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 | 19.27:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 21.00:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 19.27:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 21.00:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 8.12:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 19.27:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 21.00:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Focus on Canvas | 19.27:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 21.00:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Border on Canvas | 19.27:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Border on Surface | 21.00:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Accent on Canvas | 1.42:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Accent on Surface | 1.54:1 | — | DecorativeAccent as a fill; meaning carried by a word too | Passes |
| Text on Accent | 13.61:1 | 4.5:1 | TextText set on the accent fill | Passes |
| Text on Fill 1 | 10.41:1 | 4.5:1 | TextText set on this fill | Passes |
| Text on Fill 2 | 14.99:1 | 4.5:1 | TextText set on this fill | Passes |
| Text on Fill 3 | 9.01:1 | 4.5:1 | TextText set on this fill | Passes |
| Error on Surface | 6.54:1 | 3:1 | Non-text (3:1)Error marker beside black words | Passes |
| Error on Canvas | 6.00:1 | 3:1 | Non-text (3:1)Error marker beside black words | Passes |
Not for text
- Primary action on Canvas 2.37:1. Not for text. Fill or decoration only. The orange is 2.37:1 on the cream: a fill inside a black outline, never text.
- Accent on Canvas 1.42:1. Not for text. Fill or decoration only. Yellow is 1.42:1 on the cream: a fill only. Never a focus ring, never text.
- Primary action on Surface 2.59: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.54: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.
- Fill 1 on Canvas 1.85: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.
- Fill 1 on Surface 2.02: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.
- Fill 2 on Canvas 1.29: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.
- Fill 2 on Surface 1.40: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.
- Fill 3 on Canvas 2.14: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.
- Fill 3 on Surface 2.33: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.
What makes it characteristic
Black does every structural job: text, outline, shadow. Color only fills shapes, at full saturation and in flat areas, and never carries text of its own color.
Limits of this palette
- The sources do not name the candy hues. Pink, yellow, mint, blue and orange are Aesthetary’s.
- There is no muted text by the Neo-Brutalism page’s own rule; the muted role is the same black.
What the sources say
2 color descriptions in their own words · 4 color rules, each marked documented or Aesthetary’s interpretation
Named in the sources
- “thick, solid, dark outlines”
- “saturated, high-contrast flat colour”
Color rules for this Aesthetic
- Saturated, high-contrast flat color. a documented rule
- No soft or muted palette. a documented rule
- Set all text in black; never set text in a candy color. Aesthetary’s interpretation
- The sources do not name the candy hues. not documented
Related
AestheticNeo-Brutalism
Related palettesFlat Fields, Chemical Green, Tinted Plastic, Laminate Clash