Calm Editorial Design

---
name: calm-editorial-design
description: Designs clean, magazine-style interfaces with warm neutrals, strong typography, and lots of breathing room. Good for blogs, portfolios, and content sites.
---

# Calm Editorial Design

Use this when the user wants a minimal, editorial, or "magazine" look: content first, no
visual noise.

## The style

- **Palette:** warm off-white background (like #FAF8F5), near-black text (#1C1B19), one or two
  muted accent colors (sage, clay, dusty blue). No pure black on pure white, no neon.
- **Type:** a characterful serif for headlines, a clean sans or serif for body text. Large
  headlines, generous line height, and narrow text columns (55–70 characters).
- **Grid:** a simple 12-column grid with wide margins. Mix full-width images with narrow
  text columns. Bento-style tiles are fine if they're flat (no shadows), separated by thin
  lines or space.
- **Details:** thin 1px rules, small uppercase labels with wide letter-spacing, real
  photography, captions in a smaller muted style.
- **Restraint:** one accent per screen, no gradients, no heavy shadows, rounded corners small
  or none.

## Steps

1. Ask what the content is (articles, projects, products) and who reads it.
2. Set the design tokens first: colors, type scale, spacing scale, and max text width.
3. Build the main page from the content outward: headline, intro, then content blocks.
4. Use placeholder images only from the user's own assets or clearly marked placeholders.
5. Check at phone width: margins at least 16–20px, headlines scale down, nothing overflows.

## Output

The tokens, then the code, then a short note on how to keep new pages consistent with it.