Get started
All interface styles
System & typographic
Free

Editorial / Magazine

Print typesetting brought to the screen: a serif reading measure, standfirsts and pull quotes, and layout that changes with the content.

Also called: magazine layout, print-inspired, long-form, publication

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Editorial / Magazine changes

Surface material, borders, shape, depth, component layout, states, and motion.

Editorial / Magazine specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Editorial / Magazine applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: The measure is deliberately narrower than the panel. Note how the label, the card text and the data row use three distinct type roles — size, weight and family all move — while staying inside the same reading column.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Editorial / Magazine to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

What you see

The perceptual fingerprint, in the order you notice it.

  • A narrow measure for body text with wide margins either side
  • Display type at a much larger scale than anything around it
  • Standfirsts, bylines, captions and pull quotes as distinct type roles
  • Rules and drop caps marking the start of a piece
  • Images that break the measure deliberately, full-bleed or hung in the margin

Best for

  • Long-form content, essays, case studies and research writing
  • Brands whose credibility rests on what they have written
  • Pages where reading time, not click-through, is the goal

Avoid when

  • The page is a product surface with controls; editorial type roles have nothing to say about a form
  • Content is short and fragmentary — the structure has nothing to hold
  • The kit's display face has no usable weight range; editorial lives on type contrast

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • Measure is an accessibility feature, not a taste one: 60–75 characters, and it must survive 200% zoom without becoming 30.
  • Drop caps must be marked `aria-hidden` on the duplicated glyph or built with `::first-letter`, or the first word is announced twice.
  • Pull quotes are decorative repetitions of body text. Take them out of the reading order rather than making a screen reader hear the sentence twice.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Reading-first editorial systems — magazine hierarchy, serif voice, archives, hairline grids, pull-quotes, drop-caps.

Implementation bundle

What an agent needs in order to actually build Editorial / Magazine on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Surface rules

The declarations that make the render grammar, stated as CSS.

  • Body measure: `max-width: 68ch` on the prose container, with `hanging-punctuation: first` and `text-wrap: pretty` where supported.
  • Two families from the kit: `--font-heading` for display and `--font-sans`/serif for body. The contrast between them is the style.
  • Display type at `clamp(2.5rem, 6vw, 4.5rem)` with `line-height: 1.05` and `letter-spacing: -0.02em`; body at 1.125rem/1.65.
  • Rules are `1px solid hsl(var(--border))`, used only to open a section or close an article — never as a box.
  • Radius 0 on media and containers; print has no rounded corners and the borrowed authority is the point.

Component rules

Nav, action, input, selection, card and status, one rule each.

  • Nav is a masthead: title left, sections right, one hairline rule under the whole bar.
  • Headline gets a standfirst below it at 1.25rem in `--muted-foreground`, then the primary action as a text link with a heavy underline.
  • Inputs sit in a bordered 'subscribe' block that deliberately breaks the measure, with the label above and helper text below.
  • Selected chip: `--foreground` fill with `--background` text in small caps. Unselected: outlined, same small caps, no fill.
  • Cards are article stubs — kicker, headline, one line of deck, then a byline-and-metadata data row separated by a hairline.
  • Status renders as a dateline-style text string ('Updated 12 min ago'), not as a coloured pill.

Responsive rules

What has to change as the viewport narrows for the style to survive.

  • Measure is `min(68ch, 100%)`, so the column narrows rather than overflowing; margins collapse before the text does.
  • Display type floor is 32px at 320px — the `clamp()` lower bound matters more here than the upper one.
  • Margin-hung captions and pull quotes move inline above the paragraph they annotate; they never become a floating overlay.

Fallbacks

The degraded paths: unsupported effects, weak shadows, reduced motion.

  • Without `text-wrap: balance` support, cap headlines with an explicit `max-width` in `ch` so they break in a controlled place.
  • If the kit supplies no distinct heading family, create the contrast with weight and size instead of importing a face — the kit owns typography.
  • `prefers-reduced-motion`: remove any scroll-linked reveal on the article body; reading must not depend on animation completing.

QA checks

What to verify before shipping an interface in this style.

  • Body measure is 60–75 characters at desktop and does not exceed it at any breakpoint.
  • Zoom to 200%: the measure narrows and no text is clipped or horizontally scrollable.
  • A screen reader passes through the article once — no duplicated drop cap, no repeated pull-quote sentence.
  • Every type role (kicker, headline, standfirst, body, caption, byline) is visually distinct without colour.

Agent tags

The vocabulary a coding agent can match this style on.

  • reading-measure
  • display-serif
  • pull-quote
  • type-roles
  • long-form