Layout-driven · 2012–present
Long Scroll
A single page that uses vertical scroll as its primary navigation structure — each section unfolds like a chapter, paced for reading.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(100% 0 0) - --fg
oklch(10% 0 0) - --muted
oklch(52% 0 0) - --surface
oklch(100% 0 0) - --surface-2
oklch(97% 0 0) - --border
oklch(90% 0 0) - --accent
oklch(55% 0.2 258) - --accent-fg
oklch(100% 0 0) - --focus
oklch(55% 0.2 258)
| Token | Value |
|---|---|
| --font-body | 'Lora', Georgia, serif |
| --font-display | 'Lora', Georgia, serif |
| --font-mono | 'Inter', ui-monospace, sans-serif |
| --radius | 4px |
| --radius-sm | 3px |
| --shadow | 0 2px 12px oklch(0% 0 0 / 0.06) |
| --shadow-lg | 0 20px 60px oklch(0% 0 0 / 0.1) |
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@400;500;600&display=swap');
:root {
--bg: oklch(100% 0 0);
--fg: oklch(10% 0 0);
--muted: oklch(52% 0 0);
--surface: oklch(100% 0 0);
--surface-2: oklch(97% 0 0);
--border: oklch(90% 0 0);
--accent: oklch(55% 0.2 258);
--accent-fg: oklch(100% 0 0);
--focus: oklch(55% 0.2 258);
--font-body: 'Lora', Georgia, serif;
--font-display: 'Lora', Georgia, serif;
--font-mono: 'Inter', ui-monospace, sans-serif;
--radius: 4px;
--radius-sm: 3px;
--shadow: 0 2px 12px oklch(0% 0 0 / 0.06);
--shadow-lg: 0 20px 60px oklch(0% 0 0 / 0.1);
}Where it came from
Origin: Apple product pages; scrollytelling journalism experiments
Long-scroll design uses the scroll gesture as a narrative device. Apple's product launch pages helped make it mainstream in the early-to-mid 2010s, with large type and imagery timed to scroll depth. Medium popularised it for editorial. The pattern works best when content has a natural sequence — a product argument, a story, a process — rather than a set of co-equal sections that users might want to reach in any order.
How to spot it
- Generous vertical whitespace pacing the reader between ideas
- Section transitions that feel like chapter breaks — strong contrast between sections
- Typography and imagery scaled for comfortable reading at scroll speed
- Optional anchor navigation or a scroll-progress indicator
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Tells a clear story in a controlled sequence | Hard to navigate non-sequentially — users cannot jump to page 3 |
| Works naturally for mobile-first without complex navigation structures | Very long pages increase page weight and risk Cumulative Layout Shift |
| Scroll-triggered reveals can create immersive narrative moments | Users may not scroll far enough to reach content in the lower half |
In the wild
- Apple product launch pages
- Medium editorial long-form features
- Startup launch and brand story pages
Use it when
Narrative-first content — product launches, case studies, brand stories — where a single sequential reading experience is the goal.