Flat Fields
From Mid-Century Modern · Colors chosen by Aesthetary, following the documented color rules
Flat, unmodulated fields of bright ink on a grained paper ground, with type framed by a color background.
#F3EAD7, canvas, 45%. #FBF6EA, surface, 10%. #2B2622, text, 10%. #5E554C, muted text, 3%. #E2B33C, primary action, 8%. #256A66, accent, 4%. #D19A3A, fill 1, 5%. #2E7F7A, fill 2, 10%. #B5562B, fill 3, 5%.
Suggested proportions
- 45% Canvas
- 10% Surface
- 10% Text
- 10% Fill 2
- 8% Primary action
- 5% Fill 1
- 5% Fill 3
- 4% Accent
- 3% Muted text
In use
New
Six Rooms, on vinyl.
A new pressing of the 1958 session.
Pre-orderListen
#D19A3A, fill 1. #2E7F7A, fill 2. #B5562B, fill 3.
Mailing list
One letter a month, no more.
june@
That email is missing its domain.
Using it well
16 color pairs are approved for use. 12 pairs are not for text; the ones that matter most for this palette:
- Primary action on Canvas Not for text. Mustard is 1.63:1 on the paper. A mustard button needs an ink edge; mustard is never text.
- Fill 2 on Canvas Not for text. Teal is 3.96:1 on the paper: shapes and display type, not body text.
Roles
15 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #F3EAD7 | The ground, with a printed grain. | From the Mid-Century Modern page’s “paper” color. Basis: Aesthetary’s interpretation. |
| Surface | #FBF6EA | Fields and panels. | Added by Aesthetary. The Mid-Century Modern page names no surface for fields. |
| Text | #2B2622 | Text, hairlines, drawn line. | From the Mid-Century Modern page’s “ink” color. Basis: Aesthetary’s interpretation. |
| Muted text | #5E554C | Secondary text. | Added by Aesthetary. The Mid-Century Modern page names no secondary text color. |
| Secondary action | #2B2622 | Secondary action: an ink outline. | From the Mid-Century Modern page’s “ink” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Border | #D9CDB4 | Hairlines. Decorative only. | Added by Aesthetary. The Mid-Century Modern page names no rule. |
| Input border | #857965 | The edge of an input. | Added by Aesthetary. A field’s only edge needs 3:1. |
| Primary action | #E2B33C | Flat ink and button ground, with an ink edge. | From the Mid-Century Modern page’s “mustard” color. Basis: Aesthetary’s interpretation. |
| Text on primary | #2B2622 | Label on the mustard. | From the Mid-Century Modern page’s “ink” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Accent | #256A66 | Labels and small text in color; the flat field behind type. | From the Mid-Century Modern page’s “teal-deep” color. Basis: Aesthetary’s interpretation. |
| Focus | #9C4520 | Focus ring. | From the Mid-Century Modern page’s “rust-deep” color. Basis: Aesthetary’s interpretation. |
| Fill 1 | #D19A3A | Flat ink for shapes; never text. | From the Mid-Century Modern page’s “ochre” color. Basis: Aesthetary’s interpretation. |
| Fill 2 | #2E7F7A | Flat ink for shapes; never text. | From the Mid-Century Modern page’s “teal” color. Basis: Aesthetary’s interpretation. |
| Fill 3 | #B5562B | Flat ink for shapes. | From the Mid-Century Modern page’s “rust” color. Basis: Aesthetary’s interpretation. |
| Error | #A3271C | Errors, always with a word. | Added by Aesthetary. The Mid-Century Modern page defines no status color. |
Contrast, by use
16 approved pairs, all passing · 12 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 | 12.52:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 13.88:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 6.10:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 6.76:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 7.66:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 12.52:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 13.88:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Focus on Canvas | 5.34:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 5.93:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.57:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.96:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Error on Canvas | 6.13:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 6.80:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 5.27:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 5.84:1 | 4.5:1 | TextAccent text | Passes |
| Text on Fill 1 | 5.98:1 | 4.5:1 | TextText set on this fill | Passes |
Not for text
- Primary action on Canvas 1.63:1. Not for text. Fill or decoration only. Mustard is 1.63:1 on the paper. A mustard button needs an ink edge; mustard is never text.
- Fill 2 on Canvas 3.96:1. Not for text. Non-text only. Teal is 3.96:1 on the paper: shapes and display type, not body text.
- Primary action on Surface 1.81: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.32: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.46: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.57:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.96:1. Not for text. Non-text only. An edge or ring, not a text color.
- Fill 1 on Canvas 2.09: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.32: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 4.39:1. Not for text. Large text and non-text only. Under 4.5:1: display-size text, icons and edges only.
- Fill 3 on Canvas 4.06:1. Not for text. Large text and non-text only. Under 4.5:1: display-size text, icons and edges only.
- Fill 3 on Surface 4.50:1. Not for text. Large text and non-text only. Under 4.5:1: display-size text, icons and edges only.
What makes it characteristic
Color is laid as a field behind type, not as a highlight on it: a flat block frames the words. Which hues lead is left open by the sources, so the four inks here are a choice.
Limits of this palette
- “The sources do not say which hues lead.” Ochre, teal, mustard and rust are Aesthetary’s choice, as the Mid-Century Modern page says.
What the sources say
1 color descriptions in their own words · 4 color rules, each marked documented or Aesthetary’s interpretation
Named in the sources
- “a flat colour background framed varied type”
Color rules for this Aesthetic
- Color: bright flat color, laid as unmodulated fields. a documented rule
- On Lustig's Noonday and Meridian covers, a flat color background framed varied type. a documented rule
- Overprint where two inks meet (mix-blend-mode: multiply), rather than stacking them opaque. Aesthetary’s interpretation
- The sources do not say which hues lead. not documented
Related
AestheticMid-Century Modern
Related palettesOutline and Fill, Chemical Green, Tinted Plastic, Laminate Clash