Product pages

57 sites with a deeply-analysed product page , across health, developer tool, other, saas product, retail, hospitality, beauty, creative studio. Build a product page from how the best sites build that page, not a generic skeleton.

Screenshot of Ace And Tate

Ace And Tate

strong

Health

a near-monochrome Amsterdam eyewear store that lets warm product photography and one editorial serif carry all the personality, set on a soft grey field with ink-black type, calm spacing and almost no decoration.

Screenshot of Adaline

Adaline

strong

Developer Tool

an AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.

Screenshot of Arc

Arc

strong

Developer Tool

a Next.js product site that turns electric ultramarine (`#3139fb`), a peach-cream wash (`#fffcec`), and the bespoke Marlin display face into a confident brand-announce moment - "Meet Dia" - where every other site decision exists to give the colour and the new product name room to land.

Screenshot of Avantgarde Properties

Avantgarde Properties

strong

Other

A Dubai luxury real-estate agency that sells status boldly - a near-black canvas, an enormous mixed bold-sans-and-italic-serif display ("Welcome To / Avant Garde Real Estate"), full-bleed property films, a developer-partner logo wall (EMAAR, DAMAC, Nakheel), and copy aimed squarely at "the world's elite".

Screenshot of Basecamp

Basecamp

flagship

Saas Product

a 2026 Basecamp 5 launch site where every captured colour value is in OKLCH (the most aggressive perceptual-uniform colour-space adoption in the library), Graphik is the sole typeface, two CSS keyframes is the entire animation budget (`blink` + `status`), and the page is composed as a literal product screenshot with bulleted prose navigation in the margin.

Screenshot of Bellroy

Bellroy

flagship

Retail

an accessories e-commerce site that fronts a deep catalogue with one bold, punchy hero, leading with heavy uppercase GTUltra type, a warm terracotta accent on a near-monochrome base, and a calm Material-style motion system that keeps a 40-section shop feeling composed.

Screenshot of Belyi Ostrov House

Belyi Ostrov House

flagship

Other

A premium St Petersburg residential development ("Белый Остров" / White Island) that sells aspiration through cinematic craft - a gold-and-navy luxury palette, a full-screen architectural hero, GSAP page-transition wipes and a Three.js/WebGL layer, with calm cream glass cards promising "a place of rest and strength".

Screenshot of Cal Com

Cal Com

strong

Developer Tool

The reference for open-source dev-tools brand at peak typographic confidence — Cal Sans 64px H1 on pure white, real booking widget in hero, prestige customer logos.

Screenshot of Catbird

Catbird

niche

Retail

a Brooklyn fine-jewellery boutique with an editorial fashion-magazine voice, a Denton Condensed display serif over a TT Fors sans, warm cream and charcoal fields, a cinematic campaign hero and a scrolling "SOLID GOLD ALWAYS" ticker.

Screenshot of Ceremony Coffee

Ceremony Coffee

strong

Hospitality

a Maryland coffee roaster on Shopify that reads like an editorial magazine, warm off-white paper grounds, an Avenir-plus-Meta-serif pairing, large lifestyle photography of brewed coffee on linen, and a calm 0.15s fade discipline that keeps a busy commerce catalogue feeling unhurried.

Screenshot of Clerk

Clerk

strong

Developer Tool

The reference for auth-platform / dev-tools at peak monochrome restraint — pure black on white, Suisse + Geist Numbers + Söhne Mono, letter-reveal hero animation.

Screenshot of Clickup

Clickup

strong

Saas Product

The reference for a saturated-purple SaaS AI agent platform: 76px Plus Jakarta Sans display, 60 CSS keyframes, rotating gradient borders, and elastic overshoot motion.

Screenshot of Cofounder

Cofounder

strong

Saas Product

The reference for fusing a pixel-art world-building aesthetic with editorial chapter-based content — a 16-bit hero on a learning-guide body.

Screenshot of Cubitts

Cubitts

niche

Health

a London bespoke-spectacle maker treating its Shopify storefront like a design museum, near-black ink on white, a tiny precise type scale in its own Fold Grotesque, generous 16px-radius media tiles, and a giant "CUBITTS" wordmark laid behind a Greenwich Observatory photograph.

