Maap
maap.ccan 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.
Design tokens
- display
- Times Now (semilight + italic)
- body
- TWK Everett
- mono
- TWK Everett Mono
- accent
- Rhymes Display (ultralight)
Do / Don't
Reference it for
- A real token system: role tokens (--surface-*, --text-*, --border-*), a named type scale (title1-title5, subtitle, copy), and a --fluid-* clamp family.
- Near-monochrome #222-on-#fff with one electric chartreuse (#ccfd50) accent used sparingly.
- TWK Everett grotesque (400/500) for structure, Times Now (300/400 italic) as a display-serif headline voice, TWK Everett Mono for labels.
- A muted, full-bleed autoplay-video hero for an apparel brand, with a single "Shop Now" CTA.
- Consistent 24px radius on cards and media, and Swiper for product carousels.
Do not copy
- The MAAP wordmark, the "Speed Shift" campaign language and the rider photography are brand identity; borrow the system, not the content.
- TWK Everett, Times Now and Rhymes Display are licensed; map to a similar grotesque plus display-serif pairing.
- The chartreuse is MAAP's signature spark; pick the client's own single accent rather than reusing this exact green.
Signature moves
role-token plus fluid-clamp design system
a real token system with role tokens (--surface-*, --text-*, --border-*), a named type scale (title1-title5, subtitle, copy) and a --fluid-* clamp family makes the build feel engineered rather than themed
grotesque plus display-serif-italic pairing
TWK Everett grotesque (400/500) provides structure, Times Now (300/400 italic) is the display-serif headline voice and TWK Everett Mono handles labels, near-monochrome #222-on-white with one electric chartreuse #ccfd50 spark
muted full-bleed autoplay-video hero
a muted full-bleed autoplay-video hero anchors the apparel brand with a single "Shop Now" CTA, and Swiper drives the product carousels
Related references
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.
Cubitts
nicheHealth
a London bespoke-spectacle maker treating its Shopify storefront like a design museum, near-black ink on white, a tiny precise type scale in its own Fold Grotesque, generous 16px-radius media tiles, and a giant "CUBITTS" wordmark laid behind a Greenwich Observatory photograph.
Edition Roasters
strongOther
A speciality roaster whose homepage is mostly hushed, moody photography of an empty cafe at dawn - serenity sold through atmosphere and almost no copy, with a single deep-plum accent doing all the colour work.
Erewhon
strongRetail
a cult premium grocer that turned organic groceries into a lifestyle brand, a warm off-white canvas, confident Sharp Sans, a category-led shop, and a strong mission-and-community story that justifies the premium.