editorial-design

Editorial Design

"The digital magazine. Sophisticated typography pairings and deliberate, elegant pacing."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Serif & Sans-Serif Pairing: The hallmark of editorial design. A beautiful, high-contrast serif for headings, paired with a clean sans-serif for body copy.
2. Large Drop Caps & Pull Quotes: Typographic flourishes that guide the eye and break up long blocks of text.
3. Columnar Layouts: Content flows in distinct columns, often with fine lines (rules) separating them.

Visual DNA

• Colors: Modern Editorial or Yacht Club. Warm, paper-like backgrounds with deep, ink-like blacks or navy blues.
• Typography:
• Headlines: Playfair Display, Merriweather, Bodoni.
• Body: Lato, Open Sans, Source Sans Pro.
• Borders: Thin, elegant horizontal lines (hairlines) used to separate sections.

Web Implementation

• CSS Example:

body {
  background-color: #F9F9F9; /* Paper white */
  color: #121212; /* Ink black */
}

/* Typography Pairing */
.editorial-headline {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 24px;
  border-bottom: 1px so