# Bento Modern

## Overview
Apple-keynote-era bento grid aesthetic: a dense 4-column grid of rounded feature tiles in mixed spans (2x2 hero, 1x2 verticals, 1x1 fillers), each tile a soft-contrast solid surface one tonal step off a neutral canvas. Oversized stat numerals are the heroes; scale contrast — not color, not decoration — carries the hierarchy. Dense between tiles, calm inside them.

## Colors & Roles
Neutral canvas: light `background` is a soft cool gray (oklch ~0.965), dark is true dark (~0.19). Tiles (`card`) sit one tonal step off the canvas — near-white in light mode, charcoal (~0.25) in dark. One confident blue-violet `primary`/`accent` (oklch 0.55/0.22/262 light, 0.64/0.20/262 dark). Rule: **at most one vivid accent per tile**, applied to the stat numeral, an icon, or a badge — never several. `chart-1..5` (blue-violet, violet, green, amber, red-orange) double as per-tile accent hues so adjacent tiles can differ without any tile going rainbow.

## Typography Rules
Single system-sans stack (SF Pro Display → Inter Google fallback). Scale ratio 1.25 for text, but the signature move is the `stat` step: `clamp(3.5rem, 7vw, 6rem)`, weight 700, letter-spacing −0.04em, line-height 1 — up to 6x body size inside a tile. Captions stay lowercase, 0.8125rem/500, in `muted-foreground`. No uppercase tracked labels — that is editorial territory, not bento.

## Layout Principles
Max width 1200px. Sections are bento blocks: 4-column grid, 16–20px gaps, mixed spans (2x2 + 1x2 + several 1x1). Vary the span rhythm per row to avoid monotony. Whitespace lives *inside* tiles (28–40px padding); gaps between tiles stay tight. Section gap `clamp(4rem, 8vw, 7rem)` with a short display headline above each grid.

## Depth & Elevation
One barely-there soft shadow shared by all tiles (0 8px 24px −4px at ~5% foreground opacity), or fully flat with tonal separation only — both are valid; never mix heavy shadows in. Hover elevation is expressed by `scale(1.02)`, not by growing the shadow. No frosted glass, no backdrop blur, no gradients as identity.

## Shapes
Tiles/boxes: 22px radius. Fields and small selectors: 12px. Buttons: full pill (999px). Borders are a fallback only — add a 1px hairline in dark mode if tile edges wash out.

## Component Stylings
- **Button**: pill, `primary` fill, weight 600, padding 10px 22px. Hover: slight brighten or scale(1.02), 200ms ease-out. Secondary variant uses `secondary` fill inside tiles.
- **Card (tile)**: `card` background, radius 22px, padding 28–40px, vertical contrast layout — caption top, big stat/visual bottom. Hover scale(1.02).
- **Input**: borderless `secondary` fill, radius 12px, focus ring 2px.
- **Nav**: thin bar on `background`, centered links, one pill CTA right.
- **Stat callout**: the tile's protagonist — huge numeral + caption below; `foreground` by default, accent at most once per tile.

## Motion
Gentle only: tile hover `scale(1.02)` over 200–300ms ease-out; optional staggered `tile-in` fade (opacity + 12px rise + 0.98 scale). No bounce, spring, parallax, or rotation.

## Do's and Don'ts
**Do:** compose sections as mixed-span bento grids; lead key tiles with one oversized numeral; separate surfaces tonally; cap each tile at one accent hue; pad generously inside, gap tightly outside.
**Don't:** frosted glass or translucency; gradients as identity; heavy shadows or borders for separation; uppercase tracked labels or hairline editorial rules; multiple accent hues in one tile.

## Responsive Behavior
4 columns → 2 on tablet → 1 on mobile; a 2x2 tile becomes full-width and keeps its height presence; 1x2 verticals become standard cards. Stat numerals scale via `clamp()`. Tile padding may drop to 24px on mobile; gaps stay 16px.

## Distinction from Glass Soft Futurism
No transparency, blur, or gradient identity anywhere. Bento Modern is about *composition* (tile spans, scale contrast, tonal steps on solid surfaces); glass styles are about *material*. If a surface needs backdrop-filter, it belongs in the other style.

## Agent Prompt Guide
> Build this in the 'Bento Modern' style: an Apple-keynote-era bento grid — a dense 4-column grid of rounded (22px) feature tiles in mixed spans (2x2 hero stat tile, 1x2 verticals, 1x1 fillers) with 16-20px gaps. Tiles are solid soft-contrast surfaces one tonal step off a neutral canvas; shadows barely visible or absent. System-ui sans (Inter fallback), oversized clamp()-based stat numerals with tight negative tracking, 28-40px tile padding, at most one vivid blue-violet accent per tile. Pill buttons. Gentle scale(1.02) hover, 200-300ms ease-out. No glass, no gradients, no heavy borders.

## Known Gaps / Confidence
Authored reference (manual curation, 2026-07-11) — not extracted from a live site, so all token values are `manual` confidence. Chart hues are chosen for tile-accent duty rather than data-viz optimality; adjust for dense dashboards.