Bento

Bento grids combine asymmetric cells of mixed content types (text, stats, imagery, code, quotes) into a single dense block. Cells reflow from three columns down to two and one as the container narrows, via container queries rather than viewport media queries — the bento adapts to its layout context, not the page's.

Core: .flow, .cluster, .frame, .stat (extras), --color-surface-*, --color-primary*, --color-accent-subtle, --color-surface-inverse

Custom CSS

A small set of demo classes carries the bento layout: a container, a 3-column grid, padded cells, span modifiers (.is-wide, .is-tall) for cells that occupy more than one track, and bleed modifiers (.no-pad, .no-border) for image cells. Container queries handle the column-count reflow. All three demos below share these classes.

<style>
    .demo-bento { container-type: inline-size; }

    .demo-bento-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }

    .demo-bento-cell {
        padding: var(--space-md);
        background: var(--color-surface-raised);
        border: var(--border-width-default) solid var(--color-border);
        border-radius: var(--radius-md);
        min-inline-size: 0;
    }

    .demo-bento-cell.is-wide { grid-column: span 2; }
    .demo-bento-cell.is-tall { grid-row: span 2; }
    .demo-bento-cell.no-pad { padding: 0; overflow: hidden; }
    .demo-bento-cell.no-border { border: none; }

    @container (max-width: 40rem) {
        .demo-bento-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @container (max-width: 24rem) {
        .demo-bento-grid { grid-template-columns: 1fr; }
        .demo-bento-cell.is-wide,
        .demo-bento-cell.is-tall { grid-column: span 1; grid-row: span 1; }
    }
</style>

Basic asymmetric

Neutral surfaces, mixed content. The wide cell sits across two columns; the remaining cells fill the second row at one track each. Drag the resize handle to see the column-count reflow.

What this teaches

Bento combines asymmetric cells, container queries, and mixed content types into a single dense block. The structure stays simple — one grid, a few span modifiers — and the layout carries the visual weight.

3 columns at base


                    $ make build

                    Compiling 47 modules…

                    Tests: 312 passed, 0 failed

                    Deploy: production ✓

"The best code is the code the next person doesn't have to ask about."

— relearned often

<docs-resize>
    <div class="demo-bento">
        <div class="demo-bento-grid">
            <div class="demo-bento-cell is-wide">
                <div class="flow flow-space-xs">
                    <span class="text--2 text-muted text-uppercase">What this teaches</span>
                    <p class="text-1 leading-body">
                        Bento combines asymmetric cells, container queries, and mixed content types into a single dense block. The structure stays simple — one grid, a few span modifiers — and the layout carries the visual weight.
                    </p>
                </div>
            </div>
            <div class="demo-bento-cell">
                <div class="flow flow-space-3xs text-center">
                    <span class="text-4 text-bold text-primary leading-tight">3</span>
                    <span class="text--1 text-muted">columns at base</span>
                </div>
            </div>
            <div class="demo-bento-cell no-pad no-border">
                <div class="frame" style="--frame-ratio: 1 / 1">
                    <img src="https://picsum.photos/seed/brio-bento-basic/400/400" alt=""/>
                </div>
            </div>
            <div class="demo-bento-cell">
                <code class="text--1 text-mono leading-body" style="display: block">
                    $ make build<br/>
                    Compiling 47 modules…<br/>
                    Tests: 312 passed, 0 failed<br/>
                    Deploy: production <span class="text-success">✓</span>
                </code>
            </div>
            <div class="demo-bento-cell">
                <div class="flow flow-space-2xs">
                    <p class="text-0 leading-tight">&#34;The best code is the code the next person doesn&#39;t have to ask about.&#34;</p>
                    <span class="text--1 text-subtle">— relearned often</span>
                </div>
            </div>
        </div>
    </div>
</docs-resize>

With color

Same structure, different rhetoric. Cells use brio's surface tokens (--color-primary, --color-accent-subtle, --color-surface-inverse) for visual weight and hierarchy. The wide announcement cell pulls the eye first; accent-subtle and inverse cells provide secondary emphasis. Three small modifier classes carry the color treatments — reusable across cells.

Available now

Booking new projects for Q3.

Brand identity, websites, print, and signage. Two slots open.

140+ projects shipped

Print · Web · Signage

Mediums we work across, often in the same engagement.


                    ~/projects $ ls -1

                    ✓ brand-system/

                    ✓ annual-report/

                    ✓ wayfinding/

<style>
    .demo-bento-cell.is-primary {
        background: var(--color-primary);
        color: var(--color-on-primary);
        border-color: transparent;
    }
    .demo-bento-cell.is-accent-subtle {
        background: var(--color-accent-subtle);
        border-color: var(--color-accent-border);
    }
    .demo-bento-cell.is-inverse {
        background: var(--color-surface-inverse);
        color: var(--color-text-inverse);
        border-color: transparent;
    }
</style>
<docs-resize>
    <div class="demo-bento">
        <div class="demo-bento-grid">
            <div class="demo-bento-cell is-wide is-primary">
                <div class="flow flow-space-xs">
                    <span class="text--2 text-uppercase" style="opacity: 0.8">Available now</span>
                    <p class="text-2 leading-tight text-bold">Booking new projects for Q3.</p>
                    <p class="text--1" style="opacity: 0.85">Brand identity, websites, print, and signage. Two slots open.</p>
                </div>
            </div>
            <div class="demo-bento-cell">
                <div class="flow flow-space-3xs text-center">
                    <span class="text-4 text-bold text-primary leading-tight">140+</span>
                    <span class="text--1 text-muted">projects shipped</span>
                </div>
            </div>
            <div class="demo-bento-cell no-pad no-border">
                <div class="frame" style="--frame-ratio: 1 / 1">
                    <img src="https://picsum.photos/seed/brio-bento-color/400/400" alt=""/>
                </div>
            </div>
            <div class="demo-bento-cell is-accent-subtle">
                <div class="flow flow-space-2xs">
                    <span class="text-semibold text-accent">Print · Web · Signage</span>
                    <p class="text--1 text-muted">Mediums we work across, often in the same engagement.</p>
                </div>
            </div>
            <div class="demo-bento-cell is-inverse">
                <code class="text--1 text-mono leading-body" style="display: block">
                    <span style="opacity: 0.5">~/projects $</span> ls -1<br/>
                    <span class="text-success">✓</span> brand-system/<br/>
                    <span class="text-success">✓</span> annual-report/<br/>
                    <span class="text-success">✓</span> wayfinding/
                </code>
            </div>
        </div>
    </div>
</docs-resize>

Editorial

Magazine-spread feel. A large pull quote anchors the wide cell; a tall portrait image runs down the right side; smaller "personality" cells sit below. The pull-quote cell uses --color-surface-sunken for a gentler weight than raised, letting the typography do the heavy lifting.

"Most software problems are people problems wearing a technical disguise."

— relearned often

Currently reading A Philosophy of Software Design Third pass — still finding things missed.

Currently building Wayfinding system for a regional museum Print, signage, and a small digital companion.

<style>
    .demo-bento-cell.is-pull-quote {
        background: var(--color-surface-sunken);
        border-color: transparent;
    }
    .demo-bento-cell.is-primary-subtle {
        background: var(--color-primary-subtle);
        border-color: var(--color-primary-border);
    }
</style>
<docs-resize>
    <div class="demo-bento">
        <div class="demo-bento-grid">
            <div class="demo-bento-cell is-wide is-pull-quote">
                <div class="flow flow-space-xs">
                    <p class="text-2 leading-tight" style="font-style: italic">&#34;Most software problems are people problems wearing a technical disguise.&#34;</p>
                    <span class="text--1 text-subtle">— relearned often</span>
                </div>
            </div>
            <div class="demo-bento-cell is-tall no-pad no-border">
                <div class="frame" style="--frame-ratio: 3 / 4; block-size: 100%">
                    <img src="https://picsum.photos/seed/brio-bento-editorial-portrait/400/600" alt=""/>
                </div>
            </div>
            <div class="demo-bento-cell">
                <div class="flow flow-space-2xs">
                    <span class="text--2 text-muted text-uppercase">Currently reading</span>
                    <span class="text-semibold">A Philosophy of Software Design</span>
                    <span class="text--1 text-muted">Third pass — still finding things missed.</span>
                </div>
            </div>
            <div class="demo-bento-cell is-primary-subtle">
                <div class="flow flow-space-2xs">
                    <span class="text--2 text-uppercase text-primary">Currently building</span>
                    <span class="text-semibold">Wayfinding system for a regional museum</span>
                    <span class="text--1 text-muted">Print, signage, and a small digital companion.</span>
                </div>
            </div>
        </div>
    </div>
</docs-resize>

How it works

The shared CSS does three things: a container query context (container-type: inline-size) so the grid responds to its own width, a 3-column grid with span modifiers, and reflow rules at 40rem (down to 2 columns) and 24rem (down to 1 column, span modifiers reset). All three variants use the same layout classes — only the content and the per-variant color modifiers change.

Cell color treatments are short, reusable classes: .is-primary / .is-accent-subtle / .is-inverse in the color variant, .is-pull-quote / .is-primary-subtle in the editorial variant. They reference brio's semantic surface tokens directly, so a theme swap (say, the violet theme in src/css/themes/) re-tints the bento without touching the markup.

Image cells use .no-pad.no-border to bleed flush with the cell edges and the brio .frame composition with a --frame-ratio override for the medium-appropriate aspect (1:1 for square photos, 3:4 for portraits). Container queries operate on the layout regardless of the bento's content or color — the grid reflows from three to two to one column based purely on its own inline size.