# Bento Grid — AI design spec

> Asymmetric tiles on a shared grid — many features, one calm surface.
>
> Style page: https://www.aiwebstyle.com/styles/bento-grid.html · Live preview: https://www.aiwebstyle.com/previews/bento-grid.html
>
> Drop this file at the root of a project and point your coding agent at it. Every value is copied from the working stylesheet, not estimated.

## 1. What this style is

Bento Grid borrows its name from the Japanese lunchbox: compartments of different sizes packed into one rectangle with no wasted space. Applied to interfaces, it gives a page a single continuous surface divided into tiles of unequal weight, so a product can show six or eight capabilities at once without a wall of identical cards. The discipline is in the grid, not the decoration. Every tile snaps to the same track, gaps stay constant, and each tile holds exactly one idea with one visual anchor. When a tile needs more space it spans two columns or two rows — it never shrinks its content or breaks the rhythm.

**Signature rules**

- grid: 12 columns
- gap: 16px
- radius: 16px
- border: 1px low contrast
- surface: near-white
- one dominant tile

## 2. Tokens

### Page surface

| Token | Value | Purpose |
|---|---|---|
| `--page-bg` | `#f7f7f5` | Page background (solid fallback) |
| `--page-bg-gradient` | `none` | Page background gradient; overrides the solid unless `none` |

### Text

| Token | Value | Purpose |
|---|---|---|
| `--text-color` | `#31353d` | Body text |
| `--heading-color` | `#14171c` | Headings |

### Links

| Token | Value | Purpose |
|---|---|---|
| `--link-color` | `#2b66dc` | Link and inline accent |

### Borders

| Token | Value | Purpose |
|---|---|---|
| `--border-color` | `#e3e4e1` | Dividers and input borders |

### Cards

| Token | Value | Purpose |
|---|---|---|
| `--card-bg` | `#ffffff` | Card surface |
| `--card-border-radius` | `16px` | Card corner radius |
| `--card-shadow` | `none` | Card at rest |
| `--card-hover-shadow` | `0 6px 18px -12px rgba(20, 23, 28, .4)` | Card on hover |

### Header

| Token | Value | Purpose |
|---|---|---|
| `--header-bg` | `#14171c` | Sticky header surface |
| `--header-text-color` | `#f7f7f5` | Header text and nav links |

### Buttons

| Token | Value | Purpose |
|---|---|---|
| `--button-bg` | `#14171c` | Primary button fill |
| `--button-text-color` | `#ffffff` | Primary button label |
| `--button-hover-bg` | `#31353d` | Primary button hover fill |

### Code / prompt block

| Token | Value | Purpose |
|---|---|---|
| `--prompt-bg` | `#f1f2ef` | Code / prompt block surface |
| `--prompt-text-color` | `#3c414a` | Code / prompt block text |

### Type

| Token | Value | Purpose |
|---|---|---|
| `--base-font` | `var(--font-inter)` | Body font stack |
| `--heading-font` | `var(--font-inter)` | Heading font stack |

## 3. Do

- Drive every color, radius and shadow from the tokens below. No literal hex values in component code.
- Reuse the `--card-*` tokens for any elevated surface (card, panel, modal, dropdown) so elevation stays consistent.
- Keep header and footer on `--header-*` / `--footer-*` even when the page background is a gradient.
- A feature section that needs to show six or more capabilities without becoming a card wall.
- Product dashboards or app marketing pages where the screenshot is the second focal point.
- Any page where the reader scans rather than reads — the grid gives them places to land.

## 4. Don't

- Do not blend tokens from another style in this library — one page, one token set.
- Do not invent a hover state: every interactive element has a `*-hover-*` token above.
- When all items carry equal weight. Bento is a hierarchy tool; a uniform grid of equal tiles is just a grid.
- On long-form editorial pages — the tile rhythm fights paragraph flow.
- If you cannot design the dominant tile well. An empty hero tile is the most visible failure in this layout.

## 5. Using this with a coding agent

Place this file at the project root as `DESIGN.md`, then instruct the agent:

> Follow `DESIGN.md` for all UI. Every color, radius and shadow comes from its token table. If you need a state that is not listed, derive it from the nearest listed token and add the new token to `DESIGN.md` instead of hard-coding a value.

If the project already has a token layer (Tailwind config, CSS custom properties, a theme file), map these tokens onto it one-to-one and keep the names unchanged.

## 6. Original prompt

```text
Design a Bento Grid section for a product page. A single 12-column grid with a constant gap of 16px. Tiles span 3, 4, 6 or 8 columns and may span two rows.
```

---

*Generated from the `bento-grid` theme in `style.css`. Token values are verbatim — regenerate rather than edit by hand.*