Brio

Article Header

An article header introduces a blog post or content page with title, author info, publication date, tags, and reading time.

Core: .badge, .cluster, .divider, .flow

Extras: .avatar

Custom Styles

A few custom styles are included in the page style block used by some of the patterns.

<style>
    .article-meta {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        flex-wrap: wrap;
        color: var(--color-text-muted);
        font-size: var(--step--1);
    }
    .article-author {
        display: flex;
        align-items: center;
        gap: var(--space-2xs);
    }
</style>

Standard

Engineering CSS

Building a Color System with oklch

How we moved from HSL to oklch for perceptually uniform color palettes across light and dark themes.

Jordan Lee
Jordan Lee · · 8 min read 
<docs-resize>
    <div class="flow flow-space-sm">
        <div class="cluster gap-2xs">
            <span class="badge is-accent text--2">Engineering</span>
            <span class="badge is-neutral text--2">CSS</span>
        </div>
        <h1 class="text-4 leading-heading">Building a Color System with oklch</h1>
        <p class="text-1 text-muted" style="max-inline-size: 40rem">
            How we moved from HSL to oklch for perceptually uniform color palettes across light and dark themes.
        </p>
        <div class="article-meta">
        <span class="article-author">
            <div class="avatar is-sm">
                <img src="https://picsum.photos/seed/author1/64/64" alt="Jordan Lee"/>
            </div>
            <span class="text-medium" style="color: var(--color-text)">Jordan Lee</span>
        </span>
            <span>·</span>
            <time datetime="2026-03-15">Mar 15, 2026</time>
            <span>·</span>
            <span>8 min read</span>
        </div>
    </div>
</docs-resize>

Minimal

On Shipping Small Things

· 4 min read 
<docs-resize>
        <div class="flow flow-space-2xs">
            <h1 class="text-3 leading-heading">On Shipping Small Things</h1>
            <div class="article-meta">
                <time datetime="2026-04-01">April 1, 2026</time>
                <span>·</span>
                <span>4 min read</span>
            </div>
            <hr class="divider"/>
        </div>
</docs-resize>

Multiple authors

Migrating to Container Queries

Sam Chen
Sam Chen and
Alex Rivera
Alex Rivera · 
<docs-resize>
        <div class="flow flow-space-sm">
            <h1 class="text-3 leading-heading">Migrating to Container Queries</h1>
            <div class="article-meta">
                <span class="article-author">
                    <div class="avatar is-sm">
                        <img src="https://picsum.photos/seed/author2/64/64" alt="Sam Chen"/>
                    </div>
                    <span class="text-medium" style="color: var(--color-text)">Sam Chen</span>
                </span>
                <span>and</span>
                <span class="article-author">
                    <div class="avatar is-sm">
                        <img src="https://picsum.photos/seed/author3/64/64" alt="Alex Rivera"/>
                    </div>
                    <span class="text-medium" style="color: var(--color-text)">Alex Rivera</span>
                </span>
                <span>·</span>
                <time datetime="2026-03-28">Mar 28, 2026</time>
            </div>
        </div>
</docs-resize>

Accessibility

Patterns