Scroll down. Each chapter block is intentionally tall (CSS min-height + long
copy) so you can see the bar stick and the active tab follow. Click a tab to jump.
Harbour & Co. asked for a single brand system that could stretch from investor decks to product UI without feeling corporate. We started by mapping every touchpoint where a user might encounter the brand in the first ninety days — onboarding email, mobile app shell, help centre, and printed welcome kit.
The constraint was speed: marketing needed to ship campaigns weekly while product ran a two-week sprint cadence. That tension became the brief — not “make everything match,” but “make every surface feel like the same company even when the teams don’t ship together.”
This demo page is padded with copy on purpose. Real case studies run even longer; the scroll-spy pattern exists so readers don’t lose context when a page is ten or twenty screen-heights deep.
The observer uses a negative vertical rootMargin so the active chapter switches when a section
crosses the middle band of the viewport — tweak the values in JS if your sticky header height differs.
We framed success in three measurable outcomes: time-to-first-value in the app, support ticket volume tied to “where do I find…”, and brand recall in unaided surveys after thirty days. Anything that didn’t connect to one of those was out of scope for v1.
Workshops surfaced a split between teams who wanted a bold photographic language and teams who needed dense tables and documentation. Rather than picking a winner, we defined a shared rhythm — typographic scale, spacing, and corner radius — and let photography and data live in the same grid.
Sticky chapter navigation pays off here: stakeholders jump between “strategy” and “constraints” without hunting the scrollbar. Keep scrolling — the tab for this block should stay highlighted until you reach the next chapter.
Anchor links use the section id attributes; the same ids power the data-chapter
mapping in the script.
Exploration moved from moodboards into coded prototypes early. We built a thin design-token layer (colour, type, spacing) and applied it to two parallel concepts — a soft editorial look and a sharper product look — before merging the strongest parts.
Motion was kept functional: page transitions under three hundred milliseconds, no autoplaying video in
critical paths, and reduced-motion variants for every animated pattern. The sticky nav you’re watching is
pure CSS position: sticky; the active underline is driven by IntersectionObserver.
If you resize the window, the chapter links wrap; the behaviour should remain usable on small screens. Scroll until “Create” is no longer active and “Commit” takes over — that’s the spy hand-off.
Launch included a phased rollout: internal tools first, then public marketing, then in-app surfaces. Each phase had a rollback plan and a single owner. Documentation lived next to the Figma libraries so “what shipped” and “what designers use” couldn’t drift silently.
Handoff meant engineers could implement new screens from tokens without opening a brand PDF. That was the commit we cared about — not pixel-perfect static comps, but a system that stayed honest after launch week.
On long pages, scroll spy reduces disorientation: you always know which chapter you’re in relative to the whole story. That’s why this demo is verbose.
Six months later, campaign creative still looked “on brand” without central approval for every asset. The different reality was operational: fewer one-off exceptions, more reuse, and a shared vocabulary between product and marketing.
What we’d adjust next time is earlier analytics wiring — we measured lagging indicators well but could have caught friction in the help centre sooner with better event naming up front.
You’ve reached the final section. If the last tab activated as you entered this block, the demo did its job.
Implementation: scroll-spy-chapter-nav.js · Section height: min-height: min(78vh, 38rem)
in CSS so short viewports still scroll.