Screenshot of Dear Sundays

Dear Sundays

strong

Beauty

a non-toxic nail studio and polish brand that reads like a calm wellness ritual, warm sand-beige surfaces, Baskerville serif headings over Lato body, soft 40px pill buttons, line-drawn "promise" icons and product-led editorial photography.

Screenshot of Dropbox

Dropbox

flagship

Saas Product

The reference for a 700-million-user product brand at restraint: cream "coconut" backgrounds, one saturated blue CTA, real product UI rendered enormous, and a 13-section page that never raises its voice.

Screenshot of Drunk Elephant

Drunk Elephant

strong

Beauty

a playful clean-skincare DTC store built on a charcoal-on-white base lit up by candy pastels, mint and neon-lime, with bouncy float-and-wink micro-motion, rounded product cards and a chatty, ingredient-led voice.

Screenshot of Drybar

Drybar

flagship

Beauty

a blow-dry bar that turned one service into a polished lifestyle brand, a cheerful yellow-on-warm-grey identity, big confident display type, and a site that runs a booking funnel and a serious product retail line side by side.

Screenshot of Dub

Dub

strong

Developer Tool

The reference for open-source link-attribution platform — pure black/white monochrome with Satoshi + Inter, real dashboard hero, dotted-grid integration map, 48-keyframe motion library.

Screenshot of Fiddle Digital

Fiddle Digital

strong

Creative Studio

an award-agency site that runs on contrast, a near-black ink and soft mauve, a grotesque paired with its own mono, type that swings from 11px labels to viewport-filling 130px+ display, a custom loading cursor and horizontal marquees, with a glassy 3D aurora render as the one moment of spectacle.

Screenshot of Figma

Figma

flagship

Saas Product

a white-canvas product site that uses tilted Figma file-cards as the hero imagery, the bespoke variable figmaSans + figmaMono pair at non-integer weights (340, 480, 520, 540), and a 0.16s ease-out motion contract to demonstrate breadth without showing a single screenshot of the actual Figma UI.

Screenshot of Food52

Food52

strong

Retail

a food-and-home brand that fused editorial content with commerce, recipes and stories draw you in, a clean serif-and-sans system on white, and a shop (cookware, gifts, homewares) is always one tap away.

Screenshot of Form Nutrition

Form Nutrition

strong

Fitness

a UK supplements DTC that pairs a warm off-white editorial base with a single mustard-yellow accent and a terracotta brand block, a geometric-sans-plus-Silka heading system, big oversized logo graphics and a calm, recipe-and-ritual voice.

Screenshot of Frank Green

Frank Green

strong

Retail

an Australian premium-drinkware brand whose Shopify store leads with a glossy product hero on warm cream, a confident brand green, the geometric Circular Std sans with a Victor serif accent, big rounded buttons, and a customisation-and-gifting story told through clean product photography.

Screenshot of Gantri

Gantri

strong

Retail

