Case Study

The detail page for a single project. Top hero overlays a title and meta on a full-bleed image. Narrative sections (problem, approach) sit at prose width. Outcome stats run as a row of .stat blocks (extras). A horizontal .reel of supplementary photos closes the page. One page, one project, top to bottom — the shape an agency uses when a portfolio tile gets clicked.

Core: .flow, .cluster, .grid, .center, .frame, .reel, .divider, .badge

Extras: .stat

Custom CSS

Two demo treatments: the hero scrim (gradient overlay on the background image so the title text reads against any photo) and a fixed inline-size on the reel's image frames so they keep their width as the strip scrolls horizontally.

<style>
    .demo-case-hero {
        background-image:
            linear-gradient(to bottom, oklch(0% 0 0 / 0.15), oklch(0% 0 0 / 0.75)),
            url("https://picsum.photos/seed/case-museum-hero/1600/900");
        background-size: cover;
        background-position: center;
        border-radius: var(--radius-md);
        min-block-size: 30rem;
        padding: var(--space-2xl) var(--space-lg);
        color: oklch(99% 0 0);
        display: grid;
        align-items: end;
    }

    .demo-case-strip-frame {
        inline-size: 18rem;
        border-radius: var(--radius-md);
        overflow: hidden;
    }
</style>

Full case study

The complete shape: hero, problem, approach, outcome stats, image strip. Sections are spaced by .flow.flow-space-2xl on the wrapper. Narrative sections use .center with a prose-width --center-max; the outcome section widens to fit four stats; the image reel and hero stay full-bleed.

Wayfinding Signage Print

Wayfinding for Fern Valley Museum

A complete wayfinding system for a regional museum's new wing — signage, print collateral, and the donor recognition wall, all grounded in the building's original 1962 vocabulary.

Fern Valley Museum · 2026

The problem

The new wing doubled the museum's footprint without an obvious connection between the two halves. Visitors got lost. Staff spent more time directing than docent-ing. Existing signage was a patchwork — three vendors over fifteen years, no system — and the new wing's modern volume only made the inconsistencies sharper.

The brief: a single wayfinding language that worked across both buildings, respected the original 1962 architecture, and could extend into print collateral and donor recognition without feeling like an afterthought.

Approach

We grounded the system in the building's own vocabulary. Mid-century materials — brass, polished concrete, oak — carry the physical signage. The typographic hierarchy borrows from the museum's original 1962 program guide, modernized for legibility at signage scale. A primary/secondary path logic follows how curators actually want visitors to move through the collection rather than the shortest route between rooms.

Print collateral (visitor maps, gallery brochures, the donor recognition wall) uses the same type stack and material logic. Anything that had to read at distance — gallery signs, directional arrows, room numbers — sits in the heaviest weight; secondary information drops into the lighter weight without changing typeface. One system, three contexts.

Outcome

Wayfinding-related staff interruptions −92% measured over the first quarter

Schedule 4 wk ahead of original plan

Sign types deployed 17 across two buildings

Donors recognized 2,400+ names typeset for the wall

In situ

Detail shots of the system in place — entrance, gallery directional, donor wall, brochure spread, brass room markers, and the typographic specimen used as a reference across all touchpoints.

Donor recognition wall, oak with engraved brass

