The "selected work" block on an agency homepage. Workhorse shapes (zig-zag splits, card grids, a hero-anchored layout) sit alongside more inspired alternatives (a numbered editorial index, a specimen sheet, a hand-composed editorial grid, a postcard spread). All layouts present the same set of agency projects so the layout differences read against shared content. Picsum images stand in for real project imagery; aspect ratios and badge labels signal the medium (print, signage, editorial, web).
Core: .switcher, .frame, .card-grid, .card.is-interactive, .flank, .stacked-list, .flow, .cluster, .badge
Each project pairs an image and a content block via
.switcher. The flow direction alternates every other
project, so projects fall left/right/left/right down the page like
a magazine spread. .switcher stacks vertically below
its threshold, where the alternation collapses naturally.
A regional museum opens a new wing. We developed a wayfinding system that respects the building's mid-century language while serving contemporary signage and print needs.
Three-location roaster expanding to seven. A modular identity, packaging system, and in-store collateral built to scale with the brand.
An environmental nonprofit's annual report — a 96-page editorial piece with custom typography, infographics, and a tip-in poster.
Wholesale-to-retail platform with real-time inventory, online ordering, and a content engine for the brand's editorial side.
<style>
.demo-zigzag > article:nth-child(even) .switcher {
flex-direction: row-reverse;
}
.demo-zigzag-frame {
border-radius: var(--radius-md);
overflow: hidden;
}
</style>
<docs-resize>
<div class="demo-zigzag flow flow-space-2xl">
<article>
<div class="switcher">
<div class="frame demo-zigzag-frame" style="--frame-ratio: 4 / 3">
<img src="https://picsum.photos/seed/agency-museum/800/600" alt=""/>
</div>
<div class="flow flow-space-xs">
<div class="cluster gap-2xs">
<span class="badge text--2">Signage</span>
<span class="badge text--2">Print</span>
</div>
<h3 class="text-2 leading-heading"><a href="#">Wayfinding for Fern Valley Museum</a></h3>
<p class="text-muted">A regional museum opens a new wing. We developed a wayfinding system that respects the building's mid-century language while serving contemporary signage and print needs.</p>
</div>
</div>
</article>
<article>
<div class="switcher">
<div class="frame demo-zigzag-frame" style="--frame-ratio: 1 / 1">
<img src="https://picsum.photos/seed/agency-coffee/600/600" alt=""/>
</div>
<div class="flow flow-space-xs">
<div class="cluster gap-2xs">
<span class="badge is-accent text--2">Brand</span>
<span class="badge text--2">Packaging</span>
</div>
<h3 class="text-2 leading-heading"><a href="#">Identity for Maplewood Coffee</a></h3>
<p class="text-muted">Three-location roaster expanding to seven. A modular identity, packaging system, and in-store collateral built to scale with the brand.</p>
</div>
</div>
</article>
<article>
<div class="switcher">
<div class="frame demo-zigzag-frame" style="--frame-ratio: 3 / 2">
<img src="https://picsum.photos/seed/agency-magazine/900/600" alt=""/>
</div>
<div class="flow flow-space-xs">
<div class="cluster gap-2xs">
<span class="badge text--2">Editorial</span>
<span class="badge text--2">Print</span>
</div>
<h3 class="text-2 leading-heading"><a href="#">Tidewater Annual</a></h3>
<p class="text-muted">An environmental nonprofit's annual report — a 96-page editorial piece with custom typography, infographics, and a tip-in poster.</p>
</div>
</div>
</article>
<article>
<div class="switcher">
<div class="frame demo-zigzag-frame" style="--frame-ratio: 16 / 9">
<img src="https://picsum.photos/seed/agency-web/1280/720" alt=""/>
</div>
<div class="flow flow-space-xs">
<div class="cluster gap-2xs">
<span class="badge is-success text--2">Web</span>
</div>
<h3 class="text-2 leading-heading"><a href="#">Pacific Roasters Platform</a></h3>
<p class="text-muted">Wholesale-to-retail platform with real-time inventory, online ordering, and a content engine for the brand's editorial side.</p>
</div>
</div>
</article>
</div>
</docs-resize>
Three projects in .card-grid.is-aligned —
brio's auto-fill grid for cards, with the subgrid alignment
variant so the figure / heading / meta bands line up across the
row regardless of individual content length. Images sit in the card's first-child
<figure> slot, bleeding to the card's edges. On
hover or keyboard focus, the image desaturates back to color and
scales subtly — a classic agency-portfolio treatment that
reveals the work as the user engages with the tile. The brio
default heading-link primary tint on hover handles the textual
accent.
Wayfinding · Signage, Print
Identity · Brand, Packaging
Editorial · Print
<style>
.demo-row-tile figure > img {
filter: saturate(0.45);
transition: filter 350ms ease, transform 400ms ease;
}
.demo-row-tile:hover figure > img,
.demo-row-tile:focus-within figure > img {
filter: saturate(1);
transform: scale(1.04);
}
</style>
<docs-resize>
<div class="card-grid is-aligned" style="--card-grid-min: 18rem; --card-grid-rows: 3">
<article class="card is-interactive demo-row-tile">
<figure>
<img src="https://picsum.photos/seed/agency-museum/800/600" alt=""/>
</figure>
<h3><a href="#">Fern Valley Museum</a></h3>
<p class="text-muted text--1">Wayfinding · Signage, Print</p>
</article>
<article class="card is-interactive demo-row-tile">
<figure>
<img src="https://picsum.photos/seed/agency-coffee/600/600" alt=""/>
</figure>
<h3><a href="#">Maplewood Coffee</a></h3>
<p class="text-muted text--1">Identity · Brand, Packaging</p>
</article>
<article class="card is-interactive demo-row-tile">
<figure>
<img src="https://picsum.photos/seed/agency-magazine/900/600" alt=""/>
</figure>
<h3><a href="#">Tidewater Annual</a></h3>
<p class="text-muted text--1">Editorial · Print</p>
</article>
</div>
</docs-resize>
One project leads at full width with a 16:9 frame and a richer
content block; three supporting projects fill the row below in a
.card-grid. Hierarchy comes from frame size and prose
density, not extra decoration. Supporting tiles use the same hover
treatment as the compact row above — the lead project stays
static (it's already at full visual weight).
A regional museum's new wing called for a complete reconsideration of how visitors move through the space. We developed a wayfinding system grounded in the building's mid-century vocabulary — type, materiality, scale — and extended it into print collateral, donor recognition walls, and a small companion site.
Identity · Brand, Packaging
Editorial · Print
Web platform
<style>
.demo-hero-lead-frame {
border-radius: var(--radius-md);
overflow: hidden;
}
.demo-hero-tile figure > img {
filter: saturate(0.45);
transition: filter 350ms ease, transform 400ms ease;
}
.demo-hero-tile:hover figure > img,
.demo-hero-tile:focus-within figure > img {
filter: saturate(1);
transform: scale(1.04);
}
</style>
<docs-resize>
<div class="flow flow-space-xl">
<article>
<div class="switcher" style="--switcher-threshold: 40rem">
<div class="frame demo-hero-lead-frame" style="--frame-ratio: 16 / 9">
<img src="https://picsum.photos/seed/agency-museum/1280/720" alt=""/>
</div>
<div class="flow flow-space-sm">
<div class="cluster gap-2xs">
<span class="badge is-accent text--2">Featured</span>
<span class="badge text--2">Signage</span>
<span class="badge text--2">Print</span>
</div>
<h3 class="text-3 leading-heading"><a href="#">Wayfinding for Fern Valley Museum</a></h3>
<p class="text-muted leading-body">
A regional museum's new wing called for a complete reconsideration of how visitors move through the space. We developed a wayfinding system grounded in the building's mid-century vocabulary — type, materiality, scale — and extended it into print collateral, donor recognition walls, and a small companion site.
</p>
<p class="text--1">
<a href="#">Read the case study →</a>
</p>
</div>
</div>
</article>
<div class="card-grid is-aligned" style="--card-grid-min: 18rem; --card-grid-rows: 3">
<article class="card is-interactive demo-hero-tile">
<figure>
<img src="https://picsum.photos/seed/agency-coffee/600/600" alt=""/>
</figure>
<h3><a href="#">Maplewood Coffee</a></h3>
<p class="text-muted text--1">Identity · Brand, Packaging</p>
</article>
<article class="card is-interactive demo-hero-tile">
<figure>
<img src="https://picsum.photos/seed/agency-magazine/900/600" alt=""/>
</figure>
<h3><a href="#">Tidewater Annual</a></h3>
<p class="text-muted text--1">Editorial · Print</p>
</article>
<article class="card is-interactive demo-hero-tile">
<figure>
<img src="https://picsum.photos/seed/agency-web/800/600" alt=""/>
</figure>
<h3><a href="#">Pacific Roasters</a></h3>
<p class="text-muted text--1">Web platform</p>
</article>
</div>
</div>
</docs-resize>
An anti-grid take. Projects sit in a vertical numbered sequence
— large display numerals, titles set as the only image-free
visual content, and a sticky preview frame on the side that swaps
its image as the user moves through the list. Reads like a film
festival program or a magazine masthead. .flank
handles the two-column structure; .stacked-list.is-divided
carries the list rows; per-row .leading and
.trailing slots hold the numeral and the arrow.
A small handler on
pointerenter
and
focus
swaps the preview img's src and caption.
Signage, Print · 2026
Brand · 2026
Editorial, Print · 2025
Brand, Signage, Print · 2025
Web · 2024
Wayfinding · Signage, Print
<style>
.demo-numbered {
--flank-width: 18rem;
}
.demo-numbered .stacked-list .leading {
font-size: var(--step-2);
font-weight: var(--font-weight-bold);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
letter-spacing: var(--letter-spacing-tight);
align-self: center;
}
.demo-numbered .stacked-list .trailing {
color: var(--color-text-muted);
align-self: center;
transition: color 200ms ease, transform 200ms ease;
}
.demo-numbered .stacked-list .is-interactive:hover .trailing,
.demo-numbered .stacked-list .is-interactive:focus-within .trailing {
color: var(--color-primary);
transform: translateX(0.25rem);
}
.demo-numbered-preview {
position: sticky;
inset-block-start: var(--space-md);
align-self: start;
}
.demo-numbered-preview .frame {
border-radius: var(--radius-md);
overflow: hidden;
transition: opacity 250ms ease;
}
</style>
<docs-resize>
<div class="demo-numbered flank is-reversed">
<ol class="stacked-list is-divided">
<li>
<article class="is-interactive">
<div class="leading" aria-hidden="true">01</div>
<div class="flow flow-space-2xs">
<h3 class="text-2 leading-heading"><a href="#" data-project="agency-museum" data-caption="Wayfinding · Signage, Print">Wayfinding for Fern Valley Museum</a></h3>
<p class="text-muted text--1">Signage, Print · 2026</p>
</div>
<div class="trailing" aria-hidden="true">→</div>
</article>
</li>
<li>
<article class="is-interactive">
<div class="leading" aria-hidden="true">02</div>
<div class="flow flow-space-2xs">
<h3 class="text-2 leading-heading"><a href="#" data-project="agency-coffee" data-caption="Identity · Brand">Identity for Maplewood Coffee</a></h3>
<p class="text-muted text--1">Brand · 2026</p>
</div>
<div class="trailing" aria-hidden="true">→</div>
</article>
</li>
<li>
<article class="is-interactive">
<div class="leading" aria-hidden="true">03</div>
<div class="flow flow-space-2xs">
<h3 class="text-2 leading-heading"><a href="#" data-project="agency-magazine" data-caption="Annual report · Print">Tidewater Annual</a></h3>
<p class="text-muted text--1">Editorial, Print · 2025</p>
</div>
<div class="trailing" aria-hidden="true">→</div>
</article>
</li>
<li>
<article class="is-interactive">
<div class="leading" aria-hidden="true">04</div>
<div class="flow flow-space-2xs">
<h3 class="text-2 leading-heading"><a href="#" data-project="agency-festival" data-caption="Identity · Brand, Signage, Print">Pacifica Festival</a></h3>
<p class="text-muted text--1">Brand, Signage, Print · 2025</p>
</div>
<div class="trailing" aria-hidden="true">→</div>
</article>
</li>
<li>
<article class="is-interactive">
<div class="leading" aria-hidden="true">05</div>
<div class="flow flow-space-2xs">
<h3 class="text-2 leading-heading"><a href="#" data-project="agency-web" data-caption="Platform · Web">Pacific Roasters Platform</a></h3>
<p class="text-muted text--1">Web · 2024</p>
</div>
<div class="trailing" aria-hidden="true">→</div>
</article>
</li>
</ol>
<div class="demo-numbered-preview flow flow-space-2xs">
<div class="frame" style="--frame-ratio: 4 / 3">
<img class="demo-numbered-preview-img" src="https://picsum.photos/seed/agency-museum/720/540" alt=""/>
</div>
<p class="demo-numbered-preview-caption text-muted text--1">Wayfinding · Signage, Print</p>
</div>
</div>
</docs-resize>
<script>
(() => {
const root = document.querySelector('.demo-numbered');
if (!root) return;
const links = root.querySelectorAll('.stacked-list a[data-project]');
const img = root.querySelector('.demo-numbered-preview-img');
const caption = root.querySelector('.demo-numbered-preview-caption');
const update = (link) => {
const seed = link.dataset.project;
const next = `https://picsum.photos/seed/${seed}/720/540`;
if (img.src !== next) img.src = next;
caption.innerHTML = link.dataset.caption || '';
};
links.forEach(link => {
link.addEventListener('pointerenter', () => update(link));
link.addEventListener('focus', () => update(link));
});
})();
</script>
Projects laid out like pages in a typographic specimen book. Each
specimen is a .flank with marginalia (year,
medium, client, all caps and tracked) in the gutter and a display-
scale title plus a tight prose paragraph in the main column. A
small image sits at the corner of the spread — smaller than
you'd expect, because the typography is the work and the image is
supporting evidence. Specimens stack vertically through
.flow.flow-space-3xl for generous chapbook-like
air. The whole spread is clickable via a stretched
::after on the title anchor — same pattern brio's
.card.is-interactive uses.
A complete wayfinding system for a regional museum's new wing — mid-century materials, 1962-derived typography, and a primary/secondary path logic that follows how curators want visitors to move through the collection.
A modular identity for a three-location roaster scaling to seven. One typographic foundation, three packaging scales, and a wholesale catalog system that holds together as the brand grows.
A 96-page annual report for an environmental nonprofit. Custom display typography, infographics built from scratch, and a tip-in poster that doubles as the year-end mailer.
<style>
.demo-specimen {
position: relative;
isolation: isolate;
}
.demo-specimen-marginalia {
font-size: var(--step--2);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
color: var(--color-text-muted);
}
.demo-specimen-title {
font-size: var(--step-5);
line-height: 0.95;
letter-spacing: var(--letter-spacing-tight);
font-weight: var(--font-weight-semibold);
}
.demo-specimen-title a {
color: inherit;
text-decoration: none;
transition: color 200ms ease;
}
.demo-specimen-title a:hover {
color: var(--color-primary);
}
.demo-specimen-title a::after {
content: "";
position: absolute;
inset: 0;
}
.demo-specimen-image {
border-radius: var(--radius-md);
overflow: hidden;
inline-size: 10rem;
flex-shrink: 0;
}
.demo-specimen-lede {
flex: 1;
max-inline-size: 32rem;
}
</style>
<docs-resize>
<div class="flow flow-space-3xl">
<article class="demo-specimen flank" style="--flank-width: 9rem">
<aside class="demo-specimen-marginalia flow flow-space-2xs">
<p>2026</p>
<p>Wayfinding</p>
<p>Signage, Print</p>
<p>Fern Valley Museum</p>
</aside>
<div class="flow flow-space-md">
<h2 class="demo-specimen-title"><a href="#">Wayfinding for Fern Valley Museum</a></h2>
<div class="cluster gap-xl" style="--cluster-align: end">
<p class="demo-specimen-lede text-1 leading-body text-muted">
A complete wayfinding system for a regional museum's new wing — mid-century materials, 1962-derived typography, and a primary/secondary path logic that follows how curators want visitors to move through the collection.
</p>
<div class="frame demo-specimen-image" style="--frame-ratio: 1 / 1">
<img src="https://picsum.photos/seed/agency-museum/400/400" alt=""/>
</div>
</div>
</div>
</article>
<article class="demo-specimen flank" style="--flank-width: 9rem">
<aside class="demo-specimen-marginalia flow flow-space-2xs">
<p>2026</p>
<p>Identity</p>
<p>Brand</p>
<p>Maplewood Coffee</p>
</aside>
<div class="flow flow-space-md">
<h2 class="demo-specimen-title"><a href="#">Identity for Maplewood Coffee</a></h2>
<div class="cluster gap-xl" style="--cluster-align: end">
<p class="demo-specimen-lede text-1 leading-body text-muted">
A modular identity for a three-location roaster scaling to seven. One typographic foundation, three packaging scales, and a wholesale catalog system that holds together as the brand grows.
</p>
<div class="frame demo-specimen-image" style="--frame-ratio: 1 / 1">
<img src="https://picsum.photos/seed/agency-coffee/400/400" alt=""/>
</div>
</div>
</div>
</article>
<article class="demo-specimen flank" style="--flank-width: 9rem">
<aside class="demo-specimen-marginalia flow flow-space-2xs">
<p>2025</p>
<p>Annual Report</p>
<p>Editorial, Print</p>
<p>Tidewater Foundation</p>
</aside>
<div class="flow flow-space-md">
<h2 class="demo-specimen-title"><a href="#">Tidewater Annual</a></h2>
<div class="cluster gap-xl" style="--cluster-align: end">
<p class="demo-specimen-lede text-1 leading-body text-muted">
A 96-page annual report for an environmental nonprofit. Custom display typography, infographics built from scratch, and a tip-in poster that doubles as the year-end mailer.
</p>
<div class="frame demo-specimen-image" style="--frame-ratio: 1 / 1">
<img src="https://picsum.photos/seed/agency-magazine/400/400" alt=""/>
</div>
</div>
</div>
</article>
</div>
</docs-resize>
Anti-algorithmic. An explicit CSS grid with named areas
(grid-template-areas) places one hero project in a
2×2 cell and three supporting projects in cells of varied
sizes — a tall portrait cell, a small standard cell, a wide
bottom strip. The composition is *deliberate*, not auto-fill: this
project deserves the big space, this one fits the slim corner.
Container queries reflow to a different intentional arrangement
at narrower widths (still hand-composed), then collapse to a
single column at the narrowest breakpoint. Each cell is a
<figure> + caption pair with whole-cell click
via the heading anchor's stretched ::after.
Signage, Print · 2026
Identity · 2026
Brand, Signage, Print · 2025
Editorial, Print · 2025
<style>
.demo-editorial { container-type: inline-size; }
.demo-editorial-grid {
display: grid;
gap: var(--space-sm);
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 12rem 12rem 12rem;
grid-template-areas:
"hero hero one"
"hero hero two"
"three three two";
}
@container (max-width: 36rem) {
.demo-editorial-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 14rem 12rem 10rem;
grid-template-areas:
"hero hero"
"one two"
"three three";
}
}
@container (max-width: 22rem) {
.demo-editorial-grid {
grid-template-columns: 1fr;
grid-template-rows: 14rem repeat(3, 10rem);
grid-template-areas:
"hero"
"one"
"two"
"three";
}
}
.demo-editorial-cell {
position: relative;
isolation: isolate;
display: grid;
grid-template-rows: 1fr auto;
gap: var(--space-2xs);
min-inline-size: 0;
}
.demo-editorial-cell figure {
margin: 0;
overflow: hidden;
border-radius: var(--radius-md);
min-block-size: 0;
}
.demo-editorial-cell figure img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
display: block;
transition: transform 400ms ease;
}
.demo-editorial-cell:hover figure img,
.demo-editorial-cell:focus-within figure img {
transform: scale(1.04);
}
.demo-editorial-cell h3 a {
color: inherit;
text-decoration: none;
transition: color 200ms ease;
}
.demo-editorial-cell h3 a:hover {
color: var(--color-primary);
}
.demo-editorial-cell h3 a::after {
content: "";
position: absolute;
inset: 0;
}
</style>
<docs-resize>
<div class="demo-editorial">
<div class="demo-editorial-grid">
<article class="demo-editorial-cell" style="grid-area: hero">
<figure>
<img src="https://picsum.photos/seed/agency-museum/1200/720" alt=""/>
</figure>
<div class="flow flow-space-3xs">
<h3 class="text-0 leading-heading"><a href="#">Wayfinding for Fern Valley Museum</a></h3>
<p class="text--1 text-muted">Signage, Print · 2026</p>
</div>
</article>
<article class="demo-editorial-cell" style="grid-area: one">
<figure>
<img src="https://picsum.photos/seed/agency-coffee/600/360" alt=""/>
</figure>
<div class="flow flow-space-3xs">
<h3 class="text-0 leading-heading"><a href="#">Maplewood Coffee</a></h3>
<p class="text--1 text-muted">Identity · 2026</p>
</div>
</article>
<article class="demo-editorial-cell" style="grid-area: two">
<figure>
<img src="https://picsum.photos/seed/agency-festival/600/720" alt=""/>
</figure>
<div class="flow flow-space-3xs">
<h3 class="text-0 leading-heading"><a href="#">Pacifica Festival</a></h3>
<p class="text--1 text-muted">Brand, Signage, Print · 2025</p>
</div>
</article>
<article class="demo-editorial-cell" style="grid-area: three">
<figure>
<img src="https://picsum.photos/seed/agency-magazine/1200/360" alt=""/>
</figure>
<div class="flow flow-space-3xs">
<h3 class="text-0 leading-heading"><a href="#">Tidewater Annual</a></h3>
<p class="text--1 text-muted">Editorial, Print · 2025</p>
</div>
</article>
</div>
</div>
</docs-resize>
Tactile. Projects laid out as if scattered on a designer's desk
— each card carries a slight rotation (curated per-card, not
random; nothing past 1.5° either way), with a soft shadow that
reads as "raised paper." Hover or keyboard focus rotates the
hovered card back to zero, scales it up slightly, and lifts it
above its siblings via z-index. Pure CSS — no
JS. Rotations turn off via container query at narrow widths
(single-column tilted cards look silly).
Wayfinding · 2026
Identity · 2026
Brand, Signage · 2025
Editorial · 2025
Web platform · 2024
Wayfinding · 2024
<style>
.demo-postcards { container-type: inline-size; }
.demo-postcards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
padding-block: var(--space-md);
}
@container (max-width: 36rem) {
.demo-postcards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@container (max-width: 22rem) {
.demo-postcards-grid {
grid-template-columns: 1fr;
}
}
.demo-postcard {
--rotation: 0deg;
position: relative;
isolation: isolate;
background: var(--color-surface-raised);
padding: var(--space-2xs);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
transform: rotate(var(--rotation));
transition: transform 300ms ease, box-shadow 300ms ease;
}
.demo-postcard:nth-child(1) { --rotation: -1.2deg; }
.demo-postcard:nth-child(2) { --rotation: 0.8deg; }
.demo-postcard:nth-child(3) { --rotation: -0.5deg; }
.demo-postcard:nth-child(4) { --rotation: 1.4deg; }
.demo-postcard:nth-child(5) { --rotation: -1deg; }
.demo-postcard:nth-child(6) { --rotation: 0.6deg; }
.demo-postcard:hover,
.demo-postcard:focus-within {
transform: rotate(0) scale(1.03);
box-shadow: var(--shadow-lg);
z-index: 5;
}
@container (max-width: 22rem) {
.demo-postcard { --rotation: 0deg; }
}
.demo-postcard figure {
margin: 0;
overflow: hidden;
border-radius: calc(var(--radius-sm) - var(--space-3xs));
}
.demo-postcard figure img {
inline-size: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.demo-postcard-caption {
padding-block: var(--space-2xs) var(--space-3xs);
padding-inline: var(--space-2xs);
}
.demo-postcard h3 a {
color: inherit;
text-decoration: none;
transition: color 200ms ease;
}
.demo-postcard h3 a:hover {
color: var(--color-primary);
}
.demo-postcard h3 a::after {
content: "";
position: absolute;
inset: 0;
}
</style>
<docs-resize>
<div class="demo-postcards">
<div class="demo-postcards-grid">
<article class="demo-postcard">
<figure>
<img src="https://picsum.photos/seed/agency-museum/600/450" alt=""/>
</figure>
<div class="demo-postcard-caption flow flow-space-3xs">
<h3 class="text-0 leading-heading"><a href="#">Fern Valley Museum</a></h3>
<p class="text--1 text-muted">Wayfinding · 2026</p>
</div>
</article>
<article class="demo-postcard">
<figure>
<img src="https://picsum.photos/seed/agency-coffee/600/450" alt=""/>
</figure>
<div class="demo-postcard-caption flow flow-space-3xs">
<h3 class="text-0 leading-heading"><a href="#">Maplewood Coffee</a></h3>
<p class="text--1 text-muted">Identity · 2026</p>
</div>
</article>
<article class="demo-postcard">
<figure>
<img src="https://picsum.photos/seed/agency-festival/600/450" alt=""/>
</figure>
<div class="demo-postcard-caption flow flow-space-3xs">
<h3 class="text-0 leading-heading"><a href="#">Pacifica Festival</a></h3>
<p class="text--1 text-muted">Brand, Signage · 2025</p>
</div>
</article>
<article class="demo-postcard">
<figure>
<img src="https://picsum.photos/seed/agency-magazine/600/450" alt=""/>
</figure>
<div class="demo-postcard-caption flow flow-space-3xs">
<h3 class="text-0 leading-heading"><a href="#">Tidewater Annual</a></h3>
<p class="text--1 text-muted">Editorial · 2025</p>
</div>
</article>
<article class="demo-postcard">
<figure>
<img src="https://picsum.photos/seed/agency-web/600/450" alt=""/>
</figure>
<div class="demo-postcard-caption flow flow-space-3xs">
<h3 class="text-0 leading-heading"><a href="#">Pacific Roasters</a></h3>
<p class="text--1 text-muted">Web platform · 2024</p>
</div>
</article>
<article class="demo-postcard">
<figure>
<img src="https://picsum.photos/seed/agency-cascade/600/450" alt=""/>
</figure>
<div class="demo-postcard-caption flow flow-space-3xs">
<h3 class="text-0 leading-heading"><a href="#">Cascade Center</a></h3>
<p class="text--1 text-muted">Wayfinding · 2024</p>
</div>
</article>
</div>
</div>
</docs-resize>
The zig-zag uses .switcher for each project row and
:nth-child(even) .switcher { flex-direction: row-reverse }
to alternate. .switcher already wraps to vertical at
its threshold, so the alternation has no effect when stacked
— mobile readers see a clean single column.
The compact row uses .card-grid.is-aligned —
brio's auto-fill grid for cards with the subgrid alignment
variant. Each card spans a fixed number of subgrid rows (3 here,
via --card-grid-rows) so the figure / heading / meta
bands align across all tiles in the row even when content
lengths differ. .card.is-interactive on each card
handles the click area (stretched ::after on the
heading anchor) and the hover shadow. The desaturate-and-scale
treatment is two declarations on the inner image with
transition for the easing; :focus-within
matches keyboard focus to mouse hover so the interaction is
parity-accessible.
The hero-anchored layout reuses the same
.card-grid.is-aligned shape for the three supporting projects; the lead is a single
.switcher pair with a 16:9 frame and a denser content
block. The visual hierarchy comes from frame size and prose
density, not added decoration — the lead is bigger because
its frame is 16:9 against the supporting tiles' inherited card
media height.
The numbered editorial index is a .flank.is-reversed:
list grows on the left, preview frame holds a fixed
--flank-width on the right. The list itself is
.stacked-list.is-divided with each row's
.leading slot carrying the numeral and the
.trailing slot carrying the arrow. The preview is
position: sticky so it stays in view as the user
scrolls; a small handler swaps the img's src
on pointerenter and focus so mouse and
keyboard get parity.
The specimen sheet stacks projects via
.flow.flow-space-3xl. Each specimen is a
.flank with a narrow marginalia column
(--flank-width: 9rem) and a wider main column.
The display-scale title is one custom class (a clamp()
font-size and tight tracking). The corner image is a
.frame with a fixed inline-size sitting
at the end of a .cluster next to the description —
cluster's wrap behavior stacks them at narrow widths. Whole-spread
interactivity is the same stretched-::after trick
.card.is-interactive uses, applied directly to the
title anchor.
The constructed editorial grid is bare CSS grid with explicit
grid-template-areas — not auto-fill. Each cell
is a <figure> + caption pair using
grid-template-rows: 1fr auto so the figure fills the
available cell space and the caption sits at the bottom. Container
queries swap the template to a different intentional arrangement
at narrower widths rather than reflowing automatically. The
composition is deliberately curated — one project's cell is
bigger because that project deserves it.
The postcard spread is a CSS grid plus per-card
transform: rotate() via a --rotation
custom property set per :nth-child(n). Hand-picked
angles keep the variation curated rather than algorithmic.
:hover and :focus-within reset
transform to rotate(0) scale(1.03), raise
the shadow, and lift z-index above siblings — the
"pick up the postcard" feel. At the narrowest container width,
rotations zero out so single-column cards don't look tilted alone.
Pure CSS, no JS.