Black Blade
From Editorial Modernism · Colors chosen by Aesthetary, following the documented color rules
White space is the largest thing on the page, cut by black type; color belongs to the photographs.
Light variant
#FDFDFB, canvas, 75%. #F3F3F0, surface, 8%. #141412, text and primary action, 14%. #4A4A45, muted text, 3%.
Suggested proportions
- 75% Canvas
- 12% Text
- 8% Surface
- 3% Muted text
- 2% Primary action
In use
New
The Summer Issue.
Eleven photographers on one street.
SubscribeRead an essay
Print subscription
Four issues, posted.
Country
Portugal
We can’t post to this address yet.
Using it well
17 color pairs are approved for use. 4 pairs are not for text. Each is listed under Contrast, by use.
Roles
12 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #FDFDFB | The white space. It is the largest thing on the page. | From the Editorial Modernism page’s “paper” color. Basis: Aesthetary’s interpretation. |
| Surface | #F3F3F0 | Fields and a quiet band. | Added by Aesthetary. The Editorial Modernism page names no surface; a faint gray separates a field from the white. |
| Text | #141412 | Type, hairlines and black space. | Named in the sources: “the black blade that cut the white space” From the Editorial Modernism page’s “ink” color. Basis: Aesthetary’s interpretation. |
| Muted text | #4A4A45 | Captions, labels and the running head. | From the Editorial Modernism page’s “grey” color. Basis: Aesthetary’s interpretation. |
| Primary action | #141412 | The action, in black: the chrome has no hue. | From the Editorial Modernism page’s “ink” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Text on primary | #FDFDFB | Label on a black button. | From the Editorial Modernism page’s “paper” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Secondary action | #141412 | Secondary action: a black outline. | From the Editorial Modernism page’s “ink” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Border | #D6D6D0 | Hairlines. Decorative only. | Added by Aesthetary. The Editorial Modernism page names no rule. |
| Input border | #8A8A84 | The edge of an input. | Added by Aesthetary. A field’s only edge needs 3:1 on the paper and the surface. |
| Accent | #141412 | No accent hue: “colour belongs to the photographs.” | From the Editorial Modernism page’s “ink” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Focus | #141412 | Focus ring. | Added by Aesthetary. The Editorial Modernism page defines no focus color; the ink makes the ring. |
| Error | #B3261E | Errors, always with a word. | Added by Aesthetary. The Editorial Modernism page defines no status color. The one red in the chrome, used only for errors. |
Contrast, by use
17 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 | 18.11:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 16.59:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 8.75:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 8.02:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 18.11:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 18.11:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 16.59:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 18.11:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 16.59:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 18.11:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 16.59:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 3.41:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.12:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Error on Canvas | 6.42:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 5.88:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 18.11:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 16.59:1 | 4.5:1 | TextAccent text | Passes |
Not for text
- Border on Canvas 1.43: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.31: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.41:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.12:1. Not for text. Non-text only. An edge or ring, not a text color.
Dark variant
#141412, canvas, 75%. #1F1F1C, surface, 8%. #FDFDFB, text and primary action, 14%. #B5B5AE, muted text, 3%.
Suggested proportions
- 75% Canvas
- 12% Text
- 8% Surface
- 3% Muted text
- 2% Primary action
In use
New
The Summer Issue.
Eleven photographers on one street.
SubscribeRead an essay
Print subscription
Four issues, posted.
Country
Portugal
We can’t post to this address yet.
Using it well
17 color pairs are approved for use. 4 pairs are not for text. Each is listed under Contrast, by use.
Roles
12 colors, their HEX values, what each is for and where it comes from
| Role | Color | Use | Where it comes from |
|---|---|---|---|
| Canvas | #141412 | Black space, which the sources allow as well as white. | Named in the sources: “white or black space” From a documented variant, “Black space”. Basis: a documented rule. |
| Surface | #1F1F1C | Fields and a quiet band. | Added by Aesthetary. No surface on the Editorial Modernism page; a lifted black for fields. |
| Text | #FDFDFB | Type, reversed out of the black. | From the Editorial Modernism page’s “paper” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Muted text | #B5B5AE | Captions and labels. | Added by Aesthetary. The Editorial Modernism page’s gray is for paper; a light gray for black space. |
| Primary action | #FDFDFB | The action, in white. | From the Editorial Modernism page’s “paper” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Text on primary | #141412 | Label on a white button. | From the Editorial Modernism page’s “ink” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Secondary action | #FDFDFB | Secondary action: a white outline. | From the Editorial Modernism page’s “paper” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Border | #34342F | Hairlines. Decorative only. | Added by Aesthetary. No rule on the Editorial Modernism page. |
| Input border | #7A7A72 | The edge of an input. | Added by Aesthetary. A field’s only edge needs 3:1 on the black. |
| Accent | #FDFDFB | No accent hue. | From the Editorial Modernism page’s “paper” color; Aesthetary gives it this role. Basis: Aesthetary’s interpretation. |
| Focus | #FDFDFB | Focus ring. | Added by Aesthetary. The ring in the type color. |
| Error | #FF7A6E | Errors, always with a word. | Added by Aesthetary. A red light enough to read on black. |
Contrast, by use
17 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 | 18.11:1 | 4.5:1 | TextReading text | Passes |
| Text on Surface | 16.22:1 | 4.5:1 | TextReading text | Passes |
| Muted text on Canvas | 8.95:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Muted text on Surface | 8.01:1 | 4.5:1 | TextSecondary text, captions | Passes |
| Text on primary on Primary action | 18.11:1 | 4.5:1 | TextLabel on the primary action | Passes |
| Secondary action on Canvas | 18.11:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Secondary action on Surface | 16.22:1 | 4.5:1 | TextSecondary action: label and outline | Passes |
| Primary action on Canvas | 18.11:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Primary action on Surface | 16.22:1 | 4.5:1 | TextLinks and small text in the action color | Passes |
| Focus on Canvas | 18.11:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Focus on Surface | 16.22:1 | 3:1 | Non-text (3:1)Focus ring | Passes |
| Input border on Canvas | 4.26:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Input border on Surface | 3.82:1 | 3:1 | Non-text (3:1)Input edge, the only boundary of a field | Passes |
| Error on Canvas | 7.26:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Error on Surface | 6.50:1 | 4.5:1 | TextStatus message, always with a word or icon | Passes |
| Accent on Canvas | 18.11:1 | 4.5:1 | TextAccent text | Passes |
| Accent on Surface | 16.22:1 | 4.5:1 | TextAccent text | Passes |
Not for text
- Border on Canvas 1.47: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.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.
- Input border on Canvas 4.26:1. Not for text. Non-text only. An edge or ring, not a text color.
- Input border on Surface 3.82:1. Not for text. Non-text only. An edge or ring, not a text color.
What makes it characteristic
The chrome is paper, ink and one gray. White space is the largest element on the page and black type cuts it; any color on screen comes from the pictures, not the interface. The sources also allow the space to be black.
Limits of this palette
- The sources support a monochrome chrome. Action, focus and error have no documented basis and are Aesthetary’s additions.
What the sources say
3 color descriptions in their own words · 3 color rules, each marked documented or Aesthetary’s interpretation
Named in the sources
- “the black blade that cut the white space”
- “deep printed blacks”
- “white or black space”
Color rules for this Aesthetic
- Let black type cut the white space: at Bazaar, Didot was described as the black blade that cut it. a documented rule
- Negative space may be black as well as white; Fleckhaus used daring amounts of both. a documented rule
- Keep the chrome to paper, ink and one gray; color belongs to the photographs. Aesthetary’s interpretation
Related
AestheticEditorial Modernism
Related palettesUnbleached, Brown Key, Red Line, Blue Number, Wood and White, Stacked Film