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.

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 Anthropic

Anthropic

flagship

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

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

Caffe Design

niche

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

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 Cursor

Cursor

strong

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

Screenshot of Cyphr

Cyphr

strong

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

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

Linear

flagship

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

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 Locomotive

Locomotive

flagship

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

Screenshot of Mishcon De Reya

Mishcon De Reya

flagship

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

Screenshot of Softstart

Softstart

niche

Hr Platform

The reference for B2B SaaS blog templates with AI-summarisation chips — softstart.app redirects to Workleap's blog article on onboarding software.

Screenshot of Supabase

Supabase

strong

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

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

Tinybird

strong

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

Screenshot of Your Creative

Your Creative

niche

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

Back to the full collection