Bento Grid is a modular UI layout aesthetic inspired by the compartmentalized structure of Japanese bento lunch boxes. It arranges content into asymmetric, rounded-rectangle tiles of varying sizes that interlock like a carefully packed meal.
Asymmetric. Balanced. Modular.
Asymmetric grid compartments -- tiles of different widths and heights arranged in a non-uniform grid that still feels balanced
Generous rounded corners -- radii of 16-24px on every tile, creating a soft, approachable feel
Consistent inter-tile gaps -- uniform spacing between all compartments, like bento box dividers
Contained content blocks -- each tile is self-contained with its own background, padding, and identity
Dense yet breathable -- maximum information density without visual clutter
Treat each tile as an independent module that communicates one idea
Use tile size to signal importance: larger tiles draw more attention
Maintain uniform gap spacing across the entire grid for visual cohesion
Let rounded corners and padding do the separation -- minimize borders
Keep the overall canvas neutral so tile content stands out
Design tiles to be rearrangeable without breaking layout logic
Balance visual weight: distribute colors, images, and density evenly
The structure itself is the aesthetic -- favor clarity over decoration
Warm neutrals with selective accent colors. Nothing garish or competing for attention.
Tiles freely combine icons, charts, text blocks, images, and interactive elements.
Drawn from Japanese design sensibility: muted, sophisticated, with restrained warmth and selective bold accents.
Snow -- Page canvas background
Rice -- Primary tile background
Sesame -- Secondary / alternating tile bg
Nori -- Primary text, headings
Wasabi -- Success states, primary accent
Umami -- Call-to-action accent
Sakura -- Highlights, badges, decorative
Ume -- Secondary interactive elements
Tsuyu -- Info states, links, cool accent
Kombu -- Dark tile backgrounds, footer
:root {
/* Canvas */
--bento-canvas: #f8f7f4;
--bento-tile-primary: #ffffff;
--bento-tile-secondary: #f0eeeb;
/* Text */
--bento-text-primary: #1a1a2e;
--bento-text-secondary: #3d3d56;
--bento-text-tertiary: #6b6b80;
/* Accents */
--bento-accent-green: #4caf82;
--bento-accent-orange: #ff6b35;
--bento-accent-pink: #f472b6;
--bento-accent-yellow: #fcd34d;
--bento-accent-purple: #a78bfa;
--bento-accent-blue: #38bdf8;
/* Layout tokens */
--bento-gap: 16px;
--bento-radius: 20px;
--bento-tile-padding: 28px;
}
Clean and modern sans-serif -- matching the refined, modular aesthetic
Compact and efficient -- text must work within confined tile spaces
Strong weight contrast -- bold headings against light body for in-tile hierarchy
Slightly rounded or humanist -- complementing the soft rounded tile corners
Excellent at small sizes -- labels, captions, and metrics must stay legible in compact tiles
| Font | Style | Best For |
|---|---|---|
| Inter | Screen-optimized, tall x-height | Body text, labels, metrics |
| Plus Jakarta Sans | Geometric, slightly rounded | Headlines, tile titles |
| DM Sans | Clean geometric | Headlines and body |
| Outfit | Geometric, variable weight | Display numbers, metrics |
| Nunito | Rounded terminals | Friendly interfaces |
| Manrope | Semi-condensed | Body text in tight spaces |
| Space Grotesk | Monospace-inspired | Code tiles, dashboards |
Weight 700 -- Headlines
Inter Weight 400 -- Body text, labels, and UI elements. The ideal bento workhorse font.
Weight 600 -- Technical
Inter Weight 400 -- Dashboard-oriented, data-forward bento layouts.
Base grid of 4-6 columns -- tiles span 1-3 columns and 1-2 rows
Uniform gap throughout -- 16px gap acts as the bento box divider
Generous tile padding -- 24-32px internal padding prevents cramped content
No tile-to-edge bleeding -- every tile is inset from page edges
Canvas visible through gaps -- the gap color unifies the composition
Navigation -- Minimal top bar outside the grid, or integrated as a spanning tile
Hero -- Large tile spanning 2-3 columns with headline and CTA, paired with smaller accent tiles
Metrics row -- Equal-sized tiles each showcasing one key number with label
Feature tiles -- Mixed-size tiles with icon, title, and short description
Showcase tile -- Extra-large tile spanning full width for key content
CTA tile -- Accent-colored tile with centered text and button
Footer -- Full-width tile or row of small tiles with links and info
Consistent spacing between every tile, like a bento box divider.
gap: var(--bento-gap) /* 16px */
Radii of 16-24px create an approachable, physical feel.
/* Desktop: full bento experience */
.bento-grid {
grid-template-columns: repeat(4, 1fr);
}
/* Tablet: paired stacking */
@media (max-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile: single column stack */
@media (max-width: 640px) {
.bento-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--bento-gap);
max-width: 1200px;
margin: 0 auto;
padding: var(--bento-gap);
}
/* Tile spanning utilities */
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile--large { grid-column: span 2; grid-row: span 2; }
.tile--full { grid-column: 1 / -1; }
.bento-tile {
background: var(--bento-tile-primary);
border-radius: var(--bento-radius);
padding: var(--bento-tile-padding);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
transition: transform 0.2s ease,
box-shadow 0.2s ease;
}
.bento-tile:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
Buttons use 12px border-radius, consistent with the softer-than-tile rounding for nested elements.
Hover the tile above.
translateY(-2px) + soft shadow
Maintain uniform gap spacing across the entire grid
Use generous rounded corners (16-24px) on every tile
Vary tile sizes intentionally to create visual hierarchy
Keep internal tile padding consistent (24-32px)
Use the canvas background color to unify the composition
Design each tile as a self-contained, modular unit
Balance visual weight by distributing color and imagery evenly
Use subtle hover effects (slight lift, soft shadow) for interactive tiles
Make all tiles the same size -- that defeats the bento purpose
Use sharp corners or zero-radius tiles
Remove the gaps between tiles -- the spacing is essential
Pack too much content into small tiles -- let them breathe
Use heavy borders or outlines to define tiles
Mix wildly different border-radius values across tiles
Ignore responsive behavior -- the grid must reflow gracefully
Add excessive shadows or depth that overwhelms the soft, modular feel
How this aesthetic connects to the wider design landscape.
Start building with the Bento Grid aesthetic. Modular, organized, beautiful.
Back to Top