# Penguin — Lit in Colour

- Source: https://litincolour.penguin.co.uk/
- Captured: 2026-07-11
- Publisher: Penguin
- Content archetype: interactive research report and public-interest campaign
- Responsive class: **recomposed** — desktop split infographics and fixed scenes become ordered vertical chapters, with an off-canvas navigation model on mobile.

## Evidence key

- **Observed** records what was visible in the captured page or inspectable DOM/CSS.
- **Inference** is a design interpretation or transferable lesson, not a claim about the publisher's intent.

## First impression

**Observed.** Lit in Colour opens like a campaign poster rather than a conventional report: a black institutional header, saturated yellow field, orange inclusive-display title, read-time/year metadata, and a playful stack-of-books illustration. Scrolling reveals an authored sequence of quotes, evidence, barriers, diagrams, and recommendations on green, purple, yellow, black, and warm-white stages.

**Inference.** The page makes research emotionally legible without stripping away its structure. It is the most ambitious example here for turning a multi-audience report into a memorable public narrative.

## Content anatomy

1. Penguin identity and section navigation for About Lit in Colour, Barriers, and Recommendations.
2. Campaign hero with title, subtitle, ten-minute read estimate, year, and book illustration.
3. Bernardine Evaristo quote and an introduction to the initiative/research approach.
4. Statistics and “Why does this matter?” framing.
5. A visual account of how texts enter classrooms and where decisions are made.
6. Barrier chapters covering confidence discussing race, the canon, time/budget/resources, teacher demographics, and finding suitable books.
7. Recommendation chapters directed at different actors in the education ecosystem.
8. Teaching resources, Penguin's own commitments, credits, and footer material.

**Inference.** The report progresses from purpose → evidence → system → barriers → action. That causal order prevents the recommendations from feeling detached from the research.

## Desktop presentation

- **Observed.** At 1440 px, a black sticky header about 80 px tall keeps the Penguin mark and three named report anchors visible. The active section changes to orange.
- **Observed.** The hero uses a large centered title at roughly 68/68 px with book illustrations framing the composition.
- **Observed.** Body chapters alternate between centered text, split-screen evidence, quote panels, and oversized infographics. A live mid-page inspection showed an “82%” graphic beside prose with a yellow quotation panel below.
- **Observed.** Some prose columns are approximately 600 px wide even when the background and decorative scene span the viewport.
- **Observed.** The captured body view shows the Barrier anchor active while a centered canonical-text statement sits on a green field, with book-stack illustrations acting as edge punctuation.
- **Inference.** The sticky named anchors work as a lightweight report map. The page can be visually exuberant because its highest-level structure remains stable.

## Mobile adaptation

- **Observed.** At 390 px, the header compresses to about 50 px with Penguin mark and hamburger control. The report navigation is positioned as an off-canvas panel rather than squeezed into the header.
- **Observed.** The H1 drops to about 28/31 px and centers above the illustration. Read time and year remain visible in the opening viewport.
- **Observed.** Body copy uses roughly 25 px side gutters, 16/27 px type, and a single column. Desktop evidence/prose splits become vertical sequences.
- **Observed.** Live viewport inspection showed the desktop 82% infographic/prose relationship turning into stacked purple and yellow scenes on mobile.
- **Observed.** Decorative objects are cropped or moved to the edges, while the evidence sentence remains the dominant mobile object.
- **Inference.** Mobile is treated as an editorial rewrite: scenes preserve meaning and order even when their spatial metaphor changes.

## Typography and reading rhythm

- **Observed.** Penguin Inclusive Sans Display is used for the expressive H1; Penguin Inclusive Sans carries headings; Avenir W05 carries the report body.
- **Observed.** Desktop body copy is about 18/31 px and light in weight. Mobile moves to approximately 16/27 px. Major section headings reduce from roughly 29/35 px to 24/29 px.
- **Observed.** Short paragraphs, large statistics, quotations, illustrations, and background changes interrupt the report into discrete reading beats.
- **Inference.** The rhythm is closer to an exhibition than a white paper. A reusable design system should encode evidence, quotation, explanation, and action as distinct typographic components.

## Color and imagery

- **Observed.** The system combines orange (`rgb(254, 89, 23)`), yellow (`rgb(250, 188, 47)`), green (`rgb(156, 195, 94)`), purple, black, and a warm near-white/blush.
- **Observed.** Book stacks, people, classroom objects, and diagrammatic shapes create a consistent illustrated world. Statistics and quotes are integrated into that world rather than dropped into generic cards.
- **Observed.** Color fields correspond to narrative modes and chapters; active navigation repeats the orange accent.
- **Inference.** The transferable lesson is a small semantic palette and one coherent illustration grammar—not maximal color variety.

