Magazine Case-Study Portfolio

---
title: "Magazine Case-Study Portfolio"
slug: portfolio-case-study-magazine
bestFor: "Designers, art directors, writers, and researchers presenting deep work"
aestheticFamily: "Magazine / Editorial-long-form"
description: "A long-form, editorial portfolio that treats each project like a feature story — pull quotes, asymmetric layouts, intentional whitespace, real captions."
---

# DESIGN.md — Magazine Case-Study Portfolio

## Brand essence
Each case study reads like a long-form magazine feature: a headline that argues something, a deck that frames it, image-driven storytelling, and the writer's voice carrying the structure. The reader should feel like they're reading a published piece, not scrolling a Behance grid.

## Color palette
- `--paper`: `#F1ECE2` — base page (warm newsprint)
- `--paper-cool`: `#E8E5DE` — alternate section background
- `--ink`: `#161513` — primary text
- `--ink-mid`: `#5C5752` — captions, dek, metadata
- `--rule`: `#221F1B` — hairlines, hard rules
- `--accent`: `#1F3A8A` — single editorial blue (links, pull-quote marks)
- `--accent-soft`: `#D8DEEE` — light blue for highlight blocks (rare)

No greens. No warm accents. The blue is the only chromatic note, doing the work that an art director's red or blue would do in print.

## Typography
- **Display serif**: a high-contrast didone (e.g., GT Super Display, Canela, Domaine Display). Weights: 300, 700.
- **Body serif**: a transitional serif (e.g., Tiempos Text, Source Serif). 18px, weight 400.
- **Sans utility**: a neutral grotesque (e.g., Söhne, Inter) for nav, captions, and metadata. Used in caption (12px) and small UI sizes only.

Type scale:
- Headline (H1 / cover): 96 / 96, weight 700, letter-spacing -0.03em
- Section heading (H2): 44 / 50, weight 300, italic
- Subhead (H3): 26 / 32, weight 700
- Dek (subtitle under headline): 28 / 36, weight 300, serif italic
- Body: 19 / 32
- Pull quote: 36 / 44, weight 300, italic, `--accent` color
- Caption: 13 / 18, sans, uppercase, letter-spacing 0.08em, `--ink-mid`

Hierarchy rules:
- Every case study opens with: kicker (sans caption uppercase, e.g., "BRAND IDENTITY · 2025"), then headline, then dek.
- Drop caps on the first paragraph after the dek (4-line drop, display serif 700).
- Pull quotes are oversized and break the column grid (extend left margin or full bleed).

## Spacing & layout
- Asymmetric 12-column grid at >=1024px. Body prose lives in columns 4–9 (6 cols, narrow measure ~640px). Images can fill 1–9, 4–12, or full bleed (1–13).
- Mobile: single column, 24px padding.
- Vertical rhythm 8px baseline. Section gap 120px between major case-study sections.
- Generous left margin used as a sidebar for marginalia (date, role, collaborator credits) in sans caption.
- 1px `--rule` hairlines separate sections on the index page.

## Component patterns
- **Index page**: vertical list, NOT a grid. Each entry: kicker, large serif headline, dek, then a single representative image. Hover: image enlarges 2%, headline gains underline in `--accent`.
- **Case-study cover**: full-bleed image (or color block in `--ink` if no image), oversized headline overlaid, deck below. Scroll indicator bottom-center in sans caption.
- **Body image**: full-bleed or column-aligned, with a sans caption beneath in `--ink-mid`. Captions are real ("Final identity system, applied across packaging, 2025"), never decorative.
- **Pull quote**: italic, 36px, `--accent` color, hangs into left margin with a large `--accent` opening quotation mark. Attribution below in sans caption.
- **Sidebar metadata block**: floats in left margin at desktop, stacks above content on mobile. Lists Role / Year / Team / Tools, each in sans caption with a 1px `--rule` divider above.
- **Buttons**: text only with `--accent` underline. The single exception: "View next project →" at the foot of each case study, set as serif italic 22px with an animated arrow on hover.
- **Navigation**: 56px top bar, wordmark left in display serif, 2 links right in sans caption uppercase. No mobile menu — links wrap.

## Motion
- Easing: `cubic-bezier(0.4, 0, 0.2, 1)` — natural, paper-like.
- Durations: 200ms for links/hovers, 800ms for image reveals on scroll.
- Image lazy-load: subtle blur-up from low-res placeholder.
- Pull-quote enters viewport: opacity 0 → 1, 600ms.
- No parallax. No scroll-jacking. Reading is the experience.

## Imagery / iconography
- Photography is the design. Hire or shoot real images at full resolution. Color-graded warm.
- No icons inside body content. Navigation arrows allowed (1px stroke, 16px).
- Charts/diagrams should be hand-styled or set in display serif labels — never default chart-library output.

## Voice & tone
Third-person past tense for case-study body ("The team faced…") with first-person interjections in quoted moments. Each case study has a thesis sentence in the dek — the rest of the piece argues it. Captions are factual. No marketing language.

## What to AVOID
- No grid-of-thumbnails portfolio index.
- No hero video on cover.
- No dark mode (this is a paper aesthetic).
- No emoji.
- No "Made in Webflow" badges or any third-party badges.
- No multi-color palette — one accent only.
- No animated cursors.
- No auto-playing carousels.