# Lit in Colour — Longform Design Study (No. 06)

## Overview

Lit in Colour is Penguin's mission microsite for a more representative English
curriculum. It is a publisher campaign page with real personality: saturated,
full-width colour blocks stacked down the page, a bold geometric display sans for
headings, and a light humanist sans for body copy set in one narrow, centred
column. Colour and illustration carry the emotion; the body text stays quiet and
easy to read. The page is long (the document measures roughly 30,500px tall) but
never feels busy, because every scene shares the same centre line and the same
type system.

Genre: publisher mission / campaign microsite (editorial with personality).
Source: https://litincolour.penguin.co.uk/

## How it structures longform content

- **Reading order is a stack of colour scenes.** Rather than one continuous
  column on white, each idea is a full-width block in a different saturated
  colour (mustard hero, then aubergine, book green, warm orange, cream). The
  change of ground signals a new beat — colour replaces the horizontal rule.
- **Single centred axis.** Title, deck, reading time, body copy and illustration
  all sit on the centre line in a ~540px measure. Nothing breaks to a sidebar.
- **Hierarchy device is type contrast, not size alone.** A bold geometric
  display face announces each section; a light low-contrast body face carries the
  argument. The display voice shouts, the body whispers.
- **Imagery strategy is flat illustration, not photography.** Hand-drawn figures
  and book stacks in the palette colours bleed to block edges. Because they are
  drawn, they stay on-brand across every colour scene.
- **Meta is explicit and friendly.** A "10 minute read" badge and a "2021" year
  sit under the hero title, setting expectation before the scroll.

## Desktop treatment

- H1 "Lit in Colour" in Inclusive Sans Display, 61px / 700, centred, near-black
  ink on the mustard hero.
- Subtitle / deck below the H1, plus the meta line: "10 minute read" and "2021".
- H2 section headings 35px, white on the darker colour blocks.
- Body Avenir 18px with 30.6px leading (ratio ~1.7), light weight, colour #333.
- Measure ~540px, about 60 characters per line.
- 16 full-bleed / edge-to-edge images (illustrations) across the page.
- Slim black top nav: Penguin wordmark left, section links right.
- Hero illustrations flank the centred title (climber-on-books left, book stack
  right).

## Mobile treatment

- Viewport 390px. Body drops to 16px with ~27px leading (ratio ~1.68).
- H1 steps down to 28px, still centred and bold.
- Measure narrows to ~306px, about 38 characters per line.
- Colour blocks remain full-width and centred — the layout is not re-architected,
  just scaled.
- Hero illustrations restack into one centred column below the text.
- Nav collapses to a hamburger; brand mark stays top-left.

## Design system

Type
- Display: Penguin Inclusive Sans Display, bold geometric sans (homage stand-in:
  Poppins 700).
- Body: Avenir, light humanist sans (homage stand-in: Nunito Sans 300).
- Scale (desktop): H1 61px / H2 35px / body 18px, all centred.
- Leading: ~1.7 body, ~1.1 display.

Colour tokens
- Mustard `#9C7A12` — hero ground, ink text.
- Aubergine `#5B2A5B` — dark block, white text.
- Book green `#2E7D4F` — dark block, white text.
- Warm orange `#E0662A` — bright block, ink text (white body fails 4.5:1 here).
- Cream `#F7F0EC` — light block, ink text.
- Ink `#141414` — nav and text.

Layout tokens
- Measure: ~540–560px, one centred column.
- Sections: full-width colour blocks, alternating hues, centred content.
- Nav: slim black bar, sticky.

## Signature techniques

- **Colour-blocked scenes** as the primary structural and emotional device.
- **Loud display / quiet body** type split — feeling in the headline, argument in
  the paragraph.
- **One centre line** for the entire page keeps a loud palette feeling composed.
- **Hand-drawn flat illustration** in the palette, bleeding to block edges.
- **Generous, consistent leading (~1.7)** that lets a light body weight survive
  on strong colour grounds.

## What to steal

1. Let a full-width colour change be your section break — drop the dividers.
2. Split the labour of type: bold display for emotion, light body for reading.
3. Commit to a single centred column so a colourful page reads as intentional.
4. Draw rather than photograph so imagery travels across every colour scene.
5. Keep body leading near 1.7 on saturated grounds or light text collapses.

## Visual references

- Desktop: ../assets/screenshots/06-penguin-desktop.jpeg
- Mobile: ../assets/screenshots/06-penguin-mobile.jpeg

## Source URL

https://litincolour.penguin.co.uk/