Skip to content
SloplessTry the picker

Hero library · product

Product bento

hero.product-bento: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.

Rule
The hero is a bento of five tiles: a headline tile in 1–7 (rows 1–2), a tall product tile in 8–12 (rows 1–3), two stat tiles in 1–4 and an accent CTA tile in 5–7 on row 3.
Slots
eyebrow, headline, subhead, heroImage, stats[2..2], meta, cta
Grid
headline 1-7 · product 8-12 · stats 1-4 · cta 5-7
Notes
Tiles use the style's radius and surface colours; gaps between tiles are one space step 2. Tiles are not equal: sizes differ by role.

Do

  • Build exactly five tiles of different sizes: headline (1–7 × 2 rows), product (8–12 × 3 rows), two stats, one accent CTA tile.
  • Use surface and surfaceAlt fills for tiles and the accent only on the CTA tile.
  • Keep a uniform 16 px-ish gap (space step 2) between tiles and the style's radius on all of them.
  • Make the product tile tall and let the product image fill it.

Don't

  • Don't make all tiles the same size — that is a card grid, not a bento.
  • Don't add icons to the stat tiles.
  • Don't put a second CTA in the headline tile.

Phone width

  • Stack: headline tile, product tile at 4:5, stats side by side, CTA tile full width.

Try this hero in the pickerllms.txt

Live, in 3 styles it suits

In Bento Tech

hero.product-bento · hero

Open alone, full size (desktop, tablet, phone; layout tree included)

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

140+

launches shipped

12

years independent

Booking projects from June 2026

Start a project
Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

140+

launches shipped

12

years independent

Booking projects from June 2026

Start a project
Phone, 390 px

In Neo-grotesk Minimal

hero.product-bento · hero

Open alone, full size (desktop, tablet, phone; layout tree included)

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

140+

launches shipped

12

years independent

Booking projects from June 2026

Start a project
Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

140+

launches shipped

12

years independent

Booking projects from June 2026

Start a project
Phone, 390 px

In Frosted Glass

hero.product-bento · hero

Open alone, full size (desktop, tablet, phone; layout tree included)

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

140+

launches shipped

12

years independent

Booking projects from June 2026

Start a project
Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

140+

launches shipped

12

years independent

Booking projects from June 2026

Start a project
Phone, 390 px

Suits

Bento TechNeo-grotesk MinimalFrosted GlassY2K ChromeScandinavian SoftNeo-BrutalismMemphisTerminal Mono

Clashes with

Classical BookishBroadsheet NewspaperLuxury Fashion