Article pages
21 sites with a deeply-analysed article page , across consumer brand, developer tool, editorial publishing, hospitality, saas product, creative studio, retail, fitness. Build a article page from how the best sites build that page, not a generic skeleton.
Aesop
flagshipConsumer 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.
Anthropic
flagshipDeveloper Tool
a warm ivory-and-slate site where editorial serif typography, a single clay accent, and unhurried 0.8s expo reveals reframe AI as a humanist research practice rather than a product to sell.
Apple Newsroom
flagshipEditorial 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.
Caffe Design
nicheEditorial Publishing
An Italian "design gang" community-magazine fronted by a hand-drawn one-eyed coffee-cup mascot — bubblegum-pink canvas, a literal animated preloader as the brand voice, GT Haptik sans paired with Argent Pixel CF italic for headline accents.
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.
Cursor
strongDeveloper Tool
a Next.js / Tailwind developer-tool site where a bespoke CursorGothic on warm-light cream (`#f7f7f4`), EB Garamond paragraphs for editorial moments, and 0.14s expo micro-animations make a coding-agent product feel like a quietly-confident research lab rather than a SaaS landing.
Cyphr
strongCreative Studio
The reference for venture-studio portfolios that flex through monumental condensed type, a single blue I-beam cursor accent, and a venetian-blind slat hero that fragments a single image into a column-rhythmic curtain.
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.
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.
Linear
flagshipDeveloper Tool
the restraint benchmark - a dark, near-monochrome product site where one indigo accent, crisp 0.16s motion and an animated dot-grid do all the work, and nothing is wasted.
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.
Locomotive
flagshipCreative Studio
The reference for cinematic Montreal creative studio — black preloader with serif logo, Lenis + Locomotive Scroll stack, Lisa AI assistant integration, emoji-heavy section labels.
Mishcon De Reya
flagshipProfessional Services
a top London law firm that ditches the navy-and-columns cliche for a dark, editorial, almost magazine-grade site, near-black grounds, full-bleed photographic heroes, a single burnt-orange accent and clean Helvetica Now type, anchored by a prominent "How can we help you?" search bar.
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.
Supabase
strongDeveloper Tool
open-source developer infrastructure made warm and confident - a light, Circular-set product site where one signature green and code-forward proof carry a Postgres platform.
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.
The Modern House
flagshipReal 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.
Tinybird
strongData Infrastructure
a terminal-aesthetic developer-analytics site where Roboto + Roboto Mono on near-black `#151515` and a single electric-mint accent (`#27f795`) carry a "Managed ClickHouse" pitch through `[bracketed]` mono tab labels and a tiny six-keyframe motion budget that includes a literal `blink` cursor.
Your Creative
nicheCreative Studio
a Melbourne and Sydney creative agency that runs warm off-white pages on an eight-column grid, sets everything in the Greed grotesque from 22px body up to a 250px hero, anchors the work in oversized numbered category headers ("Science & Innovation", tagged 20) and floats a blurred pill nav while a custom cursor and a soft 3D blob carry the personality.