# Bento tech — style recipe

## The idea
- A product told in tiles: a tidy grid of rounded cards of different sizes, each holding one fact, with crisp type and soft depth.

## Use it when
- Software and app product pages
- Feature overviews with many small points
- Dashboards and summaries

## Avoid it when
- The story needs one long narrative
- The brand wants warmth and craft

## Principles
- A grid of rounded tiles in two or three sizes
- One fact, number or small demo per tile
- Crisp grotesk headings, plain body text
- Soft depth: light surfaces on a pale ground
- Tiles re-flow to one column on phones
- Colour only for small highlights and numbers

## Colour
- Cloud (background): #f3f5f9
- Tile white (surface): #ffffff
- Slate ink (text): #0f172a
- Slate (muted): #475569
- Signal blue (accent): #2f4ae0
- Teal (accent-2): #14b8a6
- Tile edge (border): #e2e8f0
- Text on background contrast: 16.36:1 — passes AA

## Type
- Headings: Space Grotesk, weights 600 and 700 — Crisp grotesk; big numbers in tiles
- Body: Inter, weights 400 and 500 — Small, clear text inside tiles
- Scale: 13px, 15px, 18px, 24px, 36px, 56px
- A characterful grotesk for headings and numbers, a neutral sans for text.

## Spacing and shape
- Base unit: 4px
- Spacing steps: 4px, 8px, 16px, 24px, 48px
- Even gaps between tiles; tight padding inside.
- Corner radii: 16px, 24px
- Borders: 1 px tile edges
- Shadows: Soft, small, cool shadows

## Imagery and motion
- Imagery: Small UI fragments, icons, charts and numbers drawn in the tiles.
- Motion: Small lifts on hover; tiles fade in one after another.

## Do
- Give every tile one job
- Mix two or three tile sizes
- Make numbers big

## Don't
- No purple gradient backgrounds
- No identical three-card rows
- No long paragraphs in tiles