# Shorthand — Longform Design Study No. 05

## Overview

Shorthand's "5 excellent examples of longform content" is an immersive scrollytelling feature built on Shorthand's own publishing platform. The reading experience is a stack of full-viewport scenes rather than one long document. You move through it one screen at a time: a title lands on a colour field, the next scene drops into a quiet reading column, then a full-bleed field resets the eye before the next block of prose. Pacing and full-bleed colour do the structural work; the reading measure stays deliberately narrow.

- Genre: immersive scrollytelling feature (digital-magazine archetype).
- Personality: editorial, calm, confident. A light serif in deep green over broad colour fields, with one emerald accent.
- Source URL: https://shorthand.com/the-craft/longform-content-examples/index.html

## How it structures longform content

- **Scene stack, not a page.** The document is a sequence of full-viewport scenes (7 measured on desktop), each owning a single idea. The reader never sees two competing things at once.
- **Reading order set by scale and space.** Hierarchy comes from type size and whitespace, not boxes or rules. The display serif is large and centred so a section title reads as a chapter break; body copy sits in a narrow central column.
- **Three hierarchy devices.** (1) Colour fields signal a change of gear. (2) A centred light serif marks the start of a section. (3) Numbered lists with bold lead-in phrases make advice scannable without breaking the calm voice.
- **Imagery strategy.** Media is full-bleed, edge to edge (10 full-bleed fields measured). Text either sits beside the media or rides on top over a dark scrim, so the picture is the room and the words are the caption. Nothing floats in a sidebar.
- **Signature techniques.** Alternating full-screen coloured scenes; big centred light serif in deep green (white on dark scenes); sans body over fields; deep-green plus emerald accent throughout.

## Desktop treatment

- 7 full-viewport scenes; total document height approximately 30,500px.
- Display face PassengerSerif at weight 300 (light), centred. Hero title 56px; section titles 65px.
- Display colour deep green #03302B (or white on dark scenes).
- Body face CircularWeb at 20px, line-height 1.5. White over media on dark scenes; dark-on-light on light scenes.
- Roughly 10 full-bleed colour / media fields cycling the palette.
- Emerald CTA #0FA47F; dark near-black navigation bar with a pill CTA.
- Body copy held in a narrow ~640px centred column regardless of viewport width.

## Mobile treatment

- Captured at 390px width. Scenes go full-width; the vertical rhythm of the scene stack is preserved.
- Body copy approximately 19px with ~32px line-height (about 1.68).
- Titles scale down but stay centred.
- The illustration stacks above the title in the hero; the measure tightens toward full-width with side gutters rather than reflowing into a new layout.
- Navigation condenses to logo plus CTA; the secondary nav links and outline buttons drop out.

## Design system

### Type tokens
- Display / headings: Fraunces, weight 300, optical sizing on (stand-in for PassengerSerif). Centred, tight leading (~1.05), slight negative tracking.
- Body / UI: Manrope, weights 400 / 500 / 700 (stand-in for CircularWeb).
- Scale: section titles clamp(2.4rem, 6vw, 4rem); hero 56px desktop; body 20px desktop, 19px mobile.
- Measure & leading: reading column ~640px; body line-height 1.5 desktop, ~1.68 mobile.
- Google Fonts link used in the homage: `https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400&family=Manrope:wght@400;500;700&display=swap`

### Colour tokens
- Brand green: `#03302B`
- Emerald CTA: `#0FA47F`
- Lilac scene: `#E6C9E8`
- Grey scene: `#EFEEEE`
- Plum scene: `#4A2C4D`
- Cream scene: `#F3EEDF`
- Near-black nav: `#0C0C0C`
- White text: `#FFFFFF`

### Layout tokens
- Full-viewport scenes: `min-height: 100svh` with `scroll-snap-align: start` on a `scroll-snap-type: y` container.
- Scene themes cycle the palette; each scene owns one background colour or media field.
- Scene types: (a) title scene — big centred light serif on a colour field; (b) text scene — centred narrow reading column; (c) text-over-media — a colour/gradient field with a scrim and text on top.
- Navigation: fixed dark bar, brand mark on the left, pill CTA in emerald on the right.

## Signature techniques

- Cinematic scroll journey: alternating full-screen coloured scenes where each scene is a beat and the story is the sequence.
- Big centred light serif in deep green as the recurring chapter marker.
- Sans body over colour fields; measure kept narrow so lines stay short even on wide screens.
- Deep green plus a single emerald accent tie nav, CTA and links together with no second decision.
- Numbered lists with bold lead-in phrases for skimmable advice inside a calm reading voice.

## What to steal

1. **Let colour do the pacing.** Give each section its own full-screen field and change the field to signal a change of idea. The reader feels the structure before reading a word.
2. **Keep the measure narrow on a wide screen.** Anchor body copy in a ~640px column no matter the monitor size. Short lines read faster and feel more considered.
3. **Pair a light serif with a geometric sans.** A 300-weight centred display serif reads as editorial and calm; a plain sans keeps the body neutral so the serif carries the personality.
4. **Use one accent, everywhere.** A single emerald against deep green ties nav, CTA and links together without a second decision.
5. **Make lists do the heavy lifting.** Numbered items with bold lead-in phrases turn dense advice into something skimmable without shouting.

## Visual references

- Desktop hero: ../assets/screenshots/05-shorthand-desktop.jpeg
- Reading scene: ../assets/screenshots/05-shorthand-scene.jpeg
- Mobile (390px): ../assets/screenshots/05-shorthand-mobile.jpeg

## Source URL

https://shorthand.com/the-craft/longform-content-examples/index.html