Consumer Brand references

18 deeply-analysed consumer brand sites, 18 flagship-tier. Each carries the design tokens, the do and don't rules, the signature moves and the section anatomy, so an AI builder grounds a consumer brand brief in how the best sites actually build it (home, shop, product detail, article, story, location, account, careers).

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 Assembly Coffee 2

Assembly Coffee 2

flagship

Consumer Brand

The reference for editorial specialty-commerce: a cinematic product still on a warm terracotta-to-oxblood gradient, indexed by a left column of ID00 Serif italic labels set against GT America Standard Light 300 body.

Screenshot of Brightland

Brightland

flagship

Consumer Brand

The reference for warm-editorial food commerce: a cobalt Fraunces serif headline (#0061A0) over a bone still-life, offset by a saffron announcement bar (#F6BE00) and handwritten script marginalia.

Screenshot of Dia Browser

Dia Browser

flagship

Consumer Brand

The reference for a near-monochrome white canvas (#f8f8f8) where a single pink-to-blue spectrum gradient is the only colour, paired with hairline ABC Oracle weight-300 display type at 72px.

Screenshot of Diaspora Co

Diaspora Co

flagship

Consumer Brand

The reference for a warm, mission-led food commerce brand: deep-ink navy #080a5c set against fuchsia #d5137b and marigold #ffcf01 on a cream #fffdf3 ground, with an oversized p22-mackinac-pro serif hero headline over a full-bleed founder-and-farm photo.

Screenshot of Discord

Discord

flagship

Consumer Brand

The reference for turning a marketing page into a game world: a deep indigo-to-navy cosmic gradient (#3442d9 into near-black) staged with 3D characters, with all-caps ABC Ginto Nord headlines stamped like metal and blurple (#5865F2) reserved only for CTAs.

Screenshot of Distillerie Fove

Distillerie Fove

flagship

Consumer Brand

The reference for a photographic-hero spirits brand where a colossal black Maison Neue Mono wordmark sits knocked-out over a warm styled still-life, with a single orange (#fe480f) as the only accent.

Screenshot of Fishwife

Fishwife

flagship

Consumer Brand

The reference for a warm, high-appetite CPG storefront: cream #fffcf3 canvas, buttery #fecd59 pill CTAs and a floating rounded-card hero overlay set in Recoleta, letting maximalist product illustration carry all the colour.

Screenshot of Flamingo Estate

Flamingo Estate

flagship

Consumer Brand

The reference for making a garden-luxury e-commerce catalogue feel like a magazine: one olive-green ink (#45523e) on warm bone paper (#fcfbf6), a variable display serif (Exposure) over Maison Neue body, and full-bleed editorial banners cut into the product grid.

Screenshot of Fly By Jing

Fly By Jing

flagship

Consumer Brand

The reference for maximalist CPG food ecommerce: a saturated crimson-into-green colour-block system, JeanLuc condensed uppercase set enormous (88px) at heading-line-height 0.8, and a pure-yellow (#FFFF00) pill CTA that turns weeknight chilli sauce into a loud, confident brand.

Screenshot of Graza 2

Graza 2

flagship

Consumer Brand

The reference for a warm, loud DTC food brand that runs entirely on a typewriter serif (GT Alpina Typewriter) and a condensed display serif (ITC Garamond Condensed) over a bone-cream #F6E6D9 canvas, with an acid-lime #D1E030 pill CTA doing all the shouting.

Screenshot of Home Page Impossible Foods

Home Page Impossible Foods

flagship

Consumer Brand

The reference for a punk-poster food hero: blood-red condensed display type (#e10600) set ultra-tight (line-height ~0.73) on a velvet wine-dark canvas (#260212) with mask-cut food photos floating loose around the headline.

Screenshot of Honest Wolf

Honest Wolf

flagship

Consumer Brand

The reference for a farm-to-city wool goods brand that runs on olive-khaki #494D37 over warm cream #FBF8F3, Neue Haas Grotesk Display headings paired with a Pitch Sans monospace label voice, and a cinematic dark product hero cut against running NEW IN / LAST CHANCE marquee ribbons.

Screenshot of Onyx Coffee Lab 2

Onyx Coffee Lab 2

flagship

Consumer Brand

The reference for a full-bleed black cinematic coffee hero carried by a hand-drawn signature wordmark and warm creme (#FBFAF3) type, editorial ecommerce with the confidence of a gallery.

Screenshot of Porter Road

Porter Road

flagship

Consumer Brand

The reference for a full-bleed documentary-photo hero carrying a huge condensed all-caps quote in CentralAvenue-Bold white over a butcher-at-work image, with black CTAs on cream (#FEF9F2) below.

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 Teenage Engineering

Teenage Engineering

flagship

Consumer Brand

The reference for letting a single photographed product carry the whole page: a graphite studio gradient (#3a3a3e to #0f0e12), weight-100 type that nearly disappears, zero radius and zero shadow, and one rationed amber note (#F5A623) as the only chroma.

Screenshot of Verve Coffee Roasters

Verve Coffee Roasters

flagship

Consumer Brand

The reference for a warm-cream (#F4EEE5) coffee-roaster storefront that runs condensed DIN Next Medium all-caps display over lifestyle photography and lets hand-drawn rotated sticker tags carry all the personality.

Back to the full collection