Skip to content

Accordion and FAQ designs

Accordions keep long pages short. These open on springs, measure their own height and stay accessible, in styles from editorial to Art Deco.

A numbered FAQ with hairline rules where the plus rotates into a cross and answers unfold on measured-height springs.

Dynamic Accordions

Five vertical panels side by side; the hovered panel widens to reveal its story while the rest compress into rotated spine labels.

Dynamic Accordions

A vertical process timeline where opening a step draws the connecting line down to it and checks off every earlier step.

Dynamic Accordions

A service list where opening an item reveals a color-block 'photo' that wipes in from a clip-path, paired with its deliverables.

Dynamic Accordions

Washi Vertical Tabs

Japanese Minimal

A Japanese-minimal accordion of tall vertical-text columns; opening one unrolls it like a scroll and stamps a vermilion seal.

Dynamic Accordions

Art Deco FAQ

Art Deco

An emerald-and-gold accordion with stepped corners and a sunburst that fans open behind each answer.

Dynamic Accordions

A single-open accordion listing what Margins offers; the open row gets an accent bar that grows from the left and its detail unfolds on a spring.

Dynamic Accordions

A single-open accordion listing what Hill 412 offers; the open row gets an accent bar that grows from the left and its detail unfolds on a spring.

Dynamic Accordions

A single-open accordion listing what Third Round offers; the open row gets an accent bar that grows from the left and its detail unfolds on a spring.

Dynamic Accordions

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.