Editorial Design

Editorial Design is a design-style child skill ('the digital magazine - sophisticated typography pairings and deliberate, elegant pacing'), part of the design-it family and not meant to be triggered directly. Three core principles: Serif & Sans-Serif Pairing (the hallmark of the style - a beautiful, high-contrast serif for headings paired with a clean sans-serif for body copy), Large Drop Caps & Pull Quotes (typographic flourishes that guide the eye and break up long text blocks), and Columnar Layouts (content flows in distinct columns, often separated by fine hairline rules).

Use it when the user's request matches a sophisticated, magazine-like reading aesthetic - long-form articles, blogs, or content-heavy pages that want an elegant, print-inspired feel rather than a generic web-app layout. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA uses Modern Editorial or Yacht Club palettes - warm, paper-like backgrounds with deep, ink-like blacks or navy blues - with headline fonts drawn from Playfair Display, Merriweather, or Bodoni, body fonts from Lato, Open Sans, or Source Sans Pro, and thin elegant hairline rules separating sections. The web implementation pairs a large, bold, italic serif headline with a bottom border rule, body copy set in two magazine-style CSS columns (column-count: 2; column-gap: 40px) at generous 1.8 line-height, an oversized floated first-letter drop cap styled in the headline serif and colored with the CTA accent, and a centered pull-quote framed by top and bottom rule lines.

.editorial-body {
  column-count: 2;
  column-gap: 40px;
}
.editorial-body::first-letter {
  font-size: 4rem;
  float: left;
  color: var(--cta-highlight);
}

SwiftUI reproduces the same typographic hierarchy manually since it has no native ::first-letter selector: an HStack splits the drop-cap character out as its own oversized, colored Text view with negative top padding to pull the body text tighter against it, alongside a custom Playfair Display headline and Lato body copy with generous line spacing - achieving the same serif/sans-serif pairing and drop-cap effect through manual composition rather than a CSS pseudo-element.

Designers and developers building long-form content pages - articles, blogs, editorial features - who want a sophisticated, print-magazine reading experience with deliberate typography pacing instead of a flat, generic web-app text layout - the same discipline that makes a printed magazine feel considered rather than dumped onto the page.