Style

Editorial magazine

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

  • Mood: serious
  • Mood: calm
  • Density: balanced
  • Era: timeless
  • Warmth: warm

See it live

Example: food and culture journal home page for The Marrow Quarterly, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.

Open the example on its own

Copy the idea

Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.

The recipe

Editorial magazine — style recipe: the same text the brief copies.

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

Type

  • Headings: Fraunces, weights 600, 800 — High-contrast display serif; use the heavy weight for the lead story
  • Body: Source Serif 4, weights 400, 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, weights 600, 800

The quick brown fox jumps over the lazy dog

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, weights 400, 600

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

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

Scale Two serifs with different jobs; italic for standfirsts and quotes.
  • 68pxThe quick brown fox jumps over the lazy dog
  • 44pxThe quick brown fox jumps over the lazy dog
  • 30pxThe quick brown fox jumps over the lazy dog
  • 22pxThe quick brown fox jumps over the lazy dog
  • 18pxThe quick brown fox jumps over the lazy dog
  • 14pxThe quick brown fox jumps over the lazy dog

Spacing and shape

Spacing base unit 8px
  • 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

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