Editorial Magazine

# Editorial Magazine Page

Create a sophisticated publishing layout with typography-heavy design, asymmetric grids, and classic editorial aesthetics for long-form content.

## Design Specifications

**Style**: Editorial / Magazine / Publishing
**Typography**: Serif headlines, clean body text, decorative drop caps
**Layout**: Asymmetric multi-column grids, pull quotes
**Colors**: Black and white with single accent color

## Prompt for AI Code Generation

```
Build an editorial magazine page with these characteristics:

LAYOUT:
- Asymmetric multi-column grids (7/5, 8/4 splits)
- Full-bleed hero images
- Sidebar for related content
- Pull quotes breaking the grid

TYPOGRAPHY:
- Headlines: 48-72px, serif (like Playfair Display, Georgia)
- Drop cap: 72px+ floated first letter
- Body: 18px, 1.7 line-height, optimal reading width (65-75ch)
- Captions: 12px, uppercase tracking
- Pull quotes: 32-40px, italic serif

COLORS:
- Background: #ffffff
- Text: #000000 (headlines), #404040 (body)
- Accent: #dc2626 (red for category tags, pull quote borders)
- Neutral: #f5f5f5 (sidebar backgrounds)

EDITORIAL ELEMENTS:
- Category tags with border
- Author bylines with avatar
- Read time indicators
- Newsletter signup in sidebar
- Related articles grid
- Sticky sidebar on scroll

INTERACTIONS:
- Subtle hover on article cards
- Underlines on navigation items
- Smooth scroll anchors

SECTIONS TO INCLUDE:
1. Navigation with magazine name and sections
2. Hero article with large image and headline
3. Lead paragraph with drop cap
4. Multi-column article body with sidebar
5. Pull quote with attribution
6. Related articles section
7. Footer with multi-column layout

TECHNICAL:
- Use CSS Grid for asymmetric layouts
- Sticky positioning for sidebar
- Proper semantic HTML (article, aside, blockquote)
- Responsive: single column on mobile
```

## Example React Component Structure

```tsx
export default function EditorialMagazine() {
  return (
    <div className="min-h-screen w-full bg-white text-black">
      {/* Navigation */}
      <nav className="border-b border-black py-6">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6">
          <div className="font-serif text-2xl font-bold">APERTURE</div>
          <div className="flex gap-8 text-sm font-medium">
            <span>Culture</span>
            <span>Design</span>
            <span>Architecture</span>
          </div>
        </div>
      </nav>

      {/* Hero */}
      <section className="border-b border-black">
        <div className="mx-auto grid max-w-7xl md:grid-cols-12">
          <div className="aspect-[4/3] bg-neutral-100 md:col-span-7" />
          <div className="flex flex-col justify-center p-12 md:col-span-5">
            <span className="mb-4 w-fit border border-red-600 px-3 py-1 text-xs tracking-widest text-red-600 uppercase">
              Featured Essay
            </span>
            <h1 className="font-serif text-5xl leading-tight font-bold">
              The Architecture of Silence
            </h1>
          </div>
        </div>
      </section>

      {/* Article */}
      <article className="py-16">
        <div className="mx-auto grid max-w-7xl gap-12 px-6 md:grid-cols-12">
          <div className="md:col-span-8">
            <p className="font-serif text-2xl">
              <span className="float-left mr-3 text-7xl leading-none font-bold">T</span>
              he Japanese concept of ma—the pregnant emptiness between things...
            </p>

            {/* Pull Quote */}
            <blockquote className="my-12 border-l-4 border-red-600 py-4 pl-8">
              <p className="font-serif text-3xl italic">
                &ldquo;Architecture should be like a good host.&rdquo;
              </p>
            </blockquote>
          </div>

          <aside className="md:col-span-4">
            <div className="sticky top-8 border border-black p-6">
              <h3 className="mb-4 text-xs tracking-widest uppercase">Key Projects</h3>
            </div>
          </aside>
        </div>
      </article>
    </div>
  );
}
```

## CSS Variables

```css
:root {
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Serif Pro', Georgia, serif;
  --color-accent: #dc2626;
  --color-text: #000000;
  --color-text-body: #404040;
  --line-height-body: 1.7;
  --max-width-reading: 65ch;
}

.drop-cap::first-letter {
  float: left;
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 700;
  margin-right: 0.75rem;
  font-family: var(--font-serif);
}
```

## Key Principles

1. **Typography is king**: The typeface choices define the aesthetic
2. **Asymmetric grids**: Break from boring 50/50 splits
3. **Generous reading**: Wide line-height, optimal column width
4. **Pull quotes**: Break up long text with visual anchors
5. **Hierarchy through scale**: Dramatic size differences