← Back
Best viewed on a desktop. Please switch to a larger device.

Bento
Grid

A mosaic of variable-size tiles arranged on a shared grid - each cell a self-contained unit of information. Popularised by Apple product pages and SaaS dashboards, Bento brings visual rhythm and hierarchy to complex content.

LIVE DASHBOARD
4,821
Active users right now
Revenue
$48.2k
↑ 8.4% vs last month
⚡
1.4ms
LATENCY
✓
99.9%
UPTIME
75%
Storage
48.2 / 64 GB
01

Cell Anatomy

Every bento cell is a self-contained unit - label, primary data, supporting context. Cells share a gap and radius system.

📊
Stat Cell
Large number · label · delta
Single metric at a glance
Progress Cell
Multi-metric progress bars
Comparison at a glance
Chart Cell
Mini bar or sparkline
Trend over time, compact
HEADLINE
Content Cell
Title + body text + action
Spans multiple columns
02

Layout Patterns

Four canonical arrangements. All use the same gap and border-radius - what changes is the column-span recipe.

Pattern A - Feature + Satellite
FEATURE
stat
stat
stat
stat
grid-template-columns: 2fr 1fr 1fr
Feature cell: column-span 1, row-span 2
Pattern B - Banner Header
WIDE HEADER CELL
A
B
C
grid-template-columns: repeat(3, 1fr)
Header: column-span 3
Pattern C - Asymmetric Anchor
A
B
ANCHOR
WIDE
grid-template-columns: 1fr 1fr 2fr
Anchor: column 3, row-span 2
Pattern D - Equal Grid
1
2
3
4
5
6
grid-template-columns: repeat(3, 1fr)
All cells equal weight
03

Type System

Inter for all UI text. JetBrains Mono for labels, data, and metadata. Hierarchy through weight - not size alone.

Cell Number 4,821 48px · Inter 700
−0.04em tracking
Cell Title Revenue Overview 22px · Inter 600
Cell Label MONTHLY REVENUE · Q1 2026 10px · JetBrains Mono
+0.1em tracking
Delta / Status ↑ 8.4%  ↓ 2.1% 11px · JetBrains Mono
Colour = direction
Body / Sub Supporting text within a cell - kept to 2–3 lines maximum. Inter Light at a warm grey provides context without competing with the primary data point. 13px · Inter 300
1.75 line-height
04

UI Components

Buttons
Form Fields
Toggles
Tags
Design Active Featured Beta
05

Navigation

Rounded Navbar
06

Full Dashboard Showcase

A real-world 12-column bento dashboard - mixed cell sizes, each with a distinct data type and visual treatment.

LIVE
12,481
Monthly active users
↑ 14.2% vs last month
Revenue
$48.2k
↑ 8.4%
Uptime
99.9%
30d avg
Latency
1.4ms
↓ 0.3ms
Requests · 7d
⭐
4.9
RATING
🚀
Launch Checklist
v2.0 ships in 3 days
On Track 12 items
A
B
C
12 online
Storage
Used 48.2 / 64 GB
New
FEATURE
AI-powered insights
Automatic anomaly detection and forecasting - now available on all Pro plans.
Pro New
Upgrade
Unlock advanced analytics
07

Core Principles

01 · GRID

Variable Spans, Fixed Gap

Cells span 1–3 (or more) columns and rows freely - but the gap between every cell is always the same. This single constraint creates visual cohesion across any layout.

02 · CELL

One Idea Per Cell

Each cell contains exactly one primary concept - a metric, a chart, a CTA. Bento breaks down information density by physical separation, not by hierarchy alone.

03 · RADIUS

Consistent Border Radius

All cells share the same border-radius token (16px by default). This creates visual kinship across cells of different sizes and colours - the grid reads as a unified object.

04 · COLOUR

Accent to Direct Attention

Most cells are neutral surfaces. One or two cells use accent fills or glows to signal importance. The contrast between neutral and accented cells creates natural visual hierarchy.