# Bento Box Grid > Everything is a tile: a modular, asymmetric grid of rounded boxes in mixed sizes and a few flat tints, held together by one tight, even gutter. - Nickname: Bento tiles - Also called: Bento UI, Bento layout, Modular tile grid - Category: Minimal & Clean - Moods: Techy, Friendly, Bold, Calm - Industries: SaaS, Startup & Tech, AI Products, Creative & Portfolio, Fintech & Banking - Style page: https://uilingo.dev/styles/bento-box-grid/ Bento Box Grid organises a page like a Japanese lunch box: content is split into self-contained rectangular tiles of different spans (2×2, 2×1, 1×1) packed into a 4-column grid with one consistent 14px gap. Tiles are flat — white with a 1px hairline, or filled with a small set of tints (ink, lime, lilac, peach, sky) — and each holds exactly one idea: a stat, a feature, a chart, a quote. A tiny mono index label in the corner and the zig-zag rhythm of wide and square tiles make the structure itself the decoration. ## Best for - SaaS feature overviews and changelogs - Personal portfolios and link-in-bio pages - Dashboards that mix KPIs, charts and lists - Product launch pages with many small benefits ## Avoid for - Long-form reading and documentation - Linear step-by-step flows (checkout, forms) - Content that has one dominant message ## Do - Use a 4-column grid with spans of 1, 2 and 2×2 and fill every row - Keep one 14px gutter everywhere; tiles 22px radius, large container panels 28px - Use ink plus four flat tints (lime, lilac, peach, sky) and at most 3 tinted tiles per section - Give each tile one job: a number, a chart, a feature or a quote ## Don't - Don’t leave holes in the grid — rebalance spans instead - Don’t mix gap sizes, or radii between sibling tiles in the same grid - Don’t add heavy shadows or gradients to tiles - Don’t put long paragraphs inside small tiles ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Bento Box Grid" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Everything is a tile: a modular, asymmetric grid of rounded boxes in mixed sizes and a few flat tints, held together by one tight, even gutter. Design keywords: modular tiles, mixed tile sizes, asymmetric grid, one tight even gap, rounded boxes, one idea per tile, tinted tiles, corner index labels. ## Visual language A modular page built entirely from self-contained rounded tiles packed into an asymmetric 4-column grid, like compartments in a bento lunch box. Tiles come in mixed spans (2×2, 2×1, 1×1), share one tight 14px gutter and a 22px tile radius, and each holds exactly one idea — a number, a feature, a chart, a quote. Fills are flat: white tiles with a 1px #E2E2DC hairline on a warm #F3F3EF dotted canvas, plus a few tinted tiles (ink #18181B and four tints: lime #D7F77A, lilac #E3DEFF, peach #FFE0CC, sky #D3ECFF). Small mono index labels (01, 02…) in tile corners make the grid itself the decoration. ## Signature details (must be visible) - One 14px gutter everywhere — between hero tiles, features, stats, dashboard widgets, footer columns and mobile tiles - Radius ladder: tiles 22px; large container panels (showcase, CTA, pricing cards, form aside, art panels) 28px; inner controls (buttons, inputs, mock cards, icon wells, trust items) 14px; badges and logo square 10px. Sibling tiles in one grid always share the same radius - Spans are columns × rows on a 4-column grid with grid-auto-flow: dense. Features: tile 1 = 2×2 ink, tiles 2–3 = 1×1, tiles 4–6 = 2×1. Three full rows, no holes - Tint fills, declared as extra properties next to the tokens: --t-ink #18181B (white text), --t-lime #D7F77A, --t-lilac #E3DEFF, --t-peach #FFE0CC, --t-sky #D3ECFF (tints carry #18181B text). #C6F432 (secondary token) is only for eyebrows, the logo, solid badges, the bento-glyph square and the active tab-icon square, never for tile fills - Tint budget: palette = ink + four tints (lime, lilac, peach, sky). Use at most 3 tinted tiles and 1 ink tile per section; the rest are white - Mono corner index labels: DM Mono 0.72rem, 55% opacity, top-right of every bento tile and every stat tile (01, 02, 03…) - Faint 20px dot grid on the canvas (#18181B at ~9%) - Big ink tiles carry a mini 2×2 'bento glyph' of rounded squares (#C6F432, ink-tint, lilac) built with one pseudo-element and box-shadow copies - Sora 700 headings with −0.035em tracking, DM Sans body; Thai in K2D / Anuphan. DM Mono is for Latin labels and the corner index numerals only. Thai eyebrows, card titles, table headers and badges switch to Anuphan 0.82–0.9rem, 600, with no caps or tracking ## Design tokens — use these exact values Colours (light mode): - background #F3F3EF - surface #FFFFFF - surface-2 #EAEAE4 - text #18181B - text-muted #5B5B63 - primary #18181B (text on it #FFFFFF) - secondary #C6F432 (text on it #18181B) - accent #6D5DF6 - border #E2E2DC - success #2F8F4E · warning #B86E00 · danger #D93F3F - chart series #6D5DF6, #18181B, #A3D13A, #FF9B6A, #B9B2FA Radius: sm 10px, md 14px, lg 22px, xl 28px, pill 999px Border width: 1px Shadows: sm `none`, md `0 1px 2px rgba(24,24,27,0.05)`, lg `0 12px 32px -12px rgba(24,24,27,0.18)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.95 density Motion: 180ms cubic-bezier(.2,.8,.2,1) ## Typography (Latin + Thai) - Headings: Sora 600/700 with Thai fallback K2D 600/700 - Body: DM Sans 400/500/700 with Thai fallback Anuphan 400/500/700 - Mono: DM Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&family=K2D:wght@600;700&family=Anuphan:wght@400;500;700&display=swap - CSS stacks: heading `"Sora", "K2D", system-ui, sans-serif`; body `"DM Sans", "Anuphan", system-ui, sans-serif`; mono `"DM Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Anuphan — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.5rem, 5vw, 4.25rem), heading weight 700, heading tracking -0.035em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: K2D has the same squared, techno-geometric construction as Sora; Anuphan is a loopless modern sans with the open, low-contrast texture of DM Sans. ## Components - Tile/card: white, 1px #E2E2DC border, 22px radius, shadow md 0 1px 2px rgba(24,24,27,.05). States: tile hover = translateY(-2px) + shadow lg 0 12px 32px -12px rgba(24,24,27,.18); focus-visible = 2px #6D5DF6 outline, 2px offset - Card titles in dashboards: mono uppercase 0.78rem muted labels (Thai: body font, no caps, 600) - Buttons: 14px radius, 700 weight; primary = ink fill / white text (hover shifts slightly toward violet #6D5DF6 and lifts 1px); secondary = white tile with hairline; pressed = translateY(0) and fill 10% darker - Nav: a floating white tile bar, 58px tall, 22px radius (a rounded tile, not a full pill), 1px #E2E2DC border, shadow md, lime #C6F432 10px-radius logo square - Inputs: white, 1px hairline, 14px radius; focus = violet #6D5DF6 border + 4px 18% violet ring; selected radio card turns lime - Badges: 10px-radius mono labels on #EAEAE4 (Thai: Anuphan, no caps); solid badge = #C6F432 - Stats: 4 tiles — ink, white, sky, white — each 150px tall, value top / label bottom, mono corner index top-right - FAQ: two-column grid of tiles, the open question spans both columns as an ink tile - Dashboard: sidebar and topbar are floating tiles inset by the gutter; KPI tiles alternate ink, lime, white, lilac; one 4-wide widget sky (donut centred vertically, 140px), one peach; widget order zig-zags 4+8 / 8+4 / 4+8 - Charts: violet primary line 3px, dotted 2/6 gridlines, 6px-radius bars, heatmap cells with 5px radius in violet - Mobile onboarding: the hero glyph sits in a 140px ink tile (22px radius) with a #C6F432 icon, over the lilac art panel with lime and peach inner tiles ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: a bento grid where the headline is the largest tile and stats/features fill the others. Navigation: pill style. Sections in order: hero → logos → features → stats → showcase → testimonials → pricing → faq → cta. Feature section as bento. Nav is the floating tile bar. Hero bento = copy tile 2×2 (eyebrow, headline, lead, two CTAs), lime 1×1 stat tile, lilac 1×1 stat tile, ink 2×1 feature tile with the bento glyph. No separate product mock in the hero. Section headers are bare text on the dotted canvas (not tiles). Logos sit in one long white tile. Features form the hole-free bento above; stats = 4 tiles: ink, white, sky, white; the showcase is a large white 28px panel holding a grey inner tile with the product mock; testimonials = 3 equal tiles with the middle one lilac; pricing = 3 tiles with the middle one ink (28px radius); FAQ as a two-column tile grid; CTA as a lime 28px 2-column panel with the email form in an inner white tile; even footer columns are tiles. Keep every gap 14px. ## Content Use realistic product copy (fictional brand) suited to: SaaS feature overviews and changelogs. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use a 4-column grid with spans of 1, 2 and 2×2 and fill every row - Keep one 14px gutter everywhere; tiles 22px radius, large container panels 28px - Use ink plus four flat tints (lime, lilac, peach, sky) and at most 3 tinted tiles per section - Give each tile one job: a number, a chart, a feature or a quote ## Don't - Don’t leave holes in the grid — rebalance spans instead - Don’t mix gap sizes, or radii between sibling tiles in the same grid - Don’t add heavy shadows or gradients to tiles - Don’t put long paragraphs inside small tiles - Uneven gaps, different radii between sibling tiles, or holes in the grid — rebalance spans so every row is full - Heavy shadows, gradients or glass on tiles (pushes toward glassmorphism or Apple-style bento) - Thick black outlines and offset shadows (that is neubrutalism) - More than the four tints (lime, lilac, peach, sky), more than 3 tinted tiles per section, #C6F432 as a tile fill, or saturated fills behind body text - Long paragraphs or several ideas inside one small tile - A plain 3-equal-column card grid — the asymmetry of spans is the identity ## Stack notes One self-contained HTML file with a