Bento Grid

About the Noir Aurora Bento Grid

Feature tiles on a 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 lit night cards that stagger in and carry the sky spotlight; each takes its column's light (ice on the left, aurora in the middle, iris on the right). A tile's media is its stage above the copy (a mock, a chart, LiveSync); a tile without media has no stage and stays compact, its copy at the foot (beside taller tiles it stretches to the row and keeps the copy aligned with theirs). Give most tiles media; for a set of text-only items use FeatureGrid. badge shows as a mono accent label after the title. Tiles honour tone, and a tile with href has one stretched link on its title.

It is part of Noir Aurora. The style’s 91 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.