Hall 12

Editorial

Originated around 1934 · popular on the web around 2012

Take a souvenir

Use ← → to move between slides and F for fullscreen; the caption at the bottom is the narration.

Nº 01IntroSeen this before?Editorial

Nº 12Issue numbers on magazine covers

ADrop caps opening a long read

| | |Columns and hairlines on a newspaper page

Making web pages read like magazines has a name

Editorial

Magazine Style

Issue numbers, drop caps, columns and hairlines — some web pages read like a carefully edited magazine.

Nº 02OriginWhere it came fromEditorial

Where it came from

The magazine and newspaper publishing world of New York and beyond

1934Brodovitch takes over Harper’s BazaarAlexey Brodovitch becomes art director of Harper’s Bazaar (until 1958). His bold whitespace, bleeding photographs and rhythmic spreads define the layout language of the modern magazine.

1992The Ray Gun experimentRay Gun, a music magazine art-directed by David Carson, launches and pushes the limits of "readability" with unconventional experimental typography — the opposite pole of editorial design history.

2012Snow Fall and immersive long-formThe New York Times publishes Snow Fall, a multimedia long-form story combining magazine-style typography, images and motion on the web, and sparks a wave of "editorial" web design.

2016Variable fontsOpenType 1.8 introduces variable fonts: one font file can cover a continuous range of weights and widths, bringing web typography closer to the expressiveness of print.

Its language comes from print: from 1934, Alexey Brodovitch defined the modern magazine layout at Harper’s Bazaar.

Nº 03Rule 01High-contrast serif headlinesEditorial

01Rule 1

High-contrast serif headlines

Headlines use a modern serif with strong stroke contrast (Didone style), set very large against the body text.

Without “High-contrast serif headlines”

Decision log

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Design team · 3 min read

Instant search Full-text search across docs, comments and attachments, ranked by relevance.

Decision log Every important decision has a source, a discussion and an owner.

Works offline Keep writing on a plane; changes merge automatically once you are back online.

“Replacing weekly reports with short daily async updates cut our meeting time by 30%.”

Simple, transparent pricing

With “High-contrast serif headlines”

Decision log

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Design team · 3 min read

Instant search Full-text search across docs, comments and attachments, ranked by relevance.

Decision log Every important decision has a source, a discussion and an owner.

Works offline Keep writing on a plane; changes merge automatically once you are back online.

“Replacing weekly reports with short daily async updates cut our meeting time by 30%.”

Simple, transparent pricing

Rule one: high-contrast serif headlines.

Nº 04Rule 02Columns and gridEditorial

02Rule 2

Columns and grid

Body text runs in two or three columns separated by hairlines; stories of different lengths are staggered on the grid.

Without “Columns and grid”

Decision log

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Design team · 3 min read

Instant search Full-text search across docs, comments and attachments, ranked by relevance.

Decision log Every important decision has a source, a discussion and an owner.

Works offline Keep writing on a plane; changes merge automatically once you are back online.

“Replacing weekly reports with short daily async updates cut our meeting time by 30%.”

Simple, transparent pricing

With “Columns and grid”

Decision log

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Design team · 3 min read

Instant search Full-text search across docs, comments and attachments, ranked by relevance.

Decision log Every important decision has a source, a discussion and an owner.

Works offline Keep writing on a plane; changes merge automatically once you are back online.

“Replacing weekly reports with short daily async updates cut our meeting time by 30%.”

Simple, transparent pricing

Rule two: columns and a grid that keep body text at a comfortable measure.

Nº 05Rule 03Drop caps and pull quotesEditorial

03Rule 3

Drop caps and pull quotes

A drop cap at the start of a story and enlarged pull quotes give long reads an entry point and a rhythm.

Without “Drop caps and pull quotes”

Decision log

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Design team · 3 min read

Instant search Full-text search across docs, comments and attachments, ranked by relevance.

Decision log Every important decision has a source, a discussion and an owner.

Works offline Keep writing on a plane; changes merge automatically once you are back online.

“Replacing weekly reports with short daily async updates cut our meeting time by 30%.”

Simple, transparent pricing

With “Drop caps and pull quotes”

Decision log

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Design team · 3 min read

Instant search Full-text search across docs, comments and attachments, ranked by relevance.

Decision log Every important decision has a source, a discussion and an owner.

Works offline Keep writing on a plane; changes merge automatically once you are back online.

“Replacing weekly reports with short daily async updates cut our meeting time by 30%.”

Simple, transparent pricing

Rule three: drop caps and pull quotes give long reads a way in.

Nº 06Rule 04Editorial hierarchyEditorial

04Rule 4

Editorial hierarchy

Kicker → headline → deck → byline → body: every level has a fixed typeface, size and treatment.

With “Editorial hierarchy”

Decision log

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Design team · 3 min read

Instant search Full-text search across docs, comments and attachments, ranked by relevance.

Decision log Every important decision has a source, a discussion and an owner.

Works offline Keep writing on a plane; changes merge automatically once you are back online.

“Replacing weekly reports with short daily async updates cut our meeting time by 30%.”

Simple, transparent pricing

Rule four: kicker, headline, deck, byline, body — a fixed hierarchy.

Nº 07Out in the worldOut in the worldEditorial

Out in the world

2010Web fonts

Services such as Google Fonts launch, and the web can finally use print-quality serifs.

2012Immersive long-form

The New York Times’ Snow Fall brings magazine-style layout to the web and sparks a wave of editorial design.

2016Variable fonts

OpenType 1.8 introduces variable fonts, bringing web typography closer to print.

From paper to screen, it took web fonts and a series of long-form experiments.

Nº 08TodayWhat it looks like todayEditorial

What it looks like today

The sample product “Lumen” wearing this style. Scroll and click inside the frame.

Decision log