## Motion, navigation, sharing, and related material

- **Observed.** The page uses scrollmation, fixed/sticky backgrounds, object movement, and staged reveals. Dozens of elements exposed transition or animation behavior during inspection.
- **Observed.** A `prefers-reduced-motion` rule was detectable in the inspected stylesheets, a positive foundation for an animation-heavy report.
- **Observed.** Desktop section anchors remain visible and indicate the active report phase. Mobile uses an off-canvas menu. A percentage progress bar was not visible.
- **Observed.** Recommendations and teaching resources are part of the authored report arc rather than an unrelated card rail.
- **Inference.** Section-state navigation is particularly valuable when a narrative has three macro-phases but many micro-scenes.

## Accessibility and performance

- **Observed.** Many scene and illustration images exposed descriptive alternative text, the page has strong heading scale, and the measured stylesheet includes reduced-motion handling.
- **Observed.** Some link labels use generic wording such as “Click here,” which is less useful when links are encountered out of context.
- **Observed.** The Penguin logo image was initially withheld behind a performance-cookie category: before consent, the browser displayed broken-image fallback text; after “Accept All Cookies,” its real `src` loaded. This makes a core identity asset unnecessarily consent-dependent in the inspected implementation.
- **Observed.** The page is approximately 32,000 px deep on desktop and 38,000 px on mobile, with many fixed scenes, illustrated objects, and animated states. No numeric transfer-size or Core Web Vitals measurement was taken.
- **Inference.** Core branding, navigation, text, and representative scene frames should never depend on nonessential consent. Motion layers should be enhancements over a complete, light, linear document.

## Transferable patterns

1. **Research as causal narrative.** Move from purpose and evidence to barriers and actions.
2. **Three-level orientation.** Combine macro section anchors, strong scene titles, and distinct background modes.
3. **Evidence components.** Give statistics, quotes, diagrams, and recommendations their own reusable visual grammar.
4. **Responsive scene translation.** Recompose spatial comparisons into a meaningful vertical order on mobile.
5. **Semantic color fields.** Reuse a small palette to mark narrative mode, not just brand presence.
6. **Action inside the story.** Let recommendations and resources complete the argument rather than appear as a generic footer.

## What not to copy literally

- Do not reproduce Penguin's inclusive typefaces, orange/yellow/green/purple palette, book illustrations, or campaign composition.
- Do not make core logos or navigation assets dependent on analytics/performance cookie consent.
- Do not rely on a single active scroll state to carry essential facts; a static, printable, reduced-motion version must remain complete.
- Do not use generic “Click here” labels where the destination or action can be named.

## Implementation notes

- Define report chapters as semantic sections with a macro phase (`about`, `barriers`, `recommendations`) plus typed content blocks for prose, quote, statistic, diagram, and action.
- Render a complete document first. Layer scroll activation, fixed scenes, and transforms on top only after testing source order and no-script behavior.
- Drive desktop active-nav state with section observers and expose it with `aria-current="location"`; implement the mobile drawer as a real dialog/navigation disclosure with focus return and Escape support.
- Under `prefers-reduced-motion: reduce`, remove pinning and transforms, display representative images inline, and keep all labels visible.
- Keep essential identity assets first-party and consent-independent. Reserve dimensions and provide responsive sources for every illustration.
- Test long-session memory/CPU use, keyboard navigation, 200% zoom, print/PDF output, color independence, and screen-reader reading order.

## Evidence limits

- This is one technical/visual inspection, not a user study or performance benchmark; no completion, comprehension, conversion, or field-speed data was available.
- Full-page capture cannot preserve every scrollmation state. Its large white gaps reflect capture mechanics for fixed/activated scenes, not proof that the live article lacks content; hero/body captures and live viewport inspections are the detail evidence.

## Visual references

- [Desktop hero](../assets/references/06-penguin-lit-in-colour/desktop-hero.png)
- [Desktop full-page pacing strip](../assets/references/06-penguin-lit-in-colour/desktop-full.png)
- [Desktop body detail](../assets/references/06-penguin-lit-in-colour/desktop-body.png)
- [Mobile hero](../assets/references/06-penguin-lit-in-colour/mobile-hero.png)
- [Mobile full-page pacing strip](../assets/references/06-penguin-lit-in-colour/mobile-full.png)
- [Mobile body detail](../assets/references/06-penguin-lit-in-colour/mobile-body.png)