<docs-resize>
    <div class="flow flow-space-2xl">

        <header class="demo-case-hero">
            <div class="flow flow-space-sm">
                <div class="cluster gap-2xs">
                    <span class="badge text--2">Wayfinding</span>
                    <span class="badge text--2">Signage</span>
                    <span class="badge text--2">Print</span>
                </div>
                <h1 class="text-5 leading-heading">Wayfinding for Fern Valley Museum</h1>
                <p class="text-1" style="opacity: 0.85">
                    A complete wayfinding system for a regional museum&#39;s new wing — signage, print collateral, and the donor recognition wall, all grounded in the building&#39;s original 1962 vocabulary.
                </p>
                <p class="text--1" style="opacity: 0.75">
                    Fern Valley Museum · 2026
                </p>
            </div>
        </header>

        <section class="center flow flow-space-md" style="--center-max: 40rem">
            <h2 class="text-3 leading-heading">The problem</h2>
            <p class="text-muted leading-body">
                The new wing doubled the museum&#39;s footprint without an obvious connection between the two halves. Visitors got lost. Staff spent more time directing than docent-ing. Existing signage was a patchwork — three vendors over fifteen years, no system — and the new wing&#39;s modern volume only made the inconsistencies sharper.
            </p>
            <p class="text-muted leading-body">
                The brief: a single wayfinding language that worked across both buildings, respected the original 1962 architecture, and could extend into print collateral and donor recognition without feeling like an afterthought.
            </p>
        </section>

        <section class="center flow flow-space-md" style="--center-max: 40rem">
            <h2 class="text-3 leading-heading">Approach</h2>
            <p class="text-muted leading-body">
                We grounded the system in the building&#39;s own vocabulary. Mid-century materials — brass, polished concrete, oak — carry the physical signage. The typographic hierarchy borrows from the museum&#39;s original 1962 program guide, modernized for legibility at signage scale. A primary/secondary path logic follows how curators actually want visitors to move through the collection rather than the shortest route between rooms.
            </p>
            <p class="text-muted leading-body">
                Print collateral (visitor maps, gallery brochures, the donor recognition wall) uses the same type stack and material logic. Anything that had to read at distance — gallery signs, directional arrows, room numbers — sits in the heaviest weight; secondary information drops into the lighter weight without changing typeface. One system, three contexts.
            </p>
        </section>

        <section class="center flow flow-space-md" style="--center-max: 56rem">
            <h2 class="text-3 leading-heading">Outcome</h2>
            <div class="grid" style="--grid-min: 11rem">
                <div class="stat">
                    <span class="stat-label">Wayfinding-related staff interruptions</span>
                    <span class="stat-value">−92%</span>
                    <span class="stat-description">measured over the first quarter</span>
                </div>
                <div class="stat">
                    <span class="stat-label">Schedule</span>
                    <span class="stat-value">4 wk</span>
                    <span class="stat-description">ahead of original plan</span>
                </div>
                <div class="stat">
                    <span class="stat-label">Sign types deployed</span>
                    <span class="stat-value">17</span>
                    <span class="stat-description">across two buildings</span>
                </div>
                <div class="stat">
                    <span class="stat-label">Donors recognized</span>
                    <span class="stat-value">2,400+</span>
                    <span class="stat-description">names typeset for the wall</span>
                </div>
            </div>
        </section>

        <hr class="divider"/>

        <section class="flow flow-space-md">
            <div class="center" style="--center-max: 40rem">
                <h2 class="text-3 leading-heading">In situ</h2>
                <p class="text-muted leading-body">Detail shots of the system in place — entrance, gallery directional, donor wall, brochure spread, brass room markers, and the typographic specimen used as a reference across all touchpoints.</p>
            </div>
            <div class="reel">
                <div class="frame demo-case-strip-frame" style="--frame-ratio: 4 / 3">
                    <img src="https://picsum.photos/seed/case-museum-detail-1/720/540" alt="Entrance directional sign"/>
                </div>
                <div class="frame demo-case-strip-frame" style="--frame-ratio: 4 / 3">
                    <img src="https://picsum.photos/seed/case-museum-detail-2/720/540" alt="Gallery directional with brass face"/>
                </div>
                <div class="frame demo-case-strip-frame" style="--frame-ratio: 4 / 3">
                    <img src="https://picsum.photos/seed/case-museum-detail-3/720/540" alt="Donor recognition wall, oak with engraved brass"/>
                </div>
                <div class="frame demo-case-strip-frame" style="--frame-ratio: 4 / 3">
                    <img src="https://picsum.photos/seed/case-museum-detail-4/720/540" alt="Visitor brochure, interior spread"/>
                </div>
                <div class="frame demo-case-strip-frame" style="--frame-ratio: 4 / 3">
                    <img src="https://picsum.photos/seed/case-museum-detail-5/720/540" alt="Brass room marker close-up"/>
                </div>
                <div class="frame demo-case-strip-frame" style="--frame-ratio: 4 / 3">
                    <img src="https://picsum.photos/seed/case-museum-detail-6/720/540" alt="Typographic specimen sheet"/>
                </div>
            </div>
        </section>

    </div>
</docs-resize>

How it works

Vertical rhythm between sections is one .flow.flow-space-2xl on the wrapper — no margin-block-start rules per section. Narrative sections use .center with a prose-width --center-max; the outcome section widens to fit four stats. The reel and hero stay full-bleed by sitting outside any .center wrapper.

The hero overlay is the same scrim treatment used on hero.html's full-page-image variant: a linear-gradient layered with the image in one background-image declaration, light text color on the wrapper, content positioned via display: grid; align-items: end. Gradient stops are tuned for legibility at the bottom (where the title sits) without flattening the image at the top.

Outcome stats use .stat from extras with .stat-label, .stat-value, .stat-description. The grid wraps automatically via --grid-min: 11rem; on narrow viewports the stats stack instead of cramming. The image strip uses brio's .reel composition for horizontal scroll — reel children get flex-shrink: 0 by default, so each frame holds its inline-size: 18rem as the user scrolls. scrollbar-width: thin is the reel default; override via --reel-scrollbar if a different treatment fits.