Bento Grid

About the Swiss Tech Mono Bento Grid

Feature tiles on the 12-column grid. 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. Tiles are indexed "01 ·", "02 ·" … before their mono eyebrow, the badge is their quiet meta label at the top right, they stagger in one at a time, honour tone, and show the crosshair readout under the pointer (lime cell, crop marks, X/Y tag). A tile with href has one stretched link on its title and an arrow at the top right. Put a small live UI in media (a Chart, Progress bars, a CodeBlock, Badges).

It is part of Swiss Tech Mono. 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.