Skip to content

Bento grid designs

Bento grids show several features at once without a wall of text. Each layout here animates on its own terms, from tiles that expand in place to live data panels.

Expanding Bento Grid

Warm Editorial

A four-tile bento where clicking any tile expands it to dominate the grid using shared layout animation; the others reflow with springs.

Bento Feature Grids

Count-Up Stats Bento

Warm Editorial

An editorial results bento whose numbers count up with spring easing the moment they scroll into view, with a hand-drawn underline.

Bento Feature Grids

A bento grid where each tile leans toward the pointer on a gentle 3D spring and lifts on a hard offset shadow — tactile, not glossy.

Bento Feature Grids

Tabbed Showcase Bento

Warm Editorial

A bento with a segmented control on top; switching tabs morphs the grid's tile arrangement and swaps content with crossfades.

Bento Feature Grids

Loud pricing cards with 3px borders and hard shadows; a chunky monthly/yearly switch slams the prices to new values.

Bento Feature Grids

A dense dashboard bento in slate and IBM Plex Mono: live-ticking metrics, a drawing sparkline and a status grid that flickers like a server rack.

Bento Feature Grids

A four-tile bento for Smile Lab where hovering a tile floods it with the accent color while the others recede — with a live count-up headline stat.

Bento Feature Grids

A four-tile bento for Third Round where hovering a tile floods it with the accent color while the others recede — with a live count-up headline stat.

Bento Feature Grids

A four-tile bento for Haddad Arch. where hovering a tile floods it with the accent color while the others recede — with a live count-up headline stat.

Bento Feature Grids

Questions, answered

What is Specimen Design?

A free library of full website designs. Every design runs live in your browser and comes with a detailed prompt you can paste into Claude to build it. Single UI components live separately, in the components lab.

How do I use a Claude prompt to design a website?

Open any design, press “Copy Claude Prompt” and paste it into Claude. You get a complete React component with Tailwind CSS and Framer Motion that you can drop into a Next.js site.

Are the designs free to use?

Yes. All designs and code are free to use in personal and commercial projects under the MIT license.

How do I make an AI-built website not look AI-generated?

Start from a clear design language instead of defaults: a deliberate typeface pairing, a strict palette with one accent, and motion with real spring physics. Every prompt here spells those choices out.

Which design styles are included?

28 design languages, including Neo-Brutalist, Bauhaus, Swiss, Japanese Minimal, Luxury Noir, Retro 70s, Memphis, Y2K, Claymorphism, Risograph, Art Deco and 8-bit.

Can you build a custom website for my business?

Yes. Use the brief form on the homepage and you will get a reply within one working day.