A 12-column bento grid where every module shares the same radius, the same hairline, and the same surface tone. Variation comes only from module size and content — never from styling. The discipline is the design.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
What sets a pattern apart from a system: a defined grid, divider rhythm, and section composition. Everything below uses the same tokens that power the kitchen sink — applied to a real page skeleton.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.
1---2name: "Bento Quiet"3description: "A 12-column bento grid where every module shares the same radius, the same hairline, and the same surface tone. Variation comes only from module size and content — never from styling. The discipline is the design."4tags: [layout, bento, grid, minimal]5type: pattern6container: centered7content_max_width: 1280px8page_padding: 80px9grid:10 columns: 1211 max_columns: 1212 line_color: transparent13 line_width: 0px14 line_style: solid15 edge_lines: false16sections:17 padding_y: 80px18 divider_color: transparent19 divider_width: 0px20 divider_style: solid21intersections:22 style: none23 color: transparent24 size: 0px25design:26 colors:27 ink: "#1a1d24"28 surface: "#f4f3ef"29 accent: "#3552d4"30 muted: "#6b6f78"31 hairline: "#dcdad4"32 fonts:33 display: "Plus Jakarta Sans"34 body: "Plus Jakarta Sans"35 mono: "JetBrains Mono"36 radius: 16px37 google_fonts_url: "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"38---39 40# Bento Quiet41 42## AI Build Instructions43 44> **Read this section before writing any code.** The rules below45> are non-negotiable. Every value used in the UI must come from this46> file's frontmatter — never substitute, approximate, or invent new47> colors, fonts, radii, or shadows. If a value is missing, ask the48> user before adding one.49 50### 1 · Your role51 52You are building UI for a project that has adopted **Bento Quiet** as its53design system. Treat `PATTERN.md` as the single source of truth.54Your job is to translate the user's product requirements into55components and pages that look like they were designed by the same56person who authored this file.57 58### 2 · Token compliance59 60- Pull every color, font family, radius, shadow, and spacing value61 from the frontmatter at the top of this file.62- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never63 hard-code hex values that bypass the system.64- When a token can be expressed as a CSS variable, declare it once65 in your global stylesheet and reference it everywhere downstream.66- The Google Fonts `<link>` is provided in the Typography section.67 Add it to `<head>` before any component renders.68 69### 3 · Build recipes70 71#### Page skeleton (the layout contract)72 73- Container: `centered`74- Content max-width: `1280px` (typography respects this even when the page is full-bleed).75- Vertical grid: **12 column hairlines** (capped at 12 on wide viewports), drawn with `0px solid transparent`.76- Section padding: `80px` top + bottom inside every section.77- Section divider: `0px solid transparent` between sections.78 79#### Primary CTA80 81Exactly **one** primary CTA per page or section. The pattern's discipline depends on this.82 83- Background: `#3552d4` · Color: `#ffffff`84- Padding: `11px 22px` · Weight: `600`85- Shape: `pill` (radius: `999px`)86 87#### Headlines88 89- Family: `Plus Jakarta Sans` · Size: `clamp(2rem, 3.5vw, 2.875rem)` · Leading: `1.08` · Weight: `600`90- Tracking: `-0.025em`91 92#### Body copy93 94- Family: `Plus Jakarta Sans` · Size: `0.9375rem` · Leading: `1.6` · Color: `#6b6f78`95- Max line length: 60–66 characters. Never let prose stretch the full content width.96 97#### Eyebrows / metadata98 99- Family: `JetBrains Mono` · Size: `0.6875rem` · Letter-spacing: `0.14em`100- Uppercased. Color: `#3552d4`.101 102### 4 · Hard constraints103 104Never do any of the following without explicit instruction from the user:105 106- Introduce a new color, font, radius, or shadow that isn't declared above.107- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).108- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.109- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.110- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.111- Break the layout contract: the column count, divider rhythm, and content max-width are part of the pattern.112 113### 5 · Before you finish — verify114 115Run through this checklist for every screen you produce:116 117- [ ] Every color used appears in the Colors table above.118- [ ] Headlines use the display font; body copy uses the body font.119- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).120- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.121- [ ] Cards and dividers use the declared border + shadow tokens.122- [ ] The page respects the pattern's grid (column count + content max-width).123- [ ] Section dividers use the declared color, width, and style.124- [ ] Exactly one primary CTA per section — never duplicate.125- [ ] No values were invented; if you needed something missing, you stopped and asked.126 127---128 129## Overview130 131Bento Quiet is the disciplined version of the bento grid. A 12-column132underlying grid hosts modules that span 4, 6, 8, or 12 columns wide. Every133module shares exactly the same treatment: the same radius, the same 1px134hairline at low foreground alpha, the same surface tone, the same internal135padding. Variation comes only from module size and content — never from136styling.137 138Most bento layouts fail because each module tries to differentiate itself139with color, fill, or chrome. The result reads as a busy product page. Bento140Quiet inverts that: by holding every module identical, the eye reads the141composition as a single calm surface and the content of each module gets to142do the talking.143 144## When to use it145 146- Feature grids on marketing pages where each module describes one capability.147- Dashboards where parallel widgets need to feel unified.148- Portfolio pages where each module is a project tile.149- About pages with mixed content types (stat, quote, image, link).150 151## When to avoid it152 153- Single-narrative pages — bento implies parallel content. If the page tells154 one story top-to-bottom, use Centered Column or Stacked Hero Bands.155- Documentation, articles, anything long-form.156- Pages where modules genuinely need different visual weight (use a hero157 band followed by a quiet bento instead).158 159## Do160 161- Hold every module to identical radius, border, surface, and padding. The162 uniformity IS the design.163- Use only four module spans on desktop: 4, 6, 8, 12 columns. Anything else164 breaks the grid feel.165- Keep the gutter at 16–24px. Tighter and the modules merge; wider and the166 composition fragments.167- Vary content types freely: a stat module, a quote module, an image module168 — all sharing the same chrome.169 170## Don't171 172- Don't tint individual modules. One surface tone across the whole grid.173- Don't shadow some modules and not others. One shadow rule (or none) across174 the grid.175- Don't introduce a fifth column span. 4/6/8/12 only.176- Don't put bento inside bento. Nested grids destroy the calm.177 178## Notes179 180- The hairline color should be derived from the system foreground at181 6–10% alpha so the modules feel architectural rather than boxed.182- Pair with restrained typography — the bento is the structure; the type183 inside each module should be a half-step quieter than on a single-column184 page so the composition reads as one surface.185- On mobile, collapse to 1 column (12-span). Two-column mobile bento always186 reads as cramped.187 188---189 190## Tokens191 192> Generated from the same source the live preview renders from.193> Treat the values below as the contract — never substitute approximations.194 195### Container196 197| Property | Value |198|----------|-------|199| container | `centered` |200| contentMaxWidth | `1280px` |201| pagePadding | `80px` |202 203### Vertical Grid204 205| Property | Value |206|----------|-------|207| columns | `12` |208| maxColumns | `12` |209| lineColor | `transparent` |210| lineWidth | `0px` |211| lineStyle | `solid` |212| edgeLines | `false` |213 214### Section Dividers215 216| Property | Value |217|----------|-------|218| paddingY | `80px` |219| dividerColor | `transparent` |220| dividerWidth | `0px` |221| dividerStyle | `solid` |222 223### Intersections224 225| Property | Value |226|----------|-------|227| style | `none` |228| color | `transparent` |229| size | `0px` |230 231## Design Identity232 233> This pattern ships with its own typography, color, and CTA tokens.234> Use the values below verbatim — they are the system, not a starting point.235 236### Colors237 238| Token | Value |239|-------|-------|240| ink (primary text) | `#1a1d24` |241| surface (page background) | `#f4f3ef` |242| accent (single moment per page) | `#3552d4` |243| muted (metadata, captions) | `#6b6f78` |244| hairline (rules and dividers) | `#dcdad4` |245 246### Typography247 248Load via Google Fonts:249 250```html251<link rel="preconnect" href="https://fonts.googleapis.com">252<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>253<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">254```255 256| Role | Family |257|------|--------|258| display (headlines) | `Plus Jakarta Sans` |259| body (prose) | `Plus Jakarta Sans` |260| mono (metadata, numerals) | `JetBrains Mono` |261 262### Type Scale263 264| Role | Size | Leading | Weight | Tracking |265|------|------|---------|--------|----------|266| Hero / H1 | `clamp(2rem, 3.5vw, 2.875rem)` | `1.08` | `600` | `-0.025em` |267| Body | `0.9375rem` | `1.6` | `400` | — |268| Eyebrow | `0.6875rem` | — | `600` | `0.14em` |269 270### Primary CTA271 272| Property | Value |273|----------|-------|274| shape | `pill` |275| background | `#3552d4` |276| color | `#ffffff` |277| padding | `11px 22px` |278| fontWeight | `600` |279| radius | `999px` |280 281> One CTA per page. The pattern's discipline depends on this — never duplicate.282 283---284 285## Reference Implementation286 287Copy-paste-ready HTML + CSS that renders this pattern with the exact token288values declared above. Theme the colors against your system's hairline tone.289 290### HTML291 292```html293<section class="bento">294 <article class="cell cell--6">295 <p class="eyebrow">01 — Stat</p>296 <p class="num">2.4M</p>297 <p class="cap">Transactions cleared this quarter.</p>298 </article>299 300 <article class="cell cell--6">301 <p class="eyebrow">02 — Quote</p>302 <blockquote>"The clearest financial reporting tool we have used."</blockquote>303 <p class="cap">— CFO, mid-market client.</p>304 </article>305 306 <article class="cell cell--4">307 <p class="eyebrow">03 — Feature</p>308 <h3>Single audit trail.</h3>309 </article>310 311 <article class="cell cell--4">312 <p class="eyebrow">04 — Feature</p>313 <h3>Real-time settlement.</h3>314 </article>315 316 <article class="cell cell--4">317 <p class="eyebrow">05 — Feature</p>318 <h3>Composable export.</h3>319 </article>320 321 <article class="cell cell--12">322 <p class="eyebrow">06 — Wide</p>323 <h3>One full-width module closes the composition.</h3>324 </article>325</section>326```327 328### CSS329 330```css331:root {332 --max: 1280px;333 --gutter: 20px;334 --pad: 28px;335 --radius: 14px;336 --hairline: rgba(15, 15, 15, 0.08);337 --surface: transparent;338}339 340.bento {341 max-width: var(--max);342 margin: 0 auto;343 padding: 80px 24px;344 display: grid;345 grid-template-columns: repeat(12, 1fr);346 gap: var(--gutter);347}348 349/* Every cell shares the same chrome — the discipline IS the design. */350.cell {351 background: var(--surface);352 border: 1px solid var(--hairline);353 border-radius: var(--radius);354 padding: var(--pad);355 min-height: 200px;356 display: flex;357 flex-direction: column;358 justify-content: space-between;359}360 361/* Only four spans exist on desktop. */362.cell--4 { grid-column: span 4; }363.cell--6 { grid-column: span 6; }364.cell--8 { grid-column: span 8; }365.cell--12 { grid-column: span 12; }366 367.eyebrow {368 font-family: ui-monospace, "JetBrains Mono", monospace;369 font-size: 0.6875rem;370 text-transform: uppercase;371 letter-spacing: 0.12em;372 opacity: 0.55;373}374.num { font-size: 3rem; line-height: 1; font-weight: 600; }375.cap { font-size: 0.875rem; opacity: 0.7; }376.cell h3 { font-size: 1.25rem; line-height: 1.3; }377.cell blockquote { font-size: 1rem; line-height: 1.5; }378 379/* Mobile: collapse to a single column. Never two. */380@media (max-width: 768px) {381 .cell--4, .cell--6, .cell--8, .cell--12 {382 grid-column: span 12;383 }384 .cell { min-height: 0; padding: 24px; }385}386```387 <section class="bento"> <article class="cell cell--6"> <p class="eyebrow">01 — Stat</p> <p class="num">2.4M</p> <p class="cap">Transactions cleared this quarter.</p> </article> <article class="cell cell--6"> <p class="eyebrow">02 — Quote</p> <blockquote>"The clearest financial reporting tool we have used."</blockquote> <p class="cap">— CFO, mid-market client.</p> </article> <article class="cell cell--4"> <p class="eyebrow">03 — Feature</p> <h3>Single audit trail.</h3> </article> <article class="cell cell--4"> <p class="eyebrow">04 — Feature</p> <h3>Real-time settlement.</h3> </article> <article class="cell cell--4"> <p class="eyebrow">05 — Feature</p> <h3>Composable export.</h3> </article> <article class="cell cell--12"> <p class="eyebrow">06 — Wide</p> <h3>One full-width module closes the composition.</h3> </article></section>A 1/3 + 2/3 vertical split with a single hairline running the full page height. The narrow column carries metadata and eyebrow type; the wide column carries the lead. Classic magazine architecture for landing pages.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.
Full-bleed horizontal sections stacked floor-to-ceiling, alternating between plain surface and a diagonal-stripe band. No vertical grid — the rhythm comes from the section heights and the hard hairline between them.
The structure does the talking. Typography, spacing, and one accent — nothing else competing for attention.