a direct-to-consumer lighting brand that runs its whole store on a quiet Sohne-grotesque-plus-Roboto-Mono system, near-black editorial photography, a single forest-green accent (#00855B) and a calm 1440px product grid, so the lamps carry all the colour and the chrome stays out of the way.

Screenshot of Ghost

Ghost

strong

Marketing Platform

The reference for a creator-platform brand at peak typographic confidence — Inter Display at 96px, real product dashboard at full fidelity, single saturated green accent on a 4-surface palette.

Screenshot of Gsap

Gsap

strong

Developer Tool

a near-black product site where a 101px "Animate anything" headline in the bespoke Mori sans on creamy off-white (`#fffce1`) and 3D liquid-form objects animated by GSAP itself make the homepage the most credible product demonstration in the JavaScript-animation category.

Screenshot of Halo Dental

Halo Dental

flagship

Other

A dental-tech hardware brand (the Halo "digital mirror") that opens on a black stage with its glowing ring-lit device, a 100px "Halo" wordmark and "We All Shine", then proves capability with a calm bento grid - Apple-product confidence aimed at clinicians.

Screenshot of Hims Hers

Hims Hers

flagship

Health

a telehealth brand that makes prescription medicine feel like a lifestyle product, a big tight-set geometric sans headline, a warm cream-and-brown palette, and a grid of large rounded entry cards with floating product photography that route you straight into "find your Rx match".

Screenshot of Homerun

Homerun

strong

Hr Platform

The reference for friendly HR/recruiting platforms with chunky 70s-display typography — warm cream + brown text + saturated CTA, real product UI in hero, pink customer-love mode-flip.

Screenshot of Jasper

Jasper

strong

Marketing Platform

The reference for AI-marketing brands with editorial-magazine-cutout aesthetic — ABC ROM serif at 80px, coral CTAs, photographic collage imagery on cream.

Screenshot of Karo Crafts

Karo Crafts

niche

Creative Studio

NYC creative studio + merch shop — "unification of artwork, fashion, music & video", Helvetica + ultra-blue accent, Nuxt + Prismic stack, 229px hero.

Screenshot of Lalo

Lalo

strong

Childcare Education

a baby-and-toddler products store on Shopify that reads as premium rather than cutesy, deep navy (#0F234C) on white, a GT Alpina serif paired with Neue Haas Grotesk, warm real-family kitchen photography, full navy feature panels with a warm CTA, and GSAP-plus-Swiper product carousels.

Screenshot of Lattice

Lattice

strong

Hr Platform

The reference for HR/People platforms with rainbow-gradient personality — deep teal text on cream, pastel feature cards, multi-coloured wave logo, Matter at fractional rem-math sizes.

Screenshot of Liveblocks

Liveblocks

strong

Data Infrastructure

a pure-black developer-infrastructure site where Suisse + JetBrains Mono on stark `#000` carry the engineering authority, a single magenta-glow card with handwritten annotations sells the human side of collaboration, and 58 Radix-UI keyframes power dropdown / sheet / popover motion that feels app-grade rather than marketing-page-grade.

Screenshot of Loom

Loom

flagship

Saas Product

a post-Atlassian-acquisition SaaS site (now branded "Atlassian Loom") built in Next.js, set in Atlassian's Charlie Text + Charlie Display, anchored by a single Atlassian-blue `#1868db` CTA and a hero video thumbnail that doubles as the product demo - the canonical reference for "absorbed-by-enterprise SaaS that still feels like itself."

Screenshot of Loops

Loops

strong

Marketing Platform

The reference for editorial-serif email platform — cream + black + classic article underlines, Framer page builder, AI agent sub-product positioning.

Screenshot of Mintlify

Mintlify

strong

Marketing Platform

The reference for AI-documentation platform — cloud-gradient sky hero, mint-green CTA, modern lab()/oklab() colour science, real docs mockup with AI assistant chat.

Screenshot of Notion

Notion

flagship

Saas Product

warmth at scale - a vast product suite made to feel friendly and human through warm neutral colour, a customised Inter, serif editorial accents and approachable copy.

Screenshot of Pipe

Pipe

strong

Fintech

The reference for pure-dark embedded-finance minimalism — bespoke Suisse Int'l on pure black, single saturated orange, one font weight only.

Screenshot of Pitch

Pitch

flagship

Saas Product

a violet-and-yellow presentation-tool flagship that pairs Eina01 + Mark Pro on a warm-navy ink, sparkle keyframes (`sparkL`, `sparkM`, `sparkS`, `sparkHover`), animated cursor pointers, and a numbered four-step "Plan / Build / Pitch / Measure" walkthrough - the canonical reference for "B2B presentation software that earns playfulness."

Screenshot of Plain

Plain

strong

Saas Product

a Framer-built operational site that turns a bifurcated 80px headline (bright green + dark green) into the whole brand, leaving everything else - cream cards, Geist Mono micro-labels, single-easing colour transitions - in subordinate role.

Screenshot of Quip

Quip

strong

Health

an oral-care brand that makes dental health feel friendly and modern rather than clinical, a clean mint-and-teal system, Poppins, soft pill shapes, with a shop, a store locator and a "find a professional" dentist network.

Screenshot of Segment

Segment

strong

Data Infrastructure

The reference for a developer-CDP brand migrating into its acquirer — Twilio red + Segment blue on deep navy, isometric red cube illustrations, Whitney SSm single-family discipline.

Screenshot of Slack

Slack

flagship

Saas Product

a post-Salesforce-acquisition product flagship where the iconic aubergine `#611f69` survives as the primary CTA, Salesforce-Sans replaces Lato, and a 30-keyframe motion library powers the "workspace-people-bump" avatar animations that have always been Slack's brand signature.

Screenshot of Softstart

Softstart

niche

Hr Platform

The reference for B2B SaaS blog templates with AI-summarisation chips — softstart.app redirects to Workleap's blog article on onboarding software.

Screenshot of Spline

Spline

flagship

Saas Product

a pure-black 3D-design-tool site where everything is delegated to interactive WebGL scenes - the captured CSS is almost typographically empty (12/14/16px, 2 declared transitions, 0 shadows) because every visual moment is rendered live in Spline's own 3D engine.

Screenshot of Stripe

Stripe

flagship

Fintech

the clarity benchmark - extreme product complexity made to feel calm, premium and effortless through a fully tokenised design system and restrained, confident CSS motion.

Screenshot of The Brand Identity

The Brand Identity

strong

Editorial Publishing

The reference for editorial design publications — centred italic-serif wordmark, light-grey paper background, mixed Times-serif body + Bauhaus-sans chrome, content-density home grid.

Screenshot of Toll Brothers

Toll Brothers

flagship

Other

America's luxury homebuilder selling aspiration at scale - a Domaine serif over Gotham, a "Your New Home Starts Here" community-search configurator, Designer Appointed Collections, and an Apple Maps community finder, all in a restrained navy-and-tan system that makes a production builder feel bespoke and desirable.

Screenshot of Tranch

Tranch

strong

Fintech

The reference for B2B fintech that refuses to look like B2B fintech — sketchbook-style asymmetric-radius cards, hand-drawn cartoon illustrations, pure black borders on white.

Screenshot of Vercel

Vercel

flagship

Developer Tool

engineered minimalism - a near-monochrome light site where a geometric grid, the in-house Geist typeface and tightly-tracked bold headings make "developer tool" feel like precision hardware.

Screenshot of Vrai

Vrai

strong

Retail

a lab-grown fine-jewellery house whose homepage is a near-empty white gallery, a single yellow-gold solitaire ring floating in bright caustic light above a quiet centred serif headline, set in a black-on-white system with metal-named gradient tokens (white-gold, yellow-gold, rose-gold, platinum) and slow, refined cubic-bezier transitions.

Screenshot of Warby Parker

Warby Parker

flagship

Health

a calm, trustworthy retail-optometry site that pairs a near-black ink (#121212) with a confident royal blue (#1050D0), runs a custom grotesque against a custom serif, and lets warm lifestyle photography and a fast 0.2s ease carry the polish.

Screenshot of Wealthsimple

Wealthsimple

flagship

Professional Services

a Canadian money app dressed as a warm editorial magazine, oversized Tiempos serif headlines over soft sand backgrounds, candid lifestyle photography that floats in on scroll, and a calm custom-eased motion system that makes a fintech feel human rather than clinical.

Screenshot of Webflow

Webflow

flagship

Saas Product

a white-canvas product flagship that is itself built in Webflow - using the bespoke WF Visual Sans Variable + WF Visual Sans Mono, a Webflow-blue `#146ef5` primary, GSAP + ScrollTrigger + Three.js + Swiper all bundled, and a three-card "AI / Template / Scratch" entry hero that mirrors the actual product's onboarding paths.

Screenshot of Wispr Flow

Wispr Flow

strong

Saas Product

The reference for a butter-cream voice-AI brand at peak typographic confidence — EB Garamond serif hero on lavender-and-evergreen surfaces, with curved-path transcript animations as the signature motion.

Back to the full collection