Feature
The Quiet Revolution in Browser Rendering
How a series of incremental changes to layout engines fundamentally altered what's possible in CSS -- and why almost nobody noticed.
Article Listing (Editorial)
Magazine-style blog index with tiered story prominence. Featured pieces get images and large type; secondary stories share a row; the rest flow as a compact text river. Visual hierarchy communicates editorial importance.
Core: .flow, .cluster, .switcher, .grid, .frame, .divider
Extras: .avatar
Custom Styles
A few custom styles are included in the page style block used by some of the patterns.
<style>
.article-category {
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-primary-text);
font-size: var(--step--2);
font-weight: var(--font-weight-medium);
}
.article-byline {
display: flex;
align-items: center;
gap: var(--space-2xs);
font-size: var(--step--1);
color: var(--color-text-muted);
}
.article-kicker {
font-size: var(--step--1);
font-weight: var(--font-weight-semibold);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
</style>Front page
A hero story, two secondary stories side by side, and a compact river below. Three tiers of visual prominence on one page.
Infrastructure
Edge Computing Was Supposed to Change Everything
Three years into the edge revolution, most teams are still deploying to three regions. What happened?
Design Systems
Why Your Token Naming Will Break at Scale
Semantic naming feels right until your third brand, your second platform, and your first dark mode bug.
<docs-resize>
<div class="flow flow-space-lg" style="max-inline-size: 48rem">
<article>
<div class="flow flow-space-sm">
<div class="frame" style="--frame-ratio: 21 / 9; border-radius: var(--radius-md)">
<img src="https://picsum.photos/seed/editorial1/960/400" alt="Abstract architectural detail"/>
</div>
<div class="flow flow-space-2xs">
<p class="article-kicker">Feature</p>
<h2 class="text-4 text-bold leading-tight">
<a href="#" class="link-plain">The Quiet Revolution in Browser Rendering</a>
</h2>
<p class="text-1" style="max-inline-size: 55ch">
How a series of incremental changes to layout engines fundamentally altered what's possible in CSS -- and why almost nobody noticed.
</p>
<div class="article-byline">
<div class="avatar is-sm">
<img src="https://picsum.photos/seed/ed-author1/64/64" alt="Elena Vasquez"/>
</div>
<span class="text-medium" style="color: var(--color-text)">Elena Vasquez</span>
<span>·</span>
<time datetime="2026-04-10">Apr 10, 2026</time>
<span>·</span>
<span>14 min read</span>
</div>
</div>
</div>
</article>
<hr class="divider"/>
<div class="grid" style="--grid-min: 18rem; --grid-gap: var(--space-lg)">
<article>
<div class="flow flow-space-xs">
<div class="frame" style="--frame-ratio: 3 / 2; border-radius: var(--radius-md)">
<img src="https://picsum.photos/seed/editorial2/600/400" alt="Server room with blue lighting"/>
</div>
<div class="flow flow-space-2xs">
<p class="article-kicker">Infrastructure</p>
<h2 class="text-1 text-semibold leading-heading">
<a href="#" class="link-plain">Edge Computing Was Supposed to Change Everything</a>
</h2>
<p class="text--1 text-muted" style="max-inline-size: 40ch">
Three years into the edge revolution, most teams are still deploying to three regions. What happened?
</p>
<div class="article-byline">
<span class="text-medium" style="color: var(--color-text)">James Okafor</span>
<span>·</span>
<time datetime="2026-04-08">Apr 8</time>
</div>
</div>
</div>
</article>
<article>
<div class="flow flow-space-xs">
<div class="frame" style="--frame-ratio: 3 / 2; border-radius: var(--radius-md)">
<img src="https://picsum.photos/seed/editorial3/600/400" alt="Notebook with design sketches"/>
</div>
<div class="flow flow-space-2xs">
<p class="article-kicker">Design Systems</p>
<h2 class="text-1 text-semibold leading-heading">
<a href="#" class="link-plain">Why Your Token Naming Will Break at Scale</a>
</h2>
<p class="text--1 text-muted" style="max-inline-size: 40ch">
Semantic naming feels right until your third brand, your second platform, and your first dark mode bug.
</p>
<div class="article-byline">
<span class="text-medium" style="color: var(--color-text)">Anya Petrov</span>
<span>·</span>
<time datetime="2026-04-05">Apr 5</time>
</div>
</div>
</div>
</article>
</div>
<hr class="divider"/>
<div class="flow flow-space-md">
<article>
<div class="flow flow-space-2xs">
<p class="article-category">Opinion</p>
<h2 class="text-1 text-semibold leading-heading">
<a href="#" class="link-plain">The Tooling Treadmill Is Exhausting and We Should Talk About It</a>
</h2>
<div class="article-byline">
<span class="text-medium" style="color: var(--color-text)">David Park</span>
<span>·</span>
<time datetime="2026-04-03">Apr 3</time>
<span>·</span>
<span>6 min read</span>
</div>
</div>
</article>
<article>
<div class="flow flow-space-2xs">
<p class="article-category">Interview</p>
<h2 class="text-1 text-semibold leading-heading">
<a href="#" class="link-plain">Lea Verou on the State of CSS and What Comes Next</a>
</h2>
<div class="article-byline">
<span class="text-medium" style="color: var(--color-text)">Elena Vasquez</span>
<span>·</span>
<time datetime="2026-03-30">Mar 30</time>
<span>·</span>
<span>11 min read</span>
</div>
</div>
</article>
<article>
<div class="flow flow-space-2xs">
<p class="article-category">Tutorial</p>
<h2 class="text-1 text-semibold leading-heading">
<a href="#" class="link-plain">Building Accessible Modals Without a Library</a>
</h2>
<div class="article-byline">
<span class="text-medium" style="color: var(--color-text)">James Okafor</span>
<span>·</span>
<time datetime="2026-03-27">Mar 27</time>
<span>·</span>
<span>8 min read</span>
</div>
</div>
</article>
</div>
</div>
</docs-resize>Feature with sidebar
The hero story sits alongside the content instead of above it. A switcher places the image beside the headline at wide viewports and stacks on narrow.
Longform
The Database That Swallowed the Web
How one storage paradigm went from footnote to default, and what we lost in the migration.
<docs-resize>
<div class="flow flow-space-lg" style="max-inline-size: 48rem">
<article>
<div class="switcher" style="--switcher-threshold: 28rem; --switcher-align: flex-start; --switcher-gap: var(--space-md)">
<div class="frame" style="--frame-ratio: 4 / 3; border-radius: var(--radius-md); flex-grow: 2">
<img src="https://picsum.photos/seed/editorial4/800/600" alt="Abstract geometric pattern"/>
</div>
<div class="flow flow-space-xs" style="flex-grow: 3">
<p class="article-kicker">Longform</p>
<h2 class="text-3 text-bold leading-tight">
<a href="#" class="link-plain">The Database That Swallowed the Web</a>
</h2>
<p class="text-muted" style="max-inline-size: 45ch">
How one storage paradigm went from footnote to default, and what we lost in the migration.
</p>
<div class="article-byline">
<div class="avatar is-sm">
<img src="https://picsum.photos/seed/ed-author2/64/64" alt="James Okafor"/>
</div>
<span class="text-medium" style="color: var(--color-text)">James Okafor</span>
<span>·</span>
<time datetime="2026-04-10">Apr 10</time>
<span>·</span>
<span>18 min read</span>
</div>
</div>
</div>
</article>
<hr class="divider"/>
<div class="flow flow-space-md">
<article>
<div class="switcher" style="--switcher-threshold: 24rem; --switcher-align: flex-start; --switcher-gap: var(--space-sm)">
<div class="frame" style="--frame-ratio: 3 / 2; border-radius: var(--radius-sm); flex-grow: 1">
<img src="https://picsum.photos/seed/editorial5/400/300" alt="Close-up of code on screen"/>
</div>
<div class="flow flow-space-2xs" style="flex-grow: 3">
<p class="article-category">Analysis</p>
<h2 class="text-0 text-semibold leading-heading">
<a href="#" class="link-plain">Framework Fatigue Is a Symptom, Not the Disease</a>
</h2>
<div class="article-byline">
<span class="text-medium" style="color: var(--color-text)">Anya Petrov</span>
<span>·</span>
<time datetime="2026-04-07">Apr 7</time>
</div>
</div>
</div>
</article>
<article>
<div class="switcher" style="--switcher-threshold: 24rem; --switcher-align: flex-start; --switcher-gap: var(--space-sm)">
<div class="frame" style="--frame-ratio: 3 / 2; border-radius: var(--radius-sm); flex-grow: 1">
<img src="https://picsum.photos/seed/editorial6/400/300" alt="Team working at whiteboard"/>
</div>
<div class="flow flow-space-2xs" style="flex-grow: 3">
<p class="article-category">Practice</p>
<h2 class="text-0 text-semibold leading-heading">
<a href="#" class="link-plain">Pair Programming Works If You Stop Treating It Like a Performance</a>
</h2>
<div class="article-byline">
<span class="text-medium" style="color: var(--color-text)">David Park</span>
<span>·</span>
<time datetime="2026-04-04">Apr 4</time>
</div>
</div>
</div>
</article>
<article>
<div class="switcher" style="--switcher-threshold: 24rem; --switcher-align: flex-start; --switcher-gap: var(--space-sm)">
<div class="frame" style="--frame-ratio: 3 / 2; border-radius: var(--radius-sm); flex-grow: 1">
<img src="https://picsum.photos/seed/editorial7/400/300" alt="Vintage computer terminal"/>
</div>
<div class="flow flow-space-2xs" style="flex-grow: 3">
<p class="article-category">History</p>
<h2 class="text-0 text-semibold leading-heading">
<a href="#" class="link-plain">The Lost Art of View Source</a>
</h2>
<div class="article-byline">
<span class="text-medium" style="color: var(--color-text)">Elena Vasquez</span>
<span>·</span>
<time datetime="2026-04-01">Apr 1</time>
</div>
</div>
</div>
</article>
</div>
</div>
</docs-resize>Section front
A section or category landing page. Lead story with image, followed by a text-only list with dates. Tighter than the front page -- everything belongs to one topic.
What Happens When You Actually Measure Web Performance
We audited 200 production sites against their own stated performance budgets. The results were not encouraging.
<docs-resize>
<div class="flow flow-space-lg" style="max-inline-size: 42rem">
<article>
<div class="flow flow-space-sm">
<div class="frame" style="--frame-ratio: 2 / 1; border-radius: var(--radius-md)">
<img src="https://picsum.photos/seed/editorial8/800/400" alt="Abstract data visualization"/>
</div>
<div class="flow flow-space-2xs">
<h2 class="text-3 text-bold leading-tight">
<a href="#" class="link-plain">What Happens When You Actually Measure Web Performance</a>
</h2>
<p class="text-muted" style="max-inline-size: 50ch">
We audited 200 production sites against their own stated performance budgets. The results were not encouraging.
</p>
<div class="article-byline">
<div class="avatar is-sm">
<img src="https://picsum.photos/seed/ed-author3/64/64" alt="David Park"/>
</div>
<span class="text-medium" style="color: var(--color-text)">David Park</span>
<span>·</span>
<time datetime="2026-04-09">Apr 9, 2026</time>
<span>·</span>
<span>16 min read</span>
</div>
</div>
</div>
</article>
<hr class="divider"/>
<div class="flow flow-space-sm">
<article>
<div class="cluster is-apart" style="--cluster-align: baseline">
<h2 class="text-0 text-semibold leading-heading">
<a href="#" class="link-plain">Core Web Vitals: Two Years of Real Data</a>
</h2>
<time class="text--1 text-subtle" datetime="2026-04-06" style="flex-shrink: 0">Apr 6</time>
</div>
</article>
<article>
<div class="cluster is-apart" style="--cluster-align: baseline">
<h2 class="text-0 text-semibold leading-heading">
<a href="#" class="link-plain">The Hidden Cost of Third-Party Scripts</a>
</h2>
<time class="text--1 text-subtle" datetime="2026-04-02" style="flex-shrink: 0">Apr 2</time>
</div>
</article>
<article>
<div class="cluster is-apart" style="--cluster-align: baseline">
<h2 class="text-0 text-semibold leading-heading">
<a href="#" class="link-plain">Image Optimization in 2026: What Actually Matters</a>
</h2>
<time class="text--1 text-subtle" datetime="2026-03-28" style="flex-shrink: 0">Mar 28</time>
</div>
</article>
<article>
<div class="cluster is-apart" style="--cluster-align: baseline">
<h2 class="text-0 text-semibold leading-heading">
<a href="#" class="link-plain">Lazy Loading Done Wrong: A Case Study</a>
</h2>
<time class="text--1 text-subtle" datetime="2026-03-24" style="flex-shrink: 0">Mar 24</time>
</div>
</article>
<article>
<div class="cluster is-apart" style="--cluster-align: baseline">
<h2 class="text-0 text-semibold leading-heading">
<a href="#" class="link-plain">Font Loading Strategies That Actually Work</a>
</h2>
<time class="text--1 text-subtle" datetime="2026-03-20" style="flex-shrink: 0">Mar 20</time>
</div>
</article>
</div>
</div>
</docs-resize>Accessibility
- Use
<article>elements so each entry is a landmark for assistive technology - Images need descriptive
alttext -- describe the image content, not the article topic - The visual hierarchy (size, placement, images) is supplemented by heading levels and semantic structure so the importance tiers are available to screen readers
- Use
<time>withdatetimefor machine-readable dates - Link text (the title) is descriptive -- avoid generic "read more" links