Website Design Explorer

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

Example: note-taking app product page for Tidewell, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.

Open the example on its own

Copy the idea

Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.

The recipe

Bento tech — style recipe: the same text the brief copies.

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

Type

  • Headings: Space Grotesk, weights 600, 700 — Crisp grotesk; big numbers in tiles
  • Body: Inter, weights 400, 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

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, weights 600, 700

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Crisp grotesk; big numbers in tiles

Body Inter, weights 400, 500

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Small, clear text inside tiles

Scale A characterful grotesk for headings and numbers, a neutral sans for text.
  • 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

Spacing and shape

Spacing base unit 4px
  • 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

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

Similar styles

The styles closest to this one in mood, density, era, warmth and accent colour.