bento-ui

Bento UI

"Everything in its right place. A highly structured, modular grid of distinct compartments."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Strict Grid Structure: The entire UI is built on a responsive, multi-column grid (usually 3x3, 4x4, or irregular masonry).
2. Rounded Compartments: Every distinct piece of content lives inside a card (compartment) with consistent, usually large, border-radius.
3. Equal Spacing: The gap between compartments must be perfectly consistent everywhere.

Visual DNA

• Colors: Highly adaptable, but looks incredibly premium with Minimalist Slate or Yacht Club. Often uses a slightly off-white or light gray background to make the white compartments pop.
• Typography: Apple-esque (e.g., SF Pro, Inter). Headlines are usually bold and placed at the top-left or bottom-left of each compartment.
• Visuals: Often relies on high-quality, edge-to-edge images or single, large 3D icons inside specific grid cells to break up text-heavy cards.

Web Implementation

• CSS Grid is mandatory. Flexbox is too difficult to maintain the strict 2D structure.
• CSS Example:

.bento-container {
  display: grid;
  grid-template-columns: repeat(4,