Design style

Editorial magazine

Reads like a well-set magazine: confident serif headlines, generous columns, pull quotes and fine rules.

  • serious
  • calm
  • balanced
  • timeless
  • warm

See it live

The Marrow Quarterly is a fictional food and culture journal home page, written for this library to show the Editorial magazinestyle. Switch the width to see it at phone, tablet and desktop size.

Open the example on its own

Copy the idea

The Editorial magazine recipe — its principles, palette, type, spacing and rules — ready to paste into a design tool or an AI assistant.

Download brief (.md)Download tokens (.css)

The recipe

The idea

Reads like a well-set magazine: confident serif headlines, generous columns, pull quotes and fine rules.

Use it when

  • Publications, blogs and journals
  • Brands built on writing and stories
  • Long pages people actually read

Avoid it when

  • The page is mostly buttons and forms
  • The audience scans rather than reads

Principles

  • A strong serif for headlines, a readable serif for text
  • Text columns of 60–75 characters
  • Pull quotes and drop caps break up long text
  • Fine horizontal rules and small caps for section labels
  • Warm off-white paper colour instead of pure white
  • Images are captioned like in print

Colour

  • Newsprint (background): #faf7f2
  • Linen (surface): #f0ebe3
  • Press black (text): #1c1a17
  • Caption grey (muted): #5c5650
  • Oxblood (accent): #9b2c1f
  • Fine rule (border): #d9d1c5
  • Text on background contrast: 16.25:1 — passes AA

Type

  • Headings: Fraunces, weights 600 and 800 — High-contrast display serif; use the heavy weight for the lead story
  • Body: Source Serif 4, weights 400 and 600 — Comfortable reading size, 18–20 px, generous line height
  • Scale: 14px, 18px, 22px, 30px, 44px, 68px
  • Two serifs with different jobs; italic for standfirsts and quotes.

Spacing and shape

  • Base unit: 8px
  • Spacing steps: 8px, 16px, 24px, 40px, 72px
  • Vertical rhythm follows the body line height.
  • Corner radii: 0px, 2px
  • Borders: Hairline rules between stories and around pull quotes
  • Shadows: None

Imagery and motion

  • Imagery: Captioned images in a frame-like crop; small line illustrations work too.
  • Motion: None; the page should feel still and printed.

Do

  • Lead with a big headline and a one-line standfirst
  • Use a pull quote to break a long section
  • Label sections in small caps

Don't

  • No sans-serif headlines
  • No full-width text lines on desktop
  • No bright gradients

Palette

  • Newsprintbackground #faf7f2
  • Linensurface #f0ebe3
  • Press blacktext #1c1a17
  • Caption greymuted #5c5650
  • Oxbloodaccent #9b2c1f
  • Fine ruleborder #d9d1c5

Text on background: 16.25:1 — passes AA

Type

Headings · Fraunces · 600, 800

The quick brown fox jumps over the lazy dog

High-contrast display serif; use the heavy weight for the lead story

Body · Source Serif 4 · 400, 600

The quick brown fox jumps over the lazy dog

Comfortable reading size, 18–20 px, generous line height

  1. 68pxThe quick brown fox jumps over the lazy dog
  2. 44pxThe quick brown fox jumps over the lazy dog
  3. 30pxThe quick brown fox jumps over the lazy dog
  4. 22pxThe quick brown fox jumps over the lazy dog
  5. 18pxThe quick brown fox jumps over the lazy dog
  6. 14pxThe quick brown fox jumps over the lazy dog

Two serifs with different jobs; italic for standfirsts and quotes.

Spacing and shape

Spacing on a 8px base

  1. 8px
  2. 16px
  3. 24px
  4. 40px
  5. 72px

Vertical rhythm follows the body line height.

Corners, borders and shadows

  • 0px
  • 2px
Borders
Hairline rules between stories and around pull quotes
Shadows
None

Do and don't

Do

  • Lead with a big headline and a one-line standfirst
  • Use a pull quote to break a long section
  • Label sections in small caps

Don't

  • No sans-serif headlines
  • No full-width text lines on desktop
  • No bright gradients