Interface systems Illustrative reference Copy-ready LLM prompt

Bento Grid

Varied but aligned tiles turn mixed content, status, and actions into a compact modular overview.

Original project dashboard arranged as a varied bento grid of priority, progress, activity, and team tiles.
Original illustrative recreation—not a generated result or proprietary product screenshot. Original HTML/CSS illustration

Copy-ready LLM prompt

Bento Grid: Copy-ready LLM prompt

Use this as a starting brief, then adapt the content, brand, and interaction requirements for your project.

Design a responsive bento-grid interface using varied tile spans, strict alignment, concise content blocks, and a clear visual hierarchy. Give every tile one primary purpose, use color and scale sparingly, and define hover, focus, selected, loading, empty, and error states. On narrow screens, preserve meaning with a deliberate linear reading order rather than shrinking the desktop grid.

Recognition traits

How to recognize this style

Varied but aligned tiles turn mixed content, status, and actions into a compact modular overview.

  1. 01 Modular tiles
  2. 02 Mixed spans
  3. 03 Strong alignment
  4. 04 Compact summaries