Contemporary screen interpretation
Bento Box
A layout pattern using differently sized cards within a shared grid. The hierarchy comes from card size and grouping rather than from a particular color palette.
What defines it
- Modular cards
- Shared gutters
- Unequal emphasis
What it asks of the project
- Reading & layout
- Compact spacing for scanning
- Visual emphasis
- quiet · structural
- Implementation
- Allow time for a coherent decorative or image layer and responsive checks.
- Images & assets
- Choose a useful preview or summary for each card.
Color in use
A product overview with one demonstration, two capabilities, and a compact release note.
Accent labelOpaque text/surface: 19.26:1 · Text/accent: 5.57:1.
These pairs meet the normal-text minimum; check other surfaces separately.
Context
Notice how different image and text blocks fit a shared grid. Check which block leads each composition and how the smaller blocks support it.
View collected reference imagesBuild it
- Choose one lead card
- Give each card a single purpose
- Define the mobile reading order before adding spans
Typography
Keep one sans-serif family across cards. Use size and weight to distinguish the lead card from supporting information.
Watch out for
Making everything a card, cropping essential content to fixed heights, or changing the reading order on mobile.
A working interpretation
Original CSS composition with the same content and controls used in every direction. Image-led styles need additional artwork for their full expression.
Open the full example →Hand it to an agent
Point your agent at this guide, or save the files below.
Check the result
- Confirm: choose one lead card.
- Confirm: give each card a single purpose.
- Confirm: define the mobile reading order before adding spans.
- Review specifically for: Making everything a card, cropping essential content to fixed heights, or changing the reading order on mobile.