THE FULL SKILL
This is the text the agent reads before it designs.
Essence
Named after the Japanese lunch box: compartments of different sizes composed into one neat rectangle. In UI it comes from Apple-style keynote and product-page slides, Microsoft's tiled Metro grids earlier and dashboards later (the idea of modular cells is old), and spread through landing pages around 2022-2024. It solves "many features, one screen": size sets rank, so users scan hierarchy without extra labels. It is a layout, not a theme: it works with flat, soft or dark visuals.
Visual vocabulary
- Grid: 4 columns desktop (cell about 280 in a 1200 frame, gap 16), 2 columns tablet, 1 phone. Rows of 240-280. Spans 1x1, 2x1, 1x2, 2x2.
- Tile: radius 24, padding 24-32, fill from a small family. Light: page #F5F5F7, tile #FFFFFF, ink #1D1D1F, muted #6E6E73. Dark: page #000000, tile #1C1C1E, text #F5F5F7, muted #A1A1A6.
- Accent tiles: 1-2 tiles in the brand color or a tint (#E8F0FE, #FDEBD3), not every tile.
- Type: one family, strong jumps. Inter, Manrope or Instrument Sans: tile title 28-40 / 600, body 16 / 400 muted, big numeral 72-120 / 700.
- Visual: one UI crop, chart, large number or icon cluster per tile. No stock images unless real.
- Icons: lucide stroke 1.5-2, 24-32, in a plain color.
Translating into Pego
- Variables: $page, $tile, $tile-accent, $ink, $muted, $gap 16, $radius-tile 24, $pad-tile 28.
- Build the grid with nested frames, not x and y: a vertical Grid frame (gap 16) holding horizontal Row frames (gap 16). Equal cells: all children fill_container width with the same weight. A 2x2 dominant tile on the left: Row 1 = [Tall column frame (width 592 = 2 cells + gap, height fill) | cell | cell]; use a vertical frame to stack two 1x1 tiles beside a 1x2 tile. Define cell width W and calculate spans as n*W + (n-1)*gap, and set fixed heights (row 264, tall 544).
- Tile component: frame vertical, padding $pad-tile, radius $radius-tile, fill $tile, clip true; title and body text children; justifyContent space_between so text sits top and visual bottom.
- Hero: headline centered above a 4x3 bento (one 2x2 hero tile with the real product UI, one number tile, one list tile, two small icon tiles). The grid is the hero.
- Sections: a features bento, then a plain testimonial or pricing row so the page rhythm does not repeat tiles.
Pitfalls
- Every section as a bento is slop: use it once or twice per page.
- Equal tiles are a card grid, not a bento. Without size contrast there is no hierarchy.
- Misaligned spans and uneven gaps break the lunch box illusion; check numbers.
- Do not put paragraphs in tiles; small-screen readers cannot scan them.
- Fake dashboards and invented metrics in tiles are placeholders: label them as sample data.
Pair with
landing-page, dashboard and pricing build skills; soft-bento preset.
Fonts: Inter, Manrope, Instrument Sans