476 lines
18 KiB
Markdown
476 lines
18 KiB
Markdown
# Editorial Patterns — Pentagram, Bloomberg BW, NYT Mag, and friends
|
||
|
||
> A deep-dive into the editorial sub-styles. Read this when `aesthetics.md` §2 (Editorial / Magazine) is right for the project, but you need a specific reference direction. Each sub-style has concrete rules, typefaces, layouts, and references.
|
||
|
||
---
|
||
|
||
## How to use this file
|
||
|
||
`aesthetics.md` §2 says: **Editorial / Magazine** for publishing, journalism, premium content, manifestos, agency sites.
|
||
|
||
This file says: **which Pentagram cousin** to ship. Because "editorial" without specificity is a generic magazine page, not a designed one.
|
||
|
||
Decision rule:
|
||
1. **Is the project publishing, journalism, premium brand, content-heavy, or manifesto-style?** If no → wrong family, go back to `aesthetics.md`.
|
||
2. **Pick the sub-style** that matches the audience and tone.
|
||
3. **Commit to it.** Don't blend NYT Magazine's black/white with Bloomberg BW's color. Don't mix Pentagram's restraint with Apartamento's warmth.
|
||
|
||
---
|
||
|
||
## Sub-style comparison
|
||
|
||
| Sub-style | Mood | Type pairing | Color | Audience |
|
||
|---|---|---|---|---|
|
||
| **Pentagram (archive)** | Authoritative, restrained, considered | Serif display + sans body | Often monochrome | Brands, institutions, design-aware clients |
|
||
| **Bloomberg Businessweek** | Loud, dense, opinionated, graphic | Mixed sans/serif | Bright accent as punctuation | News readers, designers, intellectuals |
|
||
| **NYT Magazine** | Classic, literary, calm | Serif throughout | B/W minimal | Long-form readers, literary audience |
|
||
| **It's Nice That** | Contemporary, bright, friendly | Mixed sans + occasional serif | Multi-hue but restrained | Creative industry, design students |
|
||
| **Apartamento** | Warm, intimate, considered | Sans display + serif body | Warm tones, soft | Interior design, lifestyle, slow living |
|
||
| **The Gentlewoman** | Restrained, portrait-led | Sans display | Often monochrome | Fashion, design, considered culture |
|
||
|
||
When unsure → **Pentagram archive** — it's the safest editorial baseline.
|
||
|
||
---
|
||
|
||
## 1. Pentagram (archive work)
|
||
|
||
**Live reference:** [pentagram.com](https://pentagram.com)
|
||
|
||
### Identity
|
||
Pentagram is a partner-led studio where each partner has their own aesthetic voice, but the studio shares principles: **strong typography, asymmetric grids, real photography, considered whitespace, restrained color, no decoration.** Their archive work is the reference standard for editorial design.
|
||
|
||
### When to choose
|
||
- Institutional clients (museums, galleries, foundations)
|
||
- Brand systems for considered brands
|
||
- Editorial sites that want gravitas
|
||
- Anything where "designed by humans" is the message
|
||
|
||
### Palette
|
||
Pentagram work is mostly **monochrome** with one accent used sparingly:
|
||
|
||
```
|
||
--surface: #FFFFFF
|
||
--surface-1: #FAFAFA
|
||
|
||
--ink: #1A1A1A
|
||
--ink-muted: #6B6B6B
|
||
--ink-subtle: #A0A0A0
|
||
|
||
--hairline: #E5E5E5
|
||
--hairline-strong: #C7C7C7
|
||
|
||
--accent: (varies by project; often red #C8281C or no accent)
|
||
```
|
||
|
||
### Typography
|
||
- **Serif display + sans body** is the dominant pairing
|
||
- Examples: GT Super / Tiempos for display + Söhne / Inter for body
|
||
- **Hero size:** massive — `clamp(4rem, 9vw, 9rem)` or larger
|
||
- **Tracking:** -0.03em to -0.05em on display
|
||
- **Line-height:** tight (1.0–1.1) on display
|
||
- **Body:** generous (1.55–1.65)
|
||
|
||
### Layout
|
||
- **Strong vertical rhythm.** Generous gutters.
|
||
- **Asymmetric grids.** Image bleeds off one edge, text column offset.
|
||
- **No decorative borders.** Hairlines only where they organize information.
|
||
- **Section numbers / folio numbers as design elements.**
|
||
|
||
### Signature patterns
|
||
- ✅ **Asymmetric hero with massive headline + small image.** Not centered, not balanced.
|
||
- ✅ **Section markers as design.** "§ 01 — On the work", "§ 02 — On the studio", etc.
|
||
- ✅ **Real photography** (or none — typography-only is also valid).
|
||
- ✅ **Image captions** in italic, often with photographer credit.
|
||
- ✅ **Long-form considered scrolling** — sections are big, scroll is intentional.
|
||
- ✅ **Colophon** — a page describing the typographic and technical choices.
|
||
|
||
### Hallmarks
|
||
- ✅ Display type sets the design
|
||
- ✅ Whitespace carries the design (not decoration)
|
||
- ✅ Strong asymmetry, never centered
|
||
- ✅ Section markers in mono / small caps
|
||
- ✅ One accent used <5% of pixels
|
||
|
||
### Anti-patterns to avoid
|
||
- ❌ SaaS-style 3-card row
|
||
- ❌ Decorative gradient backgrounds
|
||
- ❌ Stock photography
|
||
- ❌ Centered hero with two CTA buttons
|
||
- ❌ "Trusted by" logo bar
|
||
- ❌ Multi-color rainbow palette
|
||
|
||
---
|
||
|
||
## 2. Bloomberg Businessweek
|
||
|
||
**Live reference:** [bloomberg.com/businessweek](https://www.bloomberg.com/businessweek)
|
||
|
||
### Identity
|
||
Bloomberg BW is famous for its **distinctive covers** (since 2010 redesign by Richard Turley) and dense, opinionated editorial design. Mixed typefaces, bright accent colors used as punctuation, magazine-spread layouts, no fear of density or color. The early Bloomberg BW covers were especially brutalist-influenced.
|
||
|
||
### When to choose
|
||
- News / current affairs brands
|
||
- Editorial products with strong opinions
|
||
- Publications that want to be noticed
|
||
- Anything that needs editorial "edge"
|
||
|
||
### Palette
|
||
Bloomberg BW is unafraid of color. Pairs of saturated colors used as punctuation:
|
||
|
||
```
|
||
--surface: #FFFFFF /* or #F5F0E8 cream */
|
||
--ink: #000000 /* true black */
|
||
|
||
--accent-red: #FF0000
|
||
--accent-yellow: #FFD700
|
||
--accent-blue: #0033A0
|
||
--accent-green: #00A651
|
||
```
|
||
|
||
Colors are used in **flat blocks** — not gradients. They mark sections, callouts, pull quotes, issue numbers.
|
||
|
||
### Typography
|
||
- **Mixed typefaces.** Bloomberg BW covers combine sans, serif, and mono often in one composition.
|
||
- Common pairings: **Akzidenz-Grotesk** + **Tiempos** + **Berkeley Mono**
|
||
- Free substitutes: **Inter** + **Fraunces** + **JetBrains Mono**
|
||
- **Hero size:** massive — covers often set type at 200pt+
|
||
- **Tracking:** varies wildly (Bloomberg BW uses both tight and wide tracking as a design move)
|
||
|
||
### Layout
|
||
- **Magazine spreads.** Two-page compositions that read as one design.
|
||
- **Asymmetric, dense.** Multiple columns, varied scale.
|
||
- **No whitespace fear** — but no whitespace waste either.
|
||
- **Section dividers as color blocks**, not hairlines.
|
||
|
||
### Signature patterns
|
||
- ✅ **Cover-as-hero.** Treat each section's opening like a magazine cover — massive type, big image (or solid color block), issue number, date, kicker.
|
||
- ✅ **Pull quotes at display size.** Set in display face, often with rule lines above and below.
|
||
- ✅ **Mixed sans/serif/mono in single compositions.** This is the signature.
|
||
- ✅ **Bright accent blocks** as design elements — full-bleed rectangles of color, not gradients.
|
||
- ✅ **Numbered issue markers**, datelines, "in this issue" panels.
|
||
- ✅ **Loud + quiet alternation.** Not constant noise. A few loud moments, many calm moments.
|
||
|
||
### Hallmarks
|
||
- ✅ Type mixing as a design move
|
||
- ✅ Color as punctuation (full blocks)
|
||
- ✅ Mag density with mag elegance
|
||
- ✅ Cover-style openings for sections
|
||
- ✅ Pull quotes at display scale
|
||
|
||
### Anti-patterns to avoid
|
||
- ❌ Generic SaaS feature presentation
|
||
- ❌ Centered everything
|
||
- ❌ Pastel colors (Bloomberg BW uses saturated)
|
||
- ❌ Gradients (Bloomberg BW uses flat color)
|
||
- ❌ Tailwind default aesthetic
|
||
|
||
---
|
||
|
||
## 3. NYT Magazine
|
||
|
||
**Live reference:** [nytimes.com/section/magazine](https://www.nytimes.com/section/magazine), [@nymag on Instagram](https://instagram.com/nymag)
|
||
|
||
### Identity
|
||
The NYT Magazine is the reference standard for literary editorial design. **Large serif typography, strong vertical rhythm, black/white minimal with one accent, issue / section markers as design, pull quotes, photography-led, masthead-style headers.**
|
||
|
||
### When to choose
|
||
- Long-form journalism
|
||
- Literary brands, publishing houses
|
||
- Premium editorial products
|
||
- Anything that wants to feel "literary" without being dusty
|
||
|
||
### Palette
|
||
```
|
||
--surface: #FFFFFF /* pure white, classic */
|
||
--ink: #000000 /* true black */
|
||
|
||
--accent: #C8281C /* editorial red — used on kickers, section markers */
|
||
--accent-soft: #FAE6E2
|
||
|
||
--rule-line: #000000 /* often uses true black for rule lines */
|
||
```
|
||
|
||
NYT Magazine is overwhelmingly **black/white**. The red is punctuation, not background.
|
||
|
||
### Typography
|
||
- **Serif throughout.** NYT Magazine uses Cheltenham (custom) — substitutes:
|
||
- **Charter** (free, similar character)
|
||
- **GT Super** (paid, editorial)
|
||
- **Tiempos** (paid, contemporary serif)
|
||
- **Source Serif** or **Newsreader** (free)
|
||
- **Mono for kickers / metadata:** NYT Magazine uses a custom mono — substitute **JetBrains Mono** or **GT America Mono**.
|
||
- **Hero size:** massive — `clamp(4rem, 10vw, 10rem)`
|
||
- **Tracking:** -0.02em to -0.03em on display
|
||
- **Line-height:** tight on display (1.0), generous on body (1.6)
|
||
- **Drop caps:** 3–4 lines, in display face, on long-form articles.
|
||
|
||
### Layout
|
||
- **Strong vertical rhythm.** Generous gutters.
|
||
- **Measure (line length):** 60–75 characters for body.
|
||
- **Asymmetric grids:** image bleeds, text columns offset.
|
||
- **Section markers:** "THE WEEKEND", "THE LOOK", "THE STORY" in caps mono.
|
||
- **Footnotes / margin notes** where appropriate.
|
||
|
||
### Signature patterns
|
||
- ✅ **Masthead-style header.** Issue date, volume, section name in small caps mono.
|
||
- ✅ **Section dividers as text markers**, not decorative lines.
|
||
- ✅ **Drop caps on long-form articles.**
|
||
- ✅ **Pull quotes at display scale.** Set in display face, often with rule lines.
|
||
- ✅ **Photography-led design.** Cover and inside spreads are image-driven.
|
||
- ✅ **Captions in italic, smaller type**, often with photo credits.
|
||
- ✅ **One accent (red) used <5% of pixels.** Almost everything is black on white.
|
||
|
||
### Hallmarks
|
||
- ✅ Serif throughout (display + body in same family)
|
||
- ✅ Generous body line-height (1.6+)
|
||
- ✅ Strong vertical rhythm
|
||
- ✅ Section markers in mono, all-caps, wide tracking
|
||
- ✅ Drop caps on long-form
|
||
- ✅ Photography as primary visual
|
||
|
||
### Anti-patterns to avoid
|
||
- ❌ Sans-serif body
|
||
- ❌ SaaS-style feature presentation
|
||
- ❌ Generic stock photos
|
||
- ❌ Centered body text
|
||
- ❌ Justified body text (always left-aligned)
|
||
- ❌ Multi-color palette
|
||
|
||
---
|
||
|
||
## 4. It's Nice That
|
||
|
||
**Live reference:** [itsnicethat.com](https://www.itsnicethat.com)
|
||
|
||
### Identity
|
||
Contemporary editorial with bright accents. Mixed sans + occasional serif. Friendly, considered. The aesthetic of "design publication that respects the design industry" — informed, opinionated, generous.
|
||
|
||
### When to choose
|
||
- Design publications
|
||
- Creative industry marketing
|
||
- Award sites, festival sites
|
||
- Anything targeting design students and professionals
|
||
|
||
### Palette
|
||
```
|
||
--surface: #FFFFFF
|
||
--ink: #1A1A1A
|
||
|
||
--accent-coral: #FF5C39
|
||
--accent-blue: #0050FF
|
||
--accent-yellow: #FFD23F
|
||
--accent-green: #00C896
|
||
```
|
||
|
||
It's Nice That uses **bright but flat** accent colors. Each accent has meaning (different categories of content).
|
||
|
||
### Typography
|
||
- **Sans primary** (Inter, Söhne substitute) + **occasional serif** for editorial pull quotes
|
||
- Hero size: `clamp(2.5rem, 6vw, 5rem)`
|
||
- Tracking: -0.02em on display
|
||
- Body: 16–18px, line-height 1.55
|
||
|
||
### Layout
|
||
- Max-width 1200–1400px (wider than typical editorial)
|
||
- Asymmetric grids with mixed media
|
||
- Strong use of photography
|
||
- Article cards with cover images
|
||
|
||
### Signature patterns
|
||
- ✅ **Bright accent categories.** Each content type gets a color.
|
||
- ✅ **Hero with featured article** — large image + headline + meta.
|
||
- ✅ **Mixed sans + serif.** Use the serif for emphasis on key word in headline.
|
||
- ✅ **Photography-led.** Real photos, not stock.
|
||
- ✅ **Article cards** with hover effects (image lifts or shifts).
|
||
- ✅ **Generous whitespace** between dense moments.
|
||
|
||
### Hallmarks
|
||
- ✅ Multi-hue semantic accents
|
||
- ✅ Mixed typography (sans + serif)
|
||
- ✅ Editorial pull quotes
|
||
- ✅ Photography as primary visual
|
||
- ✅ Friendly but considered microcopy
|
||
|
||
### Anti-patterns to avoid
|
||
- ❌ Generic "3-card features" presentation
|
||
- ❌ Stock photography
|
||
- ❌ Centered hero with two CTA buttons
|
||
- ❌ Loud gradients
|
||
- ❌ Tailwind defaults
|
||
|
||
---
|
||
|
||
## 5. Apartamento
|
||
|
||
**Live reference:** [apartamentomagazine.com](https://www.apartamentomagazine.com)
|
||
|
||
### Identity
|
||
Interior design magazine with a warm, intimate, considered aesthetic. Photography-led. Soft warm tones. Long-form interviews. Restrained typography. The aesthetic of "magazine you keep on your coffee table."
|
||
|
||
### When to choose
|
||
- Lifestyle, hospitality, interior design
|
||
- Long-form interview-style content
|
||
- Brands with "slow" positioning
|
||
- Premium consumer with editorial feel
|
||
|
||
### Palette
|
||
```
|
||
--surface: #FAF6F0 /* warm cream */
|
||
--surface-1: #F4EFE6
|
||
|
||
--ink: #2B2522 /* warm near-black */
|
||
--ink-muted: #6B5E51
|
||
--ink-subtle: #9C8E7E
|
||
|
||
--hairline: #E5DDD0
|
||
--hairline-strong: #D4C9B6
|
||
|
||
--accent: #8B3A2F /* deep terracotta — used very sparingly */
|
||
--accent-soft: #F2E2DC
|
||
```
|
||
|
||
Apartamento's palette is **all warm**. No cold tones anywhere.
|
||
|
||
### Typography
|
||
- **Sans display** (Söhne, Inter) + **serif body** (Tiempos, GT Super)
|
||
- Hero size: `clamp(2.5rem, 6vw, 5rem)` — calm, generous
|
||
- Tracking: -0.02em on display
|
||
- Line-height: 1.1 on display, 1.6 on body
|
||
|
||
### Layout
|
||
- Max-width 1100px (narrower than typical magazine)
|
||
- Photography-led spreads
|
||
- Long-form interview formatting
|
||
- Generous whitespace
|
||
|
||
### Signature patterns
|
||
- ✅ **Photography as primary design element.** Every spread is image-first.
|
||
- ✅ **Warm cream backgrounds** (never pure white).
|
||
- ✅ **Long-form interview structure** — Q&A format, generous line-height.
|
||
- ✅ **Restrained accent** (terracotta) used on section markers, never as background.
|
||
- ✅ **Sans display + serif body** — editorial influence.
|
||
- ✅ **Considered micro-copy** with personality.
|
||
|
||
### Hallmarks
|
||
- ✅ Warm palette throughout (no cold tones)
|
||
- ✅ Photography-led design
|
||
- ✅ Long-form interview formatting
|
||
- ✅ Sans display + serif body pairing
|
||
- ✅ Personal, intimate voice
|
||
|
||
### Anti-patterns to avoid
|
||
- ❌ Pure white background (breaks warmth)
|
||
- ❌ Cold accents (blue, green)
|
||
- ❌ SaaS-style feature presentation
|
||
- ❌ Stock photography
|
||
- ❌ Loud animations
|
||
|
||
---
|
||
|
||
## 6. The Gentlewoman
|
||
|
||
**Live reference:** [thegentlewoman.com](https://www.thegentlewoman.com)
|
||
|
||
### Identity
|
||
Restrained, portrait-led magazine. Sans display throughout. Often monochrome. Considered spacing. The aesthetic of "magazine about interesting people, designed quietly."
|
||
|
||
### When to choose
|
||
- Fashion, design, considered culture brands
|
||
- Premium lifestyle publications
|
||
- Anything where portraits are the content
|
||
- Restrained, premium positioning
|
||
|
||
### Palette
|
||
Often **pure monochrome**:
|
||
```
|
||
--surface: #FFFFFF /* or off-white #F5F2EC */
|
||
--ink: #1A1A1A
|
||
--hairline: #E5E5E5
|
||
|
||
--accent: (rarely — often no accent, or single warm tone)
|
||
```
|
||
|
||
When there's an accent, it's often a single muted color (terracotta, deep red).
|
||
|
||
### Typography
|
||
- **Sans display throughout** (the magazine uses a custom sans — substitute Söhne, GT Walsheim, Inter)
|
||
- Hero size: `clamp(2.5rem, 5vw, 4.5rem)` — confident, restrained
|
||
- Tracking: -0.02em on display
|
||
- Body: 16px, line-height 1.55
|
||
|
||
### Layout
|
||
- Max-width 1100px
|
||
- Portrait-led spreads (large portraits dominate)
|
||
- Asymmetric grids with portrait as anchor
|
||
- Generous whitespace
|
||
|
||
### Signature patterns
|
||
- ✅ **Portrait as hero.** Each issue's cover and key spreads are dominated by a portrait.
|
||
- ✅ **Restrained typography.** Sans throughout, no display serif.
|
||
- ✅ **Generous whitespace** around portraits.
|
||
- ✅ **Issue number, date, "in this issue"** as design elements.
|
||
- ✅ **Long-form interviews** with thoughtful typography.
|
||
- ✅ **Monochrome or single-accent palette.**
|
||
|
||
### Hallmarks
|
||
- ✅ Sans display throughout (no serif)
|
||
- ✅ Portrait-led design
|
||
- ✅ Monochrome or single-accent palette
|
||
- ✅ Restrained, considered spacing
|
||
- ✅ Editorial interview formatting
|
||
|
||
### Anti-patterns to avoid
|
||
- ❌ Multi-color palette
|
||
- ❌ Sans-serif body (use a considered sans)
|
||
- ❌ Generic SaaS feature presentation
|
||
- ❌ Stock photography
|
||
- ❌ Decorative elements
|
||
|
||
---
|
||
|
||
## Decision tree
|
||
|
||
```
|
||
Editorial project?
|
||
├── Yes
|
||
│ ├── Institutional / authoritative / archival?
|
||
│ │ ├── Yes → Pentagram (archive)
|
||
│ │ └── No → continue
|
||
│ ├── News / current affairs / opinionated?
|
||
│ │ ├── Yes → Bloomberg Businessweek
|
||
│ │ └── No → continue
|
||
│ ├── Literary / long-form / journalism?
|
||
│ │ ├── Yes → NYT Magazine
|
||
│ │ └── No → continue
|
||
│ ├── Design publication / contemporary editorial?
|
||
│ │ ├── Yes → It's Nice That
|
||
│ │ └── No → continue
|
||
│ ├── Warm / intimate / interior / lifestyle?
|
||
│ │ ├── Yes → Apartamento
|
||
│ │ └── No → continue
|
||
│ └── Fashion / portrait-led / restrained?
|
||
│ └── Yes → The Gentlewoman
|
||
└── No → wrong family, return to aesthetics.md
|
||
```
|
||
|
||
---
|
||
|
||
## Hybrid rules
|
||
|
||
When forced to combine editorial sub-styles:
|
||
|
||
1. **Pick dominant 70/30.** Don't blend evenly.
|
||
2. **Share typography family.** NYT Magazine + Pentagram both use serif — easy. Bloomberg BW + It's Nice That both use mixed sans/serif — easy.
|
||
3. **Share accent philosophy.** Don't blend B/W with multi-color.
|
||
4. **Different sub-styles for different surfaces is fine.** Pentagram-style landing, NYT Magazine-style article reading. Share typography and tokens.
|
||
|
||
---
|
||
|
||
## What to read next
|
||
|
||
- For typography system setup → `typography.md`
|
||
- For color tokens → `color.md`
|
||
- For component patterns → `components.md`
|
||
- For motion → `motion.md`
|
||
- For anti-patterns → `anti-patterns.md`
|
||
- For final QA → `checklist.md`
|