Design style

Bento tech

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

technical
friendly
cool
dense
contemporary
cool

See it live

Tidewell is a fictional note-taking app product page, written for this library to show the Bento techstyle. Switch the width to see it at phone, tablet and desktop size.

Open the example on its own

Copy the idea

The Bento tech recipe — its principles, palette, type, spacing and rules — ready to paste into a design tool or an AI assistant.

# 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

Design in the "Bento tech" style.
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.
It suits: Software and app product pages.
It suits: Feature overviews with many small points.
It suits: Dashboards and summaries.
Do not choose it when: The story needs one long narrative.
Do not choose it when: The brand wants warmth and craft.
Follow this rule: A grid of rounded tiles in two or three sizes.
Follow this rule: One fact, number or small demo per tile.
Follow this rule: Crisp grotesk headings, plain body text.
Follow this rule: Soft depth: light surfaces on a pale ground.
Follow this rule: Tiles re-flow to one column on phones.
Follow this rule: Colour only for small highlights and numbers.
Use #f3f5f9 (Cloud) as the background colour.
Use #ffffff (Tile white) as the surface colour.
Use #0f172a (Slate ink) as the text colour.
Use #475569 (Slate) as the muted colour.
Use #2f4ae0 (Signal blue) as the accent colour.
Use #14b8a6 (Teal) as the accent-2 colour.
Use #e2e8f0 (Tile edge) as the border colour.
Keep text on the background at least 4.5:1 contrast (WCAG AA); this palette gives 16.36:1.
Use Space Grotesk in weights 600 and 700 for headings: Crisp grotesk; big numbers in tiles.
Use Inter in weights 400 and 500 for body text: Small, clear text inside tiles.
Use only these type sizes: 13px, 15px, 18px, 24px, 36px, 56px.
Type: A characterful grotesk for headings and numbers, a neutral sans for text.
Space things on a 4px base with the steps 4px, 8px, 16px, 24px, 48px.
Spacing: Even gaps between tiles; tight padding inside.
Use corner radii of 16px, 24px.
Borders: 1 px tile edges.
Shadows: Soft, small, cool shadows.
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.
Do: Mix two or three tile sizes.
Do: Make numbers big.
Avoid: purple gradient backgrounds.
Avoid: identical three-card rows.
Avoid: long paragraphs in tiles.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #f3f5f9;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-accent: #2f4ae0;
  --color-accent-2: #14b8a6;
  --color-border: #e2e8f0;
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 48px;
  --radius-1: 16px;
  --radius-2: 24px;
}

Download brief (.md)Download tokens (.css)

The 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

Similar styles

Styles that share the most of Bento tech's mood, density, era and warmth.

Palette

Cloudbackground #f3f5f9
Tile whitesurface #ffffff
Slate inktext #0f172a
Slatemuted #475569
Signal blueaccent #2f4ae0
Tealaccent-2 #14b8a6
Tile edgeborder #e2e8f0

Text on background: 16.36:1 — passes AA

Type

Headings · Space Grotesk · 600, 700

The quick brown fox jumps over the lazy dog

Crisp grotesk; big numbers in tiles

Body · Inter · 400, 500

The quick brown fox jumps over the lazy dog

Small, clear text inside tiles

56pxThe quick brown fox jumps over the lazy dog
36pxThe quick brown fox jumps over the lazy dog
24pxThe quick brown fox jumps over the lazy dog
18pxThe quick brown fox jumps over the lazy dog
15pxThe quick brown fox jumps over the lazy dog
13pxThe quick brown fox jumps over the lazy dog

A characterful grotesk for headings and numbers, a neutral sans for text.

Spacing and shape

Spacing on a 4px base

4px
8px
16px
24px
48px

Even gaps between tiles; tight padding inside.

Corners, borders and shadows

16px
24px

Borders: 1 px tile edges
Shadows: Soft, small, cool shadows

Do and don't

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

Compare with…

See Bento tech side by side with another style, and what differs.

Bento tech

See it live

Every thought, found in a second.

132 notes, most on Thursday

Simple plans

Free

Plus

Team

Copy the idea

The recipe

The idea

Use it when

Avoid it when

Principles

Colour

Type

Spacing and shape

Imagery and motion

Do

Don't

Similar styles

Palette

Type

Spacing and shape

Spacing on a 4px base

Corners, borders and shadows

Do and don't

Do

Don't

Compare with…