Compartments of mixed size
Tiles span one, two or more cells. Big tiles hold the headline, small tiles hold facts.
Content packed into tidy compartments of different sizes, like a Japanese lunch box. Each tile holds one idea and the layout shows how they relate.
Bento layouts summarise a product in one screen. A strict grid holds tiles of different sizes, and the size of each tile says how important it is.
Tiles span one, two or more cells. Big tiles hold the headline, small tiles hold facts.
Gaps of 8 to 16 pixels keep the box feeling packed and orderly.
Each tile shows a single stat, feature or image. Nothing spills across tiles.
A few tiles get bold fills to lead the eye, while the rest stay white or neutral.
The name comes from lunch, but the layout comes from dashboards and product keynotes.
Japanese lunch boxes divide food into compartments of different sizes, arranged for balance and variety.
Windows Phone 7 introduces a home screen of square and wide tiles, a direct ancestor of bento layouts.
Analytics products arrange widgets of mixed size on a grid, training users to scan tiles.
Tech keynotes and product pages sum up features in bento slides, and the term spreads through design communities.
Portfolios, link-in-bio pages and landing pages adopt bento grids, helped by CSS Grid's span and dense packing.
Bento motion is quick and orderly. Tiles pop into their compartments in sequence, like someone packing a box.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
One screen shows the whole feature set, from hero image to small specs.
Designers put projects, links and stats into a single scannable grid.
Health, finance and productivity apps group metrics into mixed-size tiles.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
A neutral canvas with white tiles, plus three soft fills and black to create hierarchy. Tap a swatch to copy its hex value.
:root{
--canvas: #EDEEF1;
--tile-white: #FFFFFF;
--ink: #121418;
--lime: #D4F36B;
--lavender: #D8D0FF;
--peach: #FFD6C2;
}One neo-grotesque family with tight tracking on big numbers, and its mono sibling for labels and data.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Geist",system-ui,sans-serif;
--font-b: "Geist",system-ui,sans-serif;
--font-m: "Geist Mono",ui-monospace,monospace;
--fs-d: clamp(39px, 9vw, 76px);
--fs-1: 39.1px; --fs-2: 31.2px;
--fs-3: 25.0px; --fs-4: 20.0px;
--fs-body: 16px; --fs-sm: 12.8px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 700;
letter-spacing: -.035em;
text-transform: none;
line-height: 1;
}
/* fonts: Geist and Geist Mono */A 4-column grid with spanning tiles. On phones it collapses to 2 columns while keeping the wide tiles wide.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>Tiles span columns and rows on a 4-column grid.
/* .bento {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(140px,auto); gap:12px} .w2{grid-column:span 2} .h2{grid-row:span 2} */
<div class="bento"><div class="w2 h2">2×2</div><div>1×1</div><div>1×1</div><div class="w2">2×1</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Large radius, hairline border, no shadow. Tiles sit flat on the canvas.
:root {
--radius: 24px;
--radius-sm: 14px;
--bw: 1px;
--shadow: none;
--shadow-sm: none;
--gap: 12px;
--pad: 24px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Bento Grid kit · Anti-Boring */
:root{
--bg:#EDEEF1;
--surface:#FFFFFF;
--surface2:#E3E5EA;
--fg:#121418;
--muted:#5B6070;
--accent:#121418;
--accent-fg:#FFFFFF;
--accent2:#D4F36B;
--accent2-fg:#121418;
--border:#DDE0E6;
--bw:1px;
--radius:24px;
--radius-sm:14px;
--shadow:none;
--shadow-sm:none;
--font-d:"Geist",system-ui,sans-serif;
--font-b:"Geist",system-ui,sans-serif;
--font-m:"Geist Mono",ui-monospace,monospace;
--h-weight:700;
--h-track:-.035em;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:12px;
--pad:24px;
--focus:rgba(18,20,24,.25);
--ok:#1E7A4D;
--warn:#8A5A00;
--danger:#C0262D;
--info:#3A4BD8;
--field-bg:var(--surface);
--field-shadow:none;
--media:linear-gradient(135deg,#D8D0FF,#FFD6C2);
--code-bg:#121418;
--code-fg:#E3E5EA;
--btn-case:none;
--btn-track:0;
--btn-weight:500;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:12.8px;
--fs-body:16px;
--fs-4:20.0px;
--fs-3:25.0px;
--fs-2:31.2px;
--fs-1:39.1px;
--fs-d:clamp(39px, 9vw, 76px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-radius:999px;border-color:var(--accent)}
.btn-2{border-color:transparent}
.btn-ghost{border-color:var(--border)}
.card{transition:transform .2s}
.badge{border:0;font-family:var(--font-m);font-weight:500}
.alert{border-left-width:1px;display:flex;gap:.6em;align-items:baseline}
.alert b{flex:none;padding:.15em .6em;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,#fff)}
.tabs{border:0;background:var(--surface2);padding:4px;border-radius:999px;display:inline-flex}
.tab{border:0;border-radius:999px;margin:0}
.tab[aria-selected="true"]{background:#fff}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(140px,auto);gap:var(--gap)}
.bento>*{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--radius);padding:var(--pad);overflow:hidden;position:relative}
.bento .w2{grid-column:span 2}.bento .h2{grid-row:span 2}
@media (max-width:760px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .w2{grid-column:span 2}}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#0F1113;
--surface:#1A1D21;
--surface2:#22262B;
--fg:#F1F2F4;
--muted:#9CA2AE;
--border:#2A2E34;
--accent:#F1F2F4;
--accent-fg:#0F1113;
--code-bg:#000;
}
html.alt .tab[aria-selected="true"]{background:#2A2E34}html.alt .tl li{background:#1A1D21}html.alt .t-lime,html.alt .t-lav,html.alt .t-peach,html.alt .traits .card:nth-child(2),html.alt .traits .card:nth-child(4){color:#121418}html.alt .alert b{background:rgba(255,255,255,.08)}html.alt .stage i{border-color:#2A2E34}html.alt .stage i:nth-child(3){background:#1A1D21}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a personal productivity app in an authentic Bento Grid style.
Palette: Canvas #EDEEF1, Tile white #FFFFFF, Ink #121418, Lime #D4F36B, Lavender #D8D0FF, Peach #FFD6C2.
Typography: Geist 700 to 800 with tight tracking (-0.035em) for headings and big numbers, Geist 400 for body, Geist Mono for labels.
Layout: The hero itself is a 4-column bento grid: a 2x2 title tile with headline, text and buttons; a lime stat tile; a black stat tile; a 2x1 lavender chart tile. Gap 12px.
Signature details: White tiles with 1px hairline borders and 24px radius on a light gray canvas. Only three or four tiles get bold fills. No shadows.
Components: Pill buttons (black primary, lime secondary), segmented pill tabs, mono badges, alerts with pill-shaped labels.
Motion: Tiles pop in with a 200ms stagger and a slight overshoot.
Avoid: drop shadows, random tile sizes, dense text inside tiles, full-bleed gradients, more than four accent fills.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Size should follow importance. Arbitrary spans make the grid feel like Tetris.
A tile with a title, paragraph, list and button is a card, not a bento compartment.
Spans collapse on phones. Check that tiles still read in a sensible order.
If every tile has a fill, nothing leads. Keep most tiles neutral.