Bento Grid vs Neo-Swiss
Both are grids, both are quiet, and both look organised from a distance. The difference is what the grid is for: packing modules, or placing text at an offset.
Short answer: Bento's grid holds filled tiles of different sizes. Neo-Swiss's grid holds unfilled text blocks placed asymmetrically — a headline across nine columns, a standfirst starting at seven, deliberately overlapping.
What actually separates them
Put the two previews side by side and the first thing you notice is that one has colour fields and the other has none at all. Bento's tiles are white, mint and dark ink; Neo-Swiss is white with a single red, and the red appears twice on the whole page.
The second difference is what the grid is asked to do. Bento uses columns to size containers — a tile spans two, the gap stays at 16px, the composition is the arrangement of boxes. Neo-Swiss uses columns to place text at horizontal offsets, so the interest is in where a line starts, not in how big a box is.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Bento Grid | Neo-Swiss |
|---|---|---|
| Grid | 4 columns, spans of 1 or 2 | 12 columns, spans of 4 to 12 |
| Fill | ● Three tile colours including a dark one | White, plus one red used twice |
| Corner radius | 10 to 18px | 0 everywhere |
| Gap | 16px, unchanged at every size | 24px, with text placed inside columns rather than between |
| Typeface | Inter | Helvetica Neue |
| Overlap | None — tiles abut | ● Headline and standfirst share columns 7 to 9 |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Bento Grid | Neo-Swiss |
|---|---|---|
| Grid | grid-template-columns: repeat(4, 1fr) |
grid-template-columns: repeat(12, 1fr) |
| Headline span | tile spans 2 columns |
grid-column: 1 / span 9 |
| Standfirst | tile spans 2 columns |
grid-column: 7 / span 5 |
| Fill | background per tile |
background: #ffffff only |
When each one wins
Bento Grid wins when
- The content is a set of items with different importance and no natural reading order
- You have real material for each tile — a number, a screenshot, a short claim
- The page is a summary or an index rather than an argument
Neo-Swiss wins when
- The content is mostly text that has to be read in order
- You want the layout to look composed without adding colour or images
- The brand is institutional and the page is a statement rather than a catalogue
Steering a model to one or the other
Both prompts mention a grid, which is why models produce something similar for each. The distinguishing instruction is what goes inside the cells: for Bento, name the fills and the span pattern; for Neo-Swiss, forbid fills entirely and specify the column spans of the headline and the standfirst. A Neo-Swiss prompt with no spans will come back as a centred single column, and a Bento prompt with no fills will come back as an ordinary card grid.