Product pages

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

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 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 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 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 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 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 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 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 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 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 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