the bento family

Bento

Modular tiles, mixed emphasis, the grid as the hierarchy.

Bento is the modular-grid family. Visual hierarchy comes from tile-size variation first, type-scale second — a three-by-two tile is more important than a one-by-one tile before a single word of its content has been read. The grid is the hierarchy. The voice is modern, confident, and product-marketing-mature, with zinc surfaces giving the whole composition a contemporary tech-product quality.

The references are unambiguous: Apple's iPad Pro and Vision Pro marketing pages, Raycast's homepage, Linear's capabilities grid, Framer's feature tiles, Vercel and Cursor and v0.dev's showcases, and the shadcn/ui example gallery. Inter and JetBrains Mono — no display face. Soft halo shadows, generous radius, the full radius scale used contextually.

Use Bento when you need to show a product's capabilities at scale with rhythm rather than noise — feature grids, dashboard summaries, capability showcases, mixed-emphasis pricing. It is the canonical modern-consumer SaaS aesthetic, done with discipline.

Default palette · Amber · 1 recommended palettes below

Best for
  • Modern SaaS product marketing
  • Capability and feature grids
  • Dashboard summary surfaces
  • Mixed-emphasis pricing pages
  • Design system gallery pages
Character
  • modular
  • confident
  • modern
  • approachable
  • rhythmic
TypeInter · Inter · JetBrains Mono
How it differs

Aura shares Bento's contemporary voice but uses glass instead of opaque tiles. Bento is modular and confident; Aura is luminous and refractive.

Try a paletteDark mode →
Amber

01 - Typography

The voice of bento.

Hero title - Inter

Made with intention.

Hero subtitle - Inter

A supporting lead carries the second voice without competing.

Section title - Inter

Section heading at the second tier

Section subtitle - Inter

Supporting copy holds context next to the title without competing for attention.

Card title - Inter

Card title at the third tier

Body - Inter

The body face carries paragraphs, captions, and inline labels - anywhere prose reads at length. It is tuned for legibility at small sizes and reads naturally next to the display face above.

Caption

Smaller supporting copy, used for metadata and inline notes.

Meta - JetBrains Mono

01 - 02 - 03 - v1.0 - 99.9% - $29 - 240ms

02 - Palette

Resolved palette.

The same family-aware mapping the product runtime applies. Each token has been resolved against the active palette and theme.

Backgroundcolor-mix(in srgb, rgb(245 158 11) 10%, white)
Surfacecolor-mix(in srgb, rgb(245 158 11) 4%, white)
Bordercolor-mix(in srgb, rgb(234 88 12) 12%, white)
Ink#0f172a
Brandrgb(245 158 11)
Brand · strongrgb(251 191 36)
Accentrgb(234 88 12)
On brandrgb(17 24 39)

03 · Primitives

The building blocks.

Each control below is the real component the runtime renders. The same buttons, badges, inputs, and chips appear in every generated site that picks this family.

Buttons

Badges

DefaultAccentOutlineInk

Tags

DefaultAccentOutlineInk

Status

NeutralSuccessWarningDangerInfo

Filter controls

Icon containers

Small
Medium
Large

Fields

04 - Card archetypes

How content sits.

Five archetypes - feature, pricing, profile, stat, and testimonial. They use server-rendered family type and palette tokens so this section keeps first-paint SSR parity.

Feature

Generated families, real engineering

Every family ships as manifest data. The server render resolves the same typography, composition, and palette tokens the product uses.

ManifestTokens

Pricing

Recommended

Studio

$29/ month

  • Unlimited generations
  • Custom domains
  • Priority models

Profile

Mara ChenProduct design lead

Twelve years leading design at high-growth SaaS. Available for fractional engagements this quarter.

AvailableFractional

Stat

99.9%

Uptime across all rendered sites this quarterLast 90 days

Testimonial

"The shared semantic tokens made the new family feel consistent from the first pass."
Jules ParkStaff designer, Patagonia Digital

05 - Motion

How it moves.

Hover or focus either surface. The transition uses CSS variables and respects reduced motion without requiring a hydrated showcase.

Card - hover

Lift on hover, hairline tightens

Move your pointer over this card. The surface rises a few pixels and the border tightens to the brand color.

Button - focus

Tab into the button below. The focus ring uses the family's brand color and transitions at this family's curve.

06 · Recommended palettes

Try a different chord.

Each palette below pairs with this family. The cards link straight to a fresh render of this page in that palette — share the URL, it's crawlable.

AmberTry →

06 · Compositions

A few of the section topologies.

Compositions are family-agnostic — every family can render every topology. Combined with card layouts and collection layouts, the engine produces dozens of section presentations per section type. Diagrams show the shape; the family supplies the skin.

banner

Banner

Content stacks above a wide image rail.

grid

Grid

Uniform card grid for collections.

bands

Bands

Alternating horizontal bands of copy and media.

breakout

Breakout

A featured module breaks the grid edge.

See all compositions →

07 · See it live

See a full page.

A complete site rendered in Bento. Open the example to walk through every section in the family's voice.

Open example →Open demo