Gymshark

www.gymshark.com/

a fitness-apparel giant running a fast, monochrome Next.js storefront, pure black and white with grey support, Roboto for UI and a Montserrat display voice, near-square 4px product chrome against full-pill 56px CTAs, and a tight set of 0.2-0.25s ease transitions that keep a huge catalogue feeling quick.

Fitness Apparel flagship

Design tokens

black

white

grey-200

grey-100

grey-mute

grey-500

grey-700

display: Montserrat
body: Roboto
mono: none

Do / Don't

Reference it for

Strict monochrome (black/white/grey, no brand colour) so product photography carries all the colour and attention.
A full-bleed editorial hero over a fast, tight product carousel/grid, the canonical DTC apparel homepage.
A consistent 16px-gap grid system (16px is by far the most common gap) that keeps dense product layouts tidy.
A clear chrome contrast: near-square 4px product elements against full-pill 56px primary CTAs.
Snappy, short-duration motion (0.2-0.25s ease) that makes a large catalogue feel quick; a clean Next.js commerce reference.

Do not copy

The commerce machinery (60 keyframes of modals, snackbars, low-stock pulses) is scaled for a massive catalogue; a small client needs a fraction of it.
The strict no-colour palette only works with strong photography; without it, the site looks bare.
Montserrat and Roboto are free, but the exact monochrome treatment is Gymshark's; differentiate with the client's own imagery and one optional accent.

Signature moves

strict monochrome commerce canvas

pure black and white with grey support and no brand colour lets product photography carry all the colour across a fast Next.js storefront.

16px-gap product grid with chrome contrast

a consistent 16px-gap grid keeps dense product layouts tidy, with near-square 4px product chrome contrasted against full-pill 56px primary CTAs.

snappy short-duration motion

tight 0.2-0.25s ease transitions make a large catalogue feel quick over a full-bleed editorial hero on a fast product carousel.

Related references

Coco Republic

strong

Other

An Australian luxury furniture and interior-design house that fuses editorial aspiration with e-commerce - a calm near-white canvas, a Goldenbook serif over Moderat sans, full-bleed styled-room photography, an "Inside Our Universe" editorial layer (journals, catalogues, design portfolios) and a "Shop Coco Republic" category grid, plus a full interior-design service.

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.

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.

Allbirds

strong

Retail

a natural-materials footwear brand whose store leads with a full-bleed lifestyle hero, a warm sand-and-oat palette over charcoal text, the Geograph sans paired with a Self Modern serif and Akkurat Mono, and a Tailwind-powered Shopify build that turns sustainability into a calm, premium retail feel.