Skip to content

PatternsPage patternsCase study

Case study

A long-form case study. The page that does the most work on the site.

9 sectionsMax canvas 90 remProse column 42 rem

Anatomy

  1. Hero. Eyebrow, title, lede, meta row (year, role, duration, stack), 1 hero image.
  2. Context. 2-3 paragraphs of plain prose. Sets up the problem.
  3. Hero figure. The screenshot or diagram that anchors the case study.
  4. Body sections. 4-6 sections, each with a H2, 2-4 paragraphs, and a figure or diagram.
  5. Metrics. The 2 × 2 StudyMetrics block, near the end of the case study.
  6. Reflection. 2-3 paragraphs of what worked and what didn't.
  7. Next. A "Next case study" link.

Rules of thumb

  • The hero figure is the most important image on the page. It must work at 360 px wide.
  • The body column is 42 rem on desktop; 100% on mobile. Don't let figures exceed the column.
  • Every section ends with either a figure, a diagram, or a quote — never just text.
  • The metrics block is the only place numbers appear. Don't scatter numbers throughout the body.

The skeleton

case-study/page.tsx
<CaseStudyHero
  eyebrow="Cognitive distance · 2026"
  title="How users experience a routine transfer"
  lede="A field study of the cognitive distance between design intent and user reality, in 4 everyday services."
  meta={[{ label: "Year" }, { label: "Role" }, { label: "Duration" }, { label: "Stack" }]}
/>

<CaseStudySection id="context" title="Context">
  <Prose>...</Prose>
</CaseStudySection>

<CaseStudyFigure chrome="browser" src="..." title="..." caption="..." />

<CaseStudySection id="approach" title="Approach">
  <Prose>...</Prose>
  <StudyDiagram ... />
</CaseStudySection>

<StudyMetrics metrics={[...]} caption="..." />

<CaseStudySection id="reflection" title="Reflection">
  <Prose>...</Prose>
</CaseStudySection>

A worked example

The Everyday Services Study is the canonical case study. The Rádio Alvorada trilogy and the Smartforms case study use the same skeleton with a different hero metric and a different number of body sections.

What not to do