Turn scattered ideas into your team’s shared memory.

Lumen keeps meeting notes, design decisions and project docs in one place, so anyone can find an answer in ten seconds.

Design team · 3 min read

Instant search Full-text search across docs, comments and attachments, ranked by relevance.

Decision log Every important decision has a source, a discussion and an owner.

Works offline Keep writing on a plane; changes merge automatically once you are back online.

“Replacing weekly reports with short daily async updates cut our meeting time by 30%.”

Simple, transparent pricing

On a product page: a centered masthead, a front-page hero and columned body text with a pull quote.

Nº 09PartsTaking it apartEditorial

Buttons

Learn more →

Card

Decision log

Why we dropped weekly reports

Replacing weekly reports with short daily async updates cut our meeting time by 30%.

Design team · 3 min readRead more →

Form

Pricing

Take it apart: buttons read like text links, and the form looks like a magazine subscription box.

Nº 11Style cardStyle cardEditorial

Editorial

Magazine Style

Five words to remember it

01Serif
02Columns
03Drop cap
04Hairlines
05Hierarchy

In one line: Big headlines, short decks, drop caps and columns — a web page laid out like a well-edited magazine.
Typefaces: Playfair Display / Source Serif 4
Palette
Layout: A multi-column grid with body text at about 66 characters per line; the lead story gets a big image and headline, secondary stories run in columns separated by hairlines.
Imagery: High-quality photography with captions and credits; images may bleed or span columns.
Surface: No radii and no shadows — only 1px hairlines and double rules (--double-rule) divide the page.
Often confused with: Swiss Style · Minimalism · Brutalism

More formats ↓

Five words to remember it: serif, columns, drop cap, hairlines, hierarchy.

All slides

Pick any slide to jump straight to it.

Nº 01Seen this before?
Nº 02Where it came from
Nº 03High-contrast serif headlines
Nº 04Columns and grid
Nº 05Drop caps and pull quotes
Nº 06Editorial hierarchy
Nº 07Out in the world
Nº 08What it looks like today
Nº 09Taking it apart
Nº 10The debate
Nº 11Style card

Souvenir shop

Souvenir

Take Editorial home to your project

Pick a format and copy it into Claude, Cursor or any AI coding assistant — or download it into your repository.

Format

AI PromptCompact, paste straight into a chatDESIGN.mdFull design spec for your repoCSS variables:root custom propertiesTailwind v4@theme snippet

Souvenir language

中文English

editorial.prompt.md75 lines · 3529 characters

# Editorial (Magazine Style)

You are building a frontend UI. Apply the **Editorial** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

The layout language of print magazines brought to the screen: high-contrast serif headlines, a reading hierarchy of kickers and decks, drop caps, multi-column body text, hairlines and double rules. It trusts good typography to pull readers in.

## Design tokens

### Colors

- `background` `#FBF8F1` — page background
- `surface` `#FFFFFF` — cards, panels and raised surfaces
- `text` `#1A1A1A` — primary text
- `muted` `#5E584E` — secondary text, captions, placeholders
- `accent` `#B3261E` — primary actions, links, key highlights
- `on-accent` `#FFFFFF` — text and icons placed on the accent color
- `border` `#1A1A1A` — dividers, outlines, input borders
- `highlight` `#F3E7C9` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Playfair Display` (Google Fonts, weights 700 / 900) → fallback `"Didot", "Bodoni 72", Georgia, serif`
- Body text: `Source Serif 4` (Google Fonts, weights 400 / 600) → fallback `Georgia, "Times New Roman", serif`
- Type scale (px): 12 · 14 · 17 · 21 · 28 · 40 · 64 · 96

### Spacing & Shape

- Base unit: 8px · Spacing scale (px): 8 · 16 · 24 · 32 · 48 · 72 · 96
- Corner radius (sm / md / lg): 0 / 0 / 0 px
- Border: 1px solid
- Shadows (sm / md / lg): none / none / none

### Motion

- Durations (fast / base): 150ms / 300ms
- Easing: `cubic-bezier(0.25, 0.1, 0.25, 1)`

### Signature effects

- `--measure`: `66ch`
- `--double-rule`: `4px double #1A1A1A`

## Do

- Use a high-contrast serif display face (e.g. Playfair Display) for headlines and a legible serif for body text.
- Give every story a kicker → headline → deck → byline → body hierarchy.
- Keep body text at about 66 characters per line; on wide screens use two or three columns with 1px hairlines between them.
- Open stories with a drop cap about three lines tall.
- Divide the page with 1px hairlines and double rules; set kickers in deep red small caps.

## Don't

- Do not use rounded cards, shadows or gradients.
- Do not set large headlines in a sans-serif.
- Do not let body text span the full width of a wide screen.
- Do not use a bright multicolor palette — keep a single accent color.

## Components

- **Buttons**: Buttons read like text links: small caps with wide tracking inside a 1px frame; the primary button is solid near-black. Avoid rounded pills.
- **Cards**: A card is a story preview: a deep red small-caps kicker, serif headline, deck and byline, with a hairline on top and no background or shadow.
- **Forms**: A subscription-box form: beige background and a hairline frame; inputs have only a bottom rule and labels are set in small caps.
- **Navigation**: A centered masthead with a large serif brand name between double rules; section navigation in small caps separated by vertical bars.
- **Layout**: A multi-column grid with body text at about 66 characters per line; the lead story gets a big image and headline, secondary stories run in columns separated by hairlines.
- **Imagery & icons**: High-quality photography with captions and credits; images may bleed or span columns.

## Accessibility

- Body text at 17px or more with a line height of about 1.5–1.6; check the legibility of thin serifs at small sizes.
- Multi-column layouts must collapse to one column on narrow screens with the same reading order.

_Generated by Style Museum._