hermes-hub/.agents/skills/frontend-design/editorial-patterns.md

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

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

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, @nymag on Instagram

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

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

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

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