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.
Ace And Tate
strongHealth
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.
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.
Catbird
nicheRetail
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.
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.
Clerk
strongDeveloper 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.
Clickup
strongSaas 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.
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.
Dear Sundays
strongBeauty
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.
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.
Drunk Elephant
strongBeauty
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.
Drybar
flagshipBeauty
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.
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.
Form Nutrition
strongFitness
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.
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.
Gantri
strongRetail
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.
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.
Hims Hers
flagshipHealth
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".
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.
Jasper
strongMarketing Platform
The reference for AI-marketing brands with editorial-magazine-cutout aesthetic — ABC ROM serif at 80px, coral CTAs, photographic collage imagery on cream.
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.
Notion
flagshipSaas 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.
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.
Softstart
nicheHr Platform
The reference for B2B SaaS blog templates with AI-summarisation chips — softstart.app redirects to Workleap's blog article on onboarding software.
Spline
flagshipSaas 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.
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.