# Bento feature grid > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A marketing "features" section for a developer platform ("Tessel"), laid out as a bento grid: six cells of different spans on a strict 4 × 3 grid, on a warm off-white page. Each cell carries a **small live illustration built from CSS only** — a 24-bar chart that grows in, a keycap row that lights up when you press the keys, a real toggle switch, a sparkline that draws itself, an avatar stack with a typing indicator, and a release timeline with one spinning step. Hovering a cell lifts it 2px and brightens its hairline border; nothing else moves. The detail worth copying is the restraint: one accent green, hairlines instead of shadows, and illustrations that behave like the product instead of decorating it. ## Reference behaviour 1. Initial state: header (eyebrow, 36px serif headline with an italic accent phrase, right-aligned lede) above a 4-column × 3-row grid of six cells. The bar chart in cell A grows from the baseline over 700ms, each bar staggered 22ms; the sparkline in cell D draws its stroke over 1.2s then fades in its fill. Everything else is already in its final state. 2. Hover any cell: it translates up 2px, the border changes from `#E2DED4` to `#B8B2A4`, and a faint shadow (`0 8px 20px -14px rgba(28,27,24,.25)`) appears. 160ms. 3. Hover a bar in the chart: it fills with the accent green (the last six bars are already accent, marking the "current window"). 4. Keycap row (cell B): every 3.2s the page animates the chord ⌘ K → G → I by pressing keycaps in sequence (each press lasts 220ms, the "then" steps are 520ms apart). Pressing those keys on a real keyboard lights the matching keycap; holding ⌘/Ctrl keeps the ⌘ cap pressed until key-up. 5. Toggle (cell C): a real `role="switch"` button. Clicking flips `aria-checked`, slides the knob 22px and turns the track green; the "pods" figure changes 6 ↔ 3. 6. Presence (cell E): three dots blink in sequence beside "Noor is editing" on a 1.4s loop. 7. Release train (cell F): steps Build and Test are done (filled green dot with check), Canary shows a spinning ring (1.1s linear), Sign-off is an empty ring. 8. Keyboard: Tab reaches the toggle; a cell containing a focused control shows a green border (`:focus-within`). ## Structure ``` 1280 × 800 ┌────────────────────────────────────────────────────────────────────────┐ │ 48px gutter │ │ TESSEL · PLATFORM lede (34ch, │ │ Everything your team ships, in one grid. right-aligned) │ │ │ │ ┌──────────────────────────┐ ┌────────────────────────────────────────┐│ │ │ A Throughput LIVE │ │ B Keyboard first [⌘][K] then [G][I] ││ │ │ 41,208 req/min │ └────────────────────────────────────────┘│ │ │ ▁▂▃▂▄▅▄▆▇▆█▇ (24 bars)│ ┌─────────────────┐ ┌────────────────────┐│ │ │ │ │ C Auto-scale (o)│ │ D p95 142ms ╱╲╱╲ ││ │ └──────────────────────────┘ └─────────────────┘ └────────────────────┘│ │ ┌──────────────────────────┐ ┌────────────────────────────────────────┐│ │ │ E Presence ●●●● Noor… │ │ F Release train ●─●─◌─○ ││ │ └──────────────────────────┘ └────────────────────────────────────────┘│ └────────────────────────────────────────────────────────────────────────┘ grid: 4 equal columns × 3 equal rows, 16px gap, 48px side padding, 40px bottom A: col 1–2, row 1–2 · B: col 3–4, row 1 · C: col 3, row 2 · D: col 4, row 2 · E: col 1–2, row 3 · F: col 3–4, row 3 ``` - `
`: `

`, `

` with `` for the accent phrase, `

`. Flex row, items aligned to the bottom, padding `40px 48px 24px`. - `

`: CSS grid, `flex: 1`, `min-height: 0` so rows share the remaining height. - Each `
`: `

` (serif), `

` (description), then a `.art` box (`flex: 1`) holding the illustration. Cell A also has a `.tag` pill absolutely positioned top-right. - Illustrations: A — `