Story pages

39 sites with a deeply-analysed story page , across consumer brand, editorial publishing, fitness, retail, saas product, health, hospitality, creative studio. Build a story page from how the best sites build that page, not a generic skeleton.

Screenshot of Aesop

Aesop

flagship

Consumer Brand

an editorial e-commerce reference where Suisse Intl on warm-cream `#fffef2`, a modular 1.13 type ratio, and full-bleed photography do all the work - no display face, no accent colour, no motion of consequence.

Screenshot of Apple Newsroom

Apple Newsroom

flagship

Editorial Publishing

the editorial corner of apple.com - SF Pro on Apple's signature `#f5f5f7` light-grey page, rounded 24-32px news cards with white surfaces, and a 21-keyframe globalnav animation library that defines the bar at the top of every Apple page on the internet.

Screenshot of Barrys

Barrys

flagship

Fitness

the original HIIT studio brand selling "the best workout in the world", a dark, cinematic Webflow site built on near-black and the Red Room red, condensed athletic display type, a hand-painted script signature, and a booking-first hero that puts "find a studio" above everything.

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

Dishoom

flagship

Hospitality

a beloved restaurant group whose site is a love letter to its story, warm cream-and-charcoal editorial storytelling in a Cheltenham serif, with menus and "book a table" threaded through the narrative for each venue.

Screenshot of Dominique Ansel

Dominique Ansel

strong

Hospitality

a world-famous pastry chef's bakery group on WordPress that leads entirely with product photography, a sage-and-olive neutral palette (#B8BAAB sage, #282D22 deep olive ink), all-caps Proxima Nova labels over a full-bleed image carousel of viennoiserie, and a gentle ease-driven motion that lets the food do the talking.

Screenshot of Drexler

Drexler

niche

Creative Studio

A Baltimore studio that uses a single 765px-tall wordmark as the entire homepage, with a warm pink-on-black palette and 5-link nav, signalling small-shop confidence through wordmark-as-canvas restraint.

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

Edition Roasters

strong

Other

A speciality roaster whose homepage is mostly hushed, moody photography of an empty cafe at dawn - serenity sold through atmosphere and almost no copy, with a single deep-plum accent doing all the colour work.

Screenshot of Erewhon

Erewhon

strong

Retail

a cult premium grocer that turned organic groceries into a lifestyle brand, a warm off-white canvas, confident Sharp Sans, a category-led shop, and a strong mission-and-community story that justifies the premium.

Screenshot of Fabrique Bakery

Fabrique Bakery

strong

Other

A Swedish artisan bakery whose home page is a single warm photograph of hands shaping dough, over which three cities (Stockholm, London, New York) sit as a quiet gateway - belonging and craft conveyed before a word of selling.

Screenshot of First Frame

First Frame

niche

Film Production

Paris production and post-production studio whose own site is the canonical example of full-bleed black + IBM Plex Mono micro-type + reel-as-hero — the cinematic-craft posture for a portfolio-led service business.

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

Frenchie Restaurant

strong

Hospitality

a Paris restaurant group telling a family story, a dark moody hero of textured produce stills, a Traulha display serif (roman and italic) over a Gill Sans body, cream type on near-black ink, and a calm row of venue cards that turns six establishments into one elegant front door.

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

Hay

strong

Retail

a Danish designer-furniture house whose store reads like a quiet gallery, near-black ink on a single light-grey field, Neue Helvetica paired with an ITC New Baskerville serif, almost no UI chrome, and a slow editorial scroll where the products and photography are the only colour.

Screenshot of Hnine

Hnine

niche

Creative Studio

A Seoul interaction-design studio's experimental subsite, built as a React SPA on a viewport-scaled (`calc(100vw/1920)`) coordinate system, where almost everything lives behind interaction so the initial DOM is intentionally empty.

Screenshot of Jardan

Jardan

strong

Retail

an Australian designer-furniture and homewares house whose homepage opens on a warm, cinematic golden-hour video of hands working raw timber and a rug being woven, set in a strictly greyscale, whitespace-led editorial system with the Neuzeit Grotesk sans doing nearly all the work and a BN Cicero serif for accents.

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

Lando Norris

flagship

Personal Brand

an athlete portfolio masquerading as a sport-magazine - dark olive `#282c20` page, cream type, oversize "WORLD DRIVERS' CHAMPION" headlines in the bespoke Brier display font, neon-papaya `#d2ff00` for the STORE pill, and a Webflow + Lenis + Splitting motion stack delivering a slow 0.75s expo-out cinematic reveal on every editorial card.

Screenshot of Lanserring

Lanserring

flagship

Trades

a bespoke-joinery house that sells craft as heritage, warm sepia interiors and meadow photography under a high-contrast transitional serif, the brand reduced to a single fine line-drawn ring, with quiet WordPress structure and almost no visible motion furniture.

Screenshot of Lovevery

Lovevery

flagship

Childcare Education

a warm, research-led children's product brand that pairs a soft cream/off-white ground and warm-grey body text with a confident royal-blue accent, BrownPro geometric headings, a Bradford italic serif for editorial warmth, and a rainbow age-stage colour strip that doubles as the brand signature.

Screenshot of Lune Croissanterie

Lune Croissanterie

flagship

Other

A cult croissanterie that treats pastry like cinema - a near-black canvas, full-bleed video, oversized DIN display type that splits and reveals on scroll, turning a bakery into an object of desire.

Screenshot of Maap

Maap

strong

Retail

an Australian premium-cycling-apparel store that reads like a design studio, a near-monochrome #222-on-white system with a single chartreuse spark, a TWK Everett grotesque paired against a Times Now display-serif italic, a full-bleed autoplay-video hero and a token system deep enough (134 custom properties, a fluid clamp scale) to feel engineered rather than themed.

Screenshot of Marga Navarro

Marga Navarro

niche

Design Portfolio

The reference for a one-screen craft-software-design portfolio — a hand-drawn corgi-and-butterfly sketch as the entire hero canvas, with a tiny rounded mono-typeface "shortcut card" floating top-left as the only chrome.

Screenshot of Mejuri

Mejuri

flagship

Retail

a flagship fine-jewellery shop that reads like an editorial magazine, full-bleed black hero portrait, an all-caps grotesque headline set against monospace body and warm-grey detail copy, near-zero radii and almost no shadow, with restraint doing all the luxury work.

Screenshot of Murdock London

Murdock London

flagship

Beauty

a heritage British barbershop and grooming brand run as a polished Shopify storefront, deep ink-navy on warm off-white, Montserrat throughout, a hand-script accent for warmth, and a calm 0.3s ease-in-out motion language that keeps the commerce furniture quiet.

Screenshot of Noma

Noma

flagship

Hospitality

a three-Michelin-star restaurant that sells itself through photography and a quiet serif, full-bleed seasonal imagery, a lowercase joined wordmark, and almost no chrome, so the food and the place carry the whole page.

Screenshot of November

November

strong

Type Foundry

a type-foundry-and-design-studio site whose signature is a "Type-Toggle", the entire page can be re-rendered in any typeface from their own collection, wrapped around a tight, gridded flat-lay portfolio in black, white and one electric yellow.

Screenshot of Pacaso

Pacaso

flagship

Real Estate

a proptech site that sells second-home co-ownership as an aspirational lifestyle, leading with a full-bleed cinematic landscape, a freight-display serif headline with one italic word, and a calm ink-on-cream palette warmed by a single sage green.

Screenshot of Scout Motors

Scout Motors

flagship

Consumer Brand

a brand-revival flagship built in Astro v5 with Lenis + Locomotive + Swiper + Splitting, three bespoke Scout Sans cuts (regular / medium / wide-medium) + IBM Plex Mono, signature orange `#ff5432`, and the most cinematic photography in the library - golden-hour Terra/Traveler EV trucks at 624 image requests.

Screenshot of Sightglass Coffee

Sightglass Coffee

flagship

Other

A speciality-coffee shop that opens on a warm sunrise gradient and a hand holding the bag, then earns belonging through quiet ritual ("Coffee Served Daily", a 4.9/5 wall of reviews) rather than hard selling.

Screenshot of The Modern House

The Modern House

flagship

Real Estate

a design-led estate agency that presents homes like an art magazine, a black-on-warm-paper system with a custom serif-and-sans pairing, tracked uppercase labels, sharp un-rounded corners and slow 0.9s cross-fades that make property browsing feel curated and unhurried.

Screenshot of Tux Creative

Tux Creative

niche

Creative Studio

A bicoastal independent creative house (LA + Montréal) whose site is built around one monumentally oversized custom display face (TuxPlaza at ~223px), a chrome-grey blurred-pill top nav, and full-bleed cinematic Vimeo case study reels — motion-heavy creative portfolio at indie-craft tier.

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.

Back to the full collection