Bento is a layout archetype. It is a way of dividing a page, not a way of finishing one, which means it composes with a surface register rather than being one. Below is a single arrangement rendered three times. The markup is identical in all three, and so is every rule in components/grid.css. The only thing that differs between them is which surface tokens are in scope.
Each frame carries a data-surface attribute, and
tokens/tokens.css redefines the
surface tokens under it. Gap, column count, row height and every span
utility are untouched by those blocks. If the layout depended on the
look, one of the three below would break.
A warm neutral ground, white cells a step above it, a hairline that exists only so the cell has an edge on a washed-out screen, and a 20px corner. The gap is doing the compartment work, which is why the border is allowed to be almost invisible.
Sessions, week to date
Live1.28M
Up 4.1% against the four week mean.
Median TTFB
184ms
Down 41ms since the edge move.
Signup starts
9,412
Counted at first keystroke.
Completion
61.8%
Of starts reaching a verified address.
Board load, p95
2.9s
Cold cache, 38 metrics, no sampling.
Metrics tracked
38
Four services and one marketing site.
Weekly readers
214
Opened the board at least once.
Twenty two tokens moved. The hairline became a two pixel ink border, the soft elevation became a hard offset with no blur, the pale tints became saturated flats, and the corner came in from 20px to 8px. The compartments now announce themselves with an edge rather than with space, and the mosaic is the same mosaic.
Sessions, week to date
Live1.28M
Up 4.1% against the four week mean.
Median TTFB
184ms
Down 41ms since the edge move.
Signup starts
9,412
Counted at first keystroke.
Completion
61.8%
Of starts reaching a verified address.
Board load, p95
2.9s
Cold cache, 38 metrics, no sampling.
Metrics tracked
38
Four services and one marketing site.
Weekly readers
214
Opened the board at least once.
The corner went to zero, every shadow went to none, the three tints collapsed into one grey, and the accent became black. This is the reading that tests the claim hardest, because a bento with square corners and no elevation is the case people mean when they say a layout has no register of its own. The compartments still read, and they read off the gap alone.
Sessions, week to date
Live1.28M
Up 4.1% against the four week mean.
Median TTFB
184ms
Down 41ms since the edge move.
Signup starts
9,412
Counted at first keystroke.
Completion
61.8%
Of starts reaching a verified address.
Board load, p95
2.9s
Cold cache, 38 metrics, no sampling.
Metrics tracked
38
Four services and one marketing site.
Weekly readers
214
Opened the board at least once.
What changed: the two grounds and the sunk surface, both inks, the primary, the accent with its ink, its muted ink and its rule, three tints, border width and color, three shadow steps, three radii, and one type token per register. Twenty two declarations in the hard block and twenty three in the quiet one. Every one of them is a surface token, and all of them live in one file.
What did not change: the arrangement class, the seven cells and their order, the gap, the column counts at all three breakpoints, the row height, the span utilities, and the reflow. Resize this page and all three boards collapse to two columns and then to one at the same widths, in the same order, with the same cell holding the headline number.
That is the practical argument for treating bento as a layout choice made separately from a surface choice. Picking the mosaic does not pick a look, and a repo that ships the mosaic owes you the surface tokens as a replaceable part rather than as the product.
Back to the demo. Mullion is a fictional product; this page exists to show a theme.