Skip to content

Editorial web design

Paper tones, Swiss type and one warm accent color.

A newspaper-style masthead with an issue line, hairline rules and a headline whose final word swaps on a spring-loaded vertical slot.

Editorial Hero Sections

A playful studio hero where hand-cut 'stickers' scattered over the headline can be picked up and thrown with spring inertia.

Editorial Hero Sections

A cream hero where a solid charcoal disc follows the cursor with spring lag and inverts the headline beneath it — no glow, just ink.

Editorial Hero Sections

A Swiss grid hero with a numbered services index; hovering a row slides a terracotta bar in from the left and shifts the text.

Editorial Hero Sections

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

Magnetic Pull Button

Warm Editorial

A charcoal pill that gets pulled toward the cursor within a 90px field, its label lagging a bit further behind for a layered parallax.

Tactile Micro-Interaction Buttons

Squish Press Button

Warm Editorial

A neo-print button with a hard offset shadow that physically presses down into the page on tap, then springs back.

Tactile Micro-Interaction Buttons

A destructive-action button that must be held for 1.2 seconds; a terracotta fill sweeps across, and releasing early rewinds it on a spring.

Tactile Micro-Interaction Buttons

Copy Button Morph

Warm Editorial

A compact copy button whose icon morphs into a drawn checkmark while the pill widens to reveal 'Copied' — layout-animated, no layout jump.

Tactile Micro-Interaction Buttons

A heart button that pops with an overshoot and scatters small paper-cut squares and circles in terracotta, cobalt and charcoal.

Tactile Micro-Interaction Buttons

Elastic Toggle Switch

Warm Editorial

A settings toggle whose knob stretches like taffy while traveling and settles with a bounce; the track ink-fills to cobalt.

Tactile Micro-Interaction Buttons

A giant word split into letters; hovering sends a sine wave through them with per-letter spring delays, like a finger brushing piano keys.

Kinetic Typography Banners

An infinite editorial marquee that slows to a crawl when hovered and can be flicked faster or reversed by dragging.

Kinetic Typography Banners

Split-Flap Headline

Warm Editorial

An airport split-flap board that shuffles random letters before landing on each word of a rotating headline.

Kinetic Typography Banners

A statement banner where key words slide up through clip masks one by one, and the accent word gets a hand-drawn terracotta circle.

Kinetic Typography Banners

A postcard built from flat paper layers — sky, hills, sun, stamp — that separate in depth as the pointer moves, like a pop-up book.

Parallax/3D Interactive Cards

Specimen Flip Card

Warm Editorial

A type-specimen card that flips in true 3D on click to reveal the glyph's metrics on the back, with a springy overshoot.

Parallax/3D Interactive Cards

A stack of testimonial cards you can fling left or right; the top card rotates with drag and the next one rises to take its place.

Parallax/3D Interactive Cards

A product card whose object floats forward in Z on hover while the price tag swings on a pin, with a spring-driven shadow underneath.

Parallax/3D Interactive Cards

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

A centered nav with a charcoal pill that glides under the hovered link via shared layout, returning to the active page when you leave.

Animated Navigation Bars

A hamburger that morphs into a cross and unrolls a full-bleed terracotta menu with giant staggered links rising through masks.

Animated Navigation Bars

Magnifying Dock Bar

Warm Editorial

A bottom app dock whose icons swell based on cursor distance, with labels that pop above — flat paper icons, no gloss.

Animated Navigation Bars

Hide-on-Scroll Header

Warm Editorial

A header that tucks away when you scroll down, slides back on the slightest scroll up, and shows a reading-progress hairline.

Animated Navigation Bars

A minimal contact form with floating labels and an underline that draws from the caret side on focus, plus a send button that flies its arrow away.

Interactive Forms

Multi-Step Brief Form

Warm Editorial

A three-step project brief with chip selectors, a segmented budget control and a progress rail; steps slide horizontally with direction-aware springs.

Interactive Forms

Typewriter OTP Input

Warm Editorial

A six-digit verification code input where each digit drops into its slot like a typewriter key and the row stamps green-free 'Verified' in cobalt.

Interactive Forms

Spring Budget Slider

Warm Editorial

A range slider with a chunky draggable thumb that squashes on grab, a tick ruler, and a price label that rolls digits as you drag.

Interactive Forms

Three offering cards for Smile Lab stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.

Parallax/3D Interactive Cards

A compact booking form for Grain House: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

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 statement banner for Crumb & Co. whose words drop in one by one with springy rotation, then lean away from the cursor on hover.

Kinetic Typography Banners

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

Three offering cards for Open Door stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.

Parallax/3D Interactive Cards

A navigation bar for Open Door with an accent underline that slides between links via shared layout, plus a CTA that squishes on press.

Animated Navigation Bars

A compact booking form for Studio Salt: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

An editorial hero for a yoga studio — Studio Salt — where the closing word rotates through 4 values on a masked spring slot, with a magnetic call-to-action.

Editorial Hero Sections

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 navigation bar for Hill 412 with an accent underline that slides between links via shared layout, plus a CTA that squishes on press.

Animated Navigation Bars

A compact booking form for Ben-Ami & Katz: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

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

Three offering cards for Fieldnote Roasters stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.

Parallax/3D Interactive Cards

A statement banner for Petal & Stem whose words drop in one by one with springy rotation, then lean away from the cursor on hover.

Kinetic Typography Banners

An editorial hero for a coffee roaster — Fieldnote Roasters — where the closing word rotates through 4 values on a masked spring slot, with a magnetic call-to-action.

Editorial Hero Sections

A compact booking form for Fieldnote Roasters: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

A statement banner for Haddad Arch. whose words drop in one by one with springy rotation, then lean away from the cursor on hover.

Kinetic Typography Banners

Three offering cards for Haddad Arch. stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.

Parallax/3D Interactive Cards

A navigation bar for Haddad Arch. with an accent underline that slides between links via shared layout, plus a CTA that squishes on press.

Animated Navigation Bars

An editorial hero for a architecture studio — Haddad Arch. — where the closing word rotates through 4 values on a masked spring slot, with a magnetic call-to-action.

Editorial Hero Sections

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

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

Three offering cards for Margins stacked like a hand of cards; hovering fans them out in 3D and the hovered card lifts forward.

Parallax/3D Interactive Cards

A compact booking form for Petal & Stem: pick a service from springy chips, enter an email with a drawing underline, and get a stamped confirmation.

Interactive Forms

An editorial hero for a boxing gym — Third Round — where the closing word rotates through 4 values on a masked spring slot, with a magnetic call-to-action.

Editorial Hero Sections

A statement banner for Ben-Ami & Katz whose words drop in one by one with springy rotation, then lean away from the cursor on hover.

Kinetic Typography Banners

A navigation bar for Crumb & Co. with an accent underline that slides between links via shared layout, plus a CTA that squishes on press.

Animated Navigation Bars

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.