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.
Adaline
strongDeveloper 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.
Arc
strongDeveloper 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.
Avantgarde Properties
strongOther
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".
Basecamp
flagshipSaas 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.
Bellroy
flagshipRetail
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.
Belyi Ostrov House
flagshipOther
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".
Cal Com
strongDeveloper 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.
Ceremony Coffee
strongHospitality
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.
Cofounder
strongSaas 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.
Cubitts
nicheHealth
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.
Dropbox
flagshipSaas 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.
Dub
strongDeveloper 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.
Fiddle Digital
strongCreative 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.
Figma
flagshipSaas 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.
Food52
strongRetail
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.
Frank Green
strongRetail
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.
Ghost
strongMarketing 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.
Gsap
strongDeveloper 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.
Halo Dental
flagshipOther
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.
Homerun
strongHr 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.
Karo Crafts
nicheCreative Studio
NYC creative studio + merch shop - "unification of artwork, fashion, music & video", Helvetica + ultra-blue accent, Nuxt + Prismic stack, 229px hero.
Lalo
strongChildcare 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.
Lattice
strongHr 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.
Liveblocks
strongData 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.
Loom
flagshipSaas 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."
Loops
strongMarketing Platform
The reference for editorial-serif email platform - cream + black + classic article underlines, Framer page builder, AI agent sub-product positioning.
Mintlify
strongMarketing 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.
Pipe
strongFintech
The reference for pure-dark embedded-finance minimalism - bespoke Suisse Int'l on pure black, single saturated orange, one font weight only.
Pitch
flagshipSaas 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."
Plain
strongSaas 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.
Quip
strongHealth
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.
Segment
strongData 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.
Slack
flagshipSaas 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.
Stripe
flagshipFintech
the clarity benchmark - extreme product complexity made to feel calm, premium and effortless through a fully tokenised design system and restrained, confident CSS motion.
The Brand Identity
strongEditorial 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.
Toll Brothers
flagshipOther
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.
Tranch
strongFintech
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.
Vercel
flagshipDeveloper 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.
Vrai
strongRetail
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.
Warby Parker
flagshipHealth
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.
Wealthsimple
flagshipProfessional 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.
Webflow
flagshipSaas 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.
Wispr Flow
strongSaas 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.