Article pages

16 sites with a deeply-analysed article page , across consumer brand, developer tool, editorial publishing, hospitality, saas product, creative studio, retail, data infrastructure. 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 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 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 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 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 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