Article layout

The long-form page for case studies and About (Figma 93:731): header, hero, facts, body and end links. A full page, so see it live.

Live: Governance case study (device hero, Happeo accent) · About (portrait hero, site orange).

Anatomy

1. Header: black title and Light lead on the left; badges on the right (date first, then client, then reading time), above the title on mobile.
2. Hero, one of:
   • screen: the product in a CSS-drawn device on the accent band. The whole hero keeps fixed proportions and scales with the width; the band's bottom edge crops the device. From 640 Figma's band 1312 × 448 with the device 69% wide; below 640 a taller band (994 × 527) and a bigger device (91%).
   • photo: a portrait standing on a smaller band beside the facts (facts in columns 1–2, portrait 3–6 from 1024; stacked below).
3. Facts: three items (e.g. Team · My role · Timeline), each a label and two or three short lines.
4. Body: KeyFigures → ChapterNav → StoryScroll → Reflection, or plain text with Testimonial bands. Text sits in the reading column (--article-column); bands break out to full width.
5. End: back link left, next case study right, on the page margins.

Any img[data-zoom] in the article opens full-size in the lightbox.

Accent

accent replaces the site orange with the client's brand colour for everything in the article (--color-accent); band sets the hero, key-figures, quote and reflection band (--article-band).

Props

Tokens