Bento Grid

About the Neo-Brutal Bento Grid

Feature tiles on one ruled sheet of 12 columns (cells 2 px apart over ink, one outline, one outer radius). Each tile opens with a mono label row (eyebrow bold on the left, badge as plain meta on the right, hidden on phones), then a type-display text-display-md title, text and the media growing to the bottom. Tiles fill by tone: default card stock, muted paper, accent cobalt, inverse ink, tint-1 volt, tint-2 lilac, tint-3 tomato, tint-4 cobalt-100 (one cobalt tile per sheet). Each tile sets its width (cols) and height (rows) at lg; at md tiles of 7 columns and more take the full row and the rest half; phones show one column. A wide one-row tile (cols ≥ 5) with media lays its text and media side by side at lg. Tiles stagger in and show the dot lens over their media; a tile with href presses and has one stretched link on its title; tiles without stay flat.

It is part of Neo-Brutal. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.

To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.