The reading order
How it structures longform content
The page opens the way a documentary opens: a wide, quiet establishing shot with one line of text on top. You know the subject and the mood before you read a single paragraph of body copy.
The build is simple and repeatable. A full-bleed photo fills the viewport. A short, bold headline sits low and centred over a dark scrim. Then the frame narrows hard into a single reading column of roughly 540 to 560 pixels, and the tone shifts from cinema to newspaper. Body text is set in Roboto at about 20px with generous 1.7 leading, so the measure stays calm and unhurried.
From there the article moves in a steady cadence: photo, text, photo, text. Full-bleed images break the column at regular intervals, each one edge-to-edge and each one given room to breathe. Seven of the roughly thirty-two images in the piece run full width, so the reader keeps returning to the landscape between passages of reading.
Hierarchy devices, in order of loudness
The loudest voice is photography. The second loudest is the Archivo headline set — heavy, tight, and used sparingly for section breaks. Below that sit the light Archivo 300 pull-quotes — the same display family as the headlines, dropped to a whisper — which lift a single sentence out of the flow without shouting. The quietest layer is the caption: small, grey, factual. Colour is reserved almost entirely for one accent — the UNSW yellow — so it always reads as a deliberate signal, never decoration.
The photography does the feeling. The column does the thinking. The yellow flag does the branding. Nothing competes for the same job.
The signature, in one line
Two screens, one voice
Desktop vs mobile
The system holds its character at both sizes because the rules are proportional, not fixed. The hero headline shrinks, the reading measure tightens, and the photos go edge-to-edge — but the photo/text/photo rhythm and the single yellow accent never change. Here are the measured values.
| Element | Desktop | Mobile (390) |
|---|---|---|
| Hero H1 | 63px / weight 400, white, centred | ~30px, white, centred |
| Section H2 | 48px / 700, near-black | scales down fluidly |
| Body | ~20px / 34 (1.7), #333 | 17px / 28.9 (1.7), #333 |
| Pull-quote | 22px / weight 300, #333 | reflows, same weight |
| Measure | ~540px column (~55 CPL) | 340px (~40 CPL) |
| Photos | 7 full-bleed of 32 | edge-to-edge |
| Document | ~42,500px tall, 137 paragraphs | same content, reflowed |
The parts list
The design system
Two type families, one accent colour, and a fixed set of devices. The restraint is the point — every element earns its place because there are so few of them.
Type pairing & scale
Display is a humanist sans in the Clancy family; this homage stands in with Archivo, and leans on its weight range rather than a second face — regular 400 for the big hero headline, 700 for the section heads, 800 for the wordmark, and a light 300 for the pull-quotes. Body is Roboto, set at 20px on the reading column with 1.7 leading. The pairing is deliberately unfussy — a strong sans over a neutral sans keeps attention on the images and the reporting.
Palette
Measure & leading
540–560pxReading column at ~55 characters per line, Roboto 20px on 1.7 leading. Mobile tightens to a 340px measure, ~40 CPL.
Signature devices
The yellow angular flag top-left, the black search square, full-bleed photo interludes, and light Archivo 300 pull-quotes. Four devices, used consistently.
Accent discipline
1 colourYellow is the only chromatic accent. Everything else is black, white, and grey, so the accent always means something.
Take these home
What to steal
-
Split the two jobs of a story.
Let full-bleed imagery carry emotion and a narrow column carry the reading. When they stop competing, both get better.
-
Set a cadence and hold it.
Photo, text, photo. A predictable rhythm lets a very long document — here, 42,500px and 137 paragraphs — feel paced instead of endless.
-
Ration your accent colour.
One yellow, everywhere else neutral. A single accent reads as a signal; three accents read as noise.
-
Keep the measure honest.
~540px on desktop, ~340px on mobile, both at 1.7 leading. Comfortable line length does more for readability than any font choice.
-
Give the brand one sharp gesture.
The angular yellow flag is the whole identity in one shape. A single confident device beats a busy header every time.
