Magazine Editorial

---
name: magazine-editorial
description: Apply the Magazine Editorial visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Magazine Editorial, mentions fashion magazine layout, editorial spread, print magazine web, or describes 72–120px didone-style headlines, asymmetric magazine grid, full-bleed photography — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Magazine Editorial Design System

High-fashion print layout on screen: 72–120px high-contrast serif headlines over a clean white ground, sans-serif body in asymmetric multi-column grids, full-bleed photography, oversized pull quotes, drop caps, and one bold crimson accent. Dramatic scale contrast is the engine.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Magazine Editorial.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (fashion magazine layout, editorial spread, print magazine web, lookbook layout, glossy editorial), or describes its traits: 72–120px didone-style headlines; asymmetric magazine grid; full-bleed photography; sans-serif body against serif display; oversized pull quotes; dramatic scale contrast.

## Design tokens

### Color palette

- Gallery-white page ground: `#ffffff` (--color-bg)
- Ink for display and body: `#111111` (--color-text)
- Captions, credits, folios: `#6b6b6b` (--color-text-muted)
- Bold crimson — issue numbers, kickers, links, one highlighted word: `#c1121f` (--color-accent)
- Sparse hairline rules for captions and folios: `#111111` (--color-border)

### Typography

- Display / headings: Playfair Display (fallback: Didot, Bodoni MT, Georgia, serif) (ideal: Canela, premium — use Playfair Display as the free substitute)
- Body: Archivo (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.5 ratio, base 16px — computed steps: 16px / 24px / 36px / 54px / 81px / 122px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.05, letter-spacing -0.015em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 72, 120 — Wide outer margins framing the spread; inside it, multi-column clusters sit tight while full-bleed images periodically break every boundary.
- Border radius: none 0px — Print geometry — everything square, images flush-cropped.
- Border treatment: 1px solid #111111 — Rules are sparse and deliberate: under folios, above photo credits, beside pull quotes. Not a structural grid of lines like a broadsheet.

### Shadows

- none: `none` — Flat like a glossy page; depth comes from photography and scale contrast, never elevation

### Layout

- Max content width: 1440px
- 12-column grid used asymmetrically — text in 3–4 columns, images spanning 6–12, deliberate empty columns
- Full-bleed photography escapes the max-width to the viewport edge
- Headlines may overlap images with mix-blend-mode or offset positioning
- Pull quotes at 2x body scale in the display serif, breaking column flow
- Feature openers get drop caps and a crimson kicker line

### Effects

- Full-bleed image sections with text overlap
- Oversized quotation marks or issue numerals (No. 04) in display serif
- Crimson kicker labels in letterspaced caps above headlines
- Image captions in 12px with hairline rule and photo credit

### Motion

- Easing: cubic-bezier(0.65, 0, 0.35, 1); durations 150ms / 400ms / 800ms
- Images reveal with slow clip-path wipes as they enter the viewport
- Headlines fade-and-rise once; no looping animation
- Subtle image scale (1.0 to 1.05) over slow duration on hover
- Everything settles quickly — the page should feel printed, not performed

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-text-muted: #6b6b6b;
  --color-accent: #c1121f;
  --color-border: #111111;
  --radius-none: 0px;
  --border-default: 1px solid #111111;
  --font-display: "Playfair Display", Didot, "Bodoni MT", Georgia, serif;
  --font-body: Archivo, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.05;
  --leading-body: 1.6;
  --tracking-heading: -0.015em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Archivo:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Slim bar with the magazine wordmark in the display serif centered or left, section links in 13px letterspaced caps, hairline rule below; transparent over hero imagery
- **Hero:** Cover moment: full-bleed photograph with the 96–120px serif headline overlapping it, crimson kicker above, dek in 18px sans below-left on the white margin
- **Card:** Story tile: flush image, crimson section kicker in 11px caps, 28px serif headline, one-line sans dek, byline in muted 13px — no box or border
- **Button (primary):** Ink-black fill, white 13px letterspaced caps label, square; used for subscribe only
- **Button (secondary):** Crimson letterspaced caps text link with 1px underline on hover
- **Form fields:** Underline-only input with 11px caps label; focus turns the underline crimson

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A spread-like composition where a 96px high-contrast serif headline overlaps a full-bleed photograph, with a slim column of sans body text and an oversized serif pull quote breaking the grid beside it. Spend boldness here; keep everything else quiet.

## Do

- Push scale contrast hard: 96px display against 16px body and 11px captions in one composition
- Art-direct every image — crops, bleeds, and overlaps should feel chosen, not templated
- Alternate density: a packed multi-column cluster, then a full-bleed image, then whitespace
- Keep the crimson accent editorial — kickers, numerals, one word — never large fills

## Don't

- Don't use the serif for body text — sans body against serif display is what separates this from broadsheet and literary styles
- No uniform card grids; symmetry kills the spread energy
- No shadows, gradients, or rounded corners
- Don't crowd full-bleed images with UI; let them own their section

## Accessibility notes

- #111111 on white passes AAA; crimson #c1121f on white passes AA (~6.2:1) including at caption sizes
- Text overlapping photography needs a guaranteed-contrast treatment (solid ink over light image areas, or a white margin fallback) — test against the actual images
- Clip-path image reveals must respect prefers-reduced-motion
- 11px letterspaced caps are at the legibility floor — never use them for content that matters

## Reference sites

- Vogue: https://www.vogue.com
- Kinfolk: https://www.kinfolk.com
- It's Nice That: https://www.itsnicethat.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip magazine-editorial.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/magazine-editorial.json

Settings → Capabilities → Skills → Upload skill → magazine-editorial.zip