ASOS DESIGN.md

Overview

Visual Theme & Atmosphere

ASOS is one of the world's largest online fashion retailers, and its visual identity is built on a deliberate philosophy of stark editorial restraint. The canvas is pure white (#ffffff) — no colour tinting, no gradients — against which product photography does all the heavy lifting. The UI chrome is kept in a signature dark charcoal (#2d2d2d) that reads as almost-black without being harsh, functioning as the navigation backbone of the entire experience. It's fashion retail distilled: get out of the way and let the product speak.

What makes ASOS instantly recognisable is its commitment to zero-radius geometry. Buttons, cards, inputs — everything is razor-sharp at 0px corner radius, echoing the bold uppercase wordmark. The sole exception is the search bar (19px pill radius), which creates a deliberate softness for the search affordance. This geometry reflects the fashion editorial aesthetic: the grid is dense, precise, and unapologetic.

The only moments of colour in the system are purposeful: an electric lime (#ccff00) for the app download promo banner, a confident ASOS green (#018849) for the "Add to bag" CTA, and a sale red (#d01345) for discounted prices. These three colours never compete — lime is sitewide utility, green is the commerce action, red is the price signal. Everything else is black and white.

Key Characteristics:

• futura-pt as the single brand typeface — geometric, condensed, all-caps for nav items
• Zero-radius geometry across all interactive elements (0px) — only search input uses pill (19px)
• Near-black charcoal (#2d2d2d) as the primary nav/surface colour — not pure black
• White canvas (#ffffff) with shadow-free flat layout — separation by hairlines (#dddddd)
• Three brand accent colours: lime (#ccff00) / green (#018849) / sale-red (#d01345)
• Ultra-bold weight 900 for primary nav labels (WOMEN / MEN) — extreme contrast for dense fashion grid
• Product photography centred; UI chrome is deliberately minimal and undistracting

Primary tasks

• Search for a specific item instead of browsing by category
• Filter a category down to the sizes that fit you
• See whether your size is available before opening the product
• Add an item to the bag and keep browsing
• Scan the New In section as a live trend feed

Brand Narrative

ASOS (As Seen On Screen) was founded in 2000 in London by Nick Robertson and Quentin Griffiths, with the original premise of selling products seen on celebrities in film and TV. The name was literal: shoppers could identify a piece worn on screen and buy an equivalent on ASOS. That celebrity-referencing origin shaped the brand's democratic instinct — fashion as something you see on people you admire, then access for yourself, not something gatekept behind boutique doors.

The business evolved rapidly from a niche celebrity-copycat service into one of the world's largest pure-play fashion retailers, serving customers in over 200 countries. ASOS is headquartered in London but operates as a fundamentally digital-first business — no physical stores, no concessions. Everything is the app and the website. This digital-native identity is deeply embedded in the design system: the UI exists to surface product at scale, not to create an aspirational in-store atmosphere.

ASOS's signature move is radical breadth: thousands of brands alongside its own label (ASOS DESIGN), size-inclusive ranges (Curve, Petite, Tall, AS/4U), and an aesthetic that accommodates every style rather than imposing one. The design system reflects this: a neutral, editorial monochrome frame that carries any product photography without competing with it. The brand doesn't have a look — it has a container that makes everything else look good.

What ASOS refuses: the exclusivity and gatekeeping of traditional fashion retail. What it embraces: scale, inclusivity, speed-to-trend, and the proposition that fashion should be findable and affordable by everyone.

Principles

1. Product first, chrome second. The UI exists to surface product photography. Every design decision that reduces distraction from the product grid is the right decision. UI implication: zero-radius cards, shadow-free layout, near-monochrome system colours.
2. Breadth as a feature. ASOS's value proposition is quantity and variety at accessibility — every style, every size, every price point. UI implication: the dense product grid that maximises product exposure per viewport pixel; category navigation that covers every department.
3. Fashion for everyone, not for someone. Inclusivity is non-negotiable. Size-inclusive ranges (Curve, Petite, Tall, AS/4U) are first-class, not footnotes. UI implication: size selector design accommodates extended ranges without visual hierarchy that deprioritises non-standard sizes.
4. Speed and freshness. ASOS's "New In" is a genuine product promise — newness at extreme velocity. UI implication: the New In tab is prominent, the product card grid is optimised for scanning at speed rather than lingering.
5. The action is always clear. In an environment of thousands of products and dozens of categories, the commerce action must be unambiguous. UI implication: the single green add-to-bag button is the only green in the system — colour has been reserved so the action is unmistakable.

Personas

Personas below are fictional archetypes informed by publicly observable ASOS user segments, not individual people.

Maya Chen, 22, Manchester. University student, fashion-conscious on a student budget. Browses ASOS's New In section multiple times a week, using it as a live trend feed. Sizes between Petite and standard ranges depending on the item. Values the breadth — she can find everything from high-street dupes to genuinely distinctive pieces in one place. Finds the dense product grid ideal for rapid scanning. Gets frustrated if checkout is multi-step.

Jordan Williams, 28, London. Menswear enthusiast who uses ASOS for everyday staples and occasional trend pieces. Appreciates the Brands section for discovering smaller labels he wouldn't otherwise find. Size-filters are non-negotiable — he sizes out of standard ranges in some categories. Values the search functionality: types specific item descriptors rather than browsing by category.

Sophie Okafor, 35, Birmingham. Working professional buying occasion wear and smart-casual wardrobe pieces. Uses the sale section extensively. Has ASOS Premier delivery for the year. Values the detailed product descriptions and multiple image angles. Would leave if size availability wasn't clearly shown before she had to click through.

Colors

Primary Surface

• Charcoal (#2d2d2d): Primary navigation background, the defining surface colour of the ASOS chrome. Not pure black — a softened near-black that reads as sophisticated restraint.
• Canvas White (#ffffff): Page background, product cards, form inputs. All commerce content lives on white.
• Pure Black (#000000): Body text, headings, product names — maximum contrast on white.

Navigation & Interactive

• Nav Active (#525050): Slightly lighter charcoal for active/hover nav items (Women tab when viewing Women).
• Muted (#666666): Utility nav text (Help & FAQs, footer links) — secondary level.
• Muted Alt (#858585): Tertiary text, meta information.

Commerce Actions

• ASOS Green (#018849): The "Add to bag" button — the single primary commerce CTA. A deep confident green that signals a positive, completing action.
• Sale Red (#d01345): Reduced prices, sale tags, discount labels. A vivid crimson that demands attention on dense product grids.
• Lime / Acid Yellow (#ccff00): App download promo banner. A high-visibility editorial accent that cuts through the black-and-white system with maximum energy.

Neutral Scale

• Surface (#f8f8f8): Very light grey for alternate surface backgrounds.
• Surface Alt (#f7f7f7): Secondary tint for sections.
• Neutral Light (#e8e8e8): Light grey for size selector chips (selected/available states).
• Hairline (#dddddd): Dividers and borders between elements.
• Info Blue (#27455c): Informational text and link states in some editorial surfaces.

Typography

Font Family

• Primary: futura-pt (Futura PT), with fallback: Tahoma, Geneva, Verdana, Arial, sans-serif
• Alternate: Futura-pt, "Futura Std" — used for sub-nav and secondary elements
• All display and navigation text is uppercase; body and product description text is mixed case

Hierarchy

Principles

• Futura everywhere: a single geometric sans-serif creates absolute system consistency across all touchpoints
• Weight signals hierarchy: 900 for primary nav commands, 700 for actions and prices, 600 for promo, 400 for body and utility
• Uppercase for identity: navigation and CTA text is rendered in uppercase, reinforcing the editorial fashion aesthetic
• Zero kerning manipulation: tracking is standard — Futura's own geometry provides the visual rhythm
• Compact line heights: body line-height is 1.0 (16px on 16px) — the grid is dense, not airy

Layout

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px
• Notable: The system is dense — 0px padding between product cards in the grid. Spacing appears on section breaks and inner card padding.

Grid & Container

• PLP: multi-column product grid (4+ columns desktop), fluid with image-first cards
• PDP: left-aligned images (sticky scroll), right-aligned product details, size/colour selectors below title
• Full-width charcoal navigation bar (60px height) with logo centered/left and utility nav right
• Sitewide lime banner at page top (30px height) above the main nav
• Sub-navigation: secondary 50px bar for category filtering

Whitespace Philosophy

• Product density over airiness: ASOS maximises product grid density. The browsing surface is commerce-first; whitespace is between products, not as a design statement.
• Flat depth: no shadows anywhere on the live site — border separation and background tints do all the hierarchy work.
• Zero radius discipline: sharp 0px corners on every interactive element except the search pill, reinforcing the editorial brand.

Border Radius Scale

• Zero (0px): all buttons, cards, badges, tabs, size chips — the system default
• Pill (19px): search input only — the single exception
• Full (9999px): not present in the live UI

Responsive Behavior

Breakpoints

Touch Targets

• Add to bag: 44px height — comfortable touch target
• Size selector chips: 56px height — large touch targets for fashion browsing
• Nav tabs: 60px height — primary nav comfortably tappable
• Search bar: 38px height with 16px left padding

Collapsing Strategy

• Navigation: full horizontal primary nav → hamburger with slide-out on mobile
• Product grid: 4-column → 2-column → single column stacked
• Hero: maintains full-width editorial images across all sizes, CTA stacks below on mobile
• Sub-nav: horizontal scroll on mobile

Elevation & Depth

Shadow Philosophy: ASOS runs a completely shadowless system. Every surface is flat. Depth is communicated solely through stark colour contrast: charcoal (#2d2d2d) nav against white canvas, lime banner as an absolute visual layer, green add-to-bag as the one coloured action. The flatness is not an oversight — it keeps the focus on product photography, which supplies all the three-dimensional interest the page needs.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none

Motion & Easing

Durations:

Easings:

Motion rules: ASOS motion is functional and unobtrusive — the fashion content is the theatre, not the UI. Hover states on product cards (like/save icons appearing) use motion-fast; navigation dropdowns use motion-standard. No spring, no bounce, no theatrical delay. The product grid should feel fast and responsive — slow motion would undermine the rapid-browse behaviour the system is built for. Under prefers-reduced-motion: reduce, all transitions collapse to instant; the page remains fully navigable.

Components

Buttons

Add to Bag (Primary Commerce CTA)

• Background: #018849
• Text: #ffffff
• Radius: 0px
• Padding: 4px 0px
• Height: 44px
• Font: 16px futura-pt weight 700
• Use: Primary add-to-bag action on product detail page, full-width

Hero Editorial CTA (on dark image)

• Background: #ffffff
• Text: #000000
• Radius: 0px
• Padding: 9px 14px
• Height: 44px
• Font: 16px futura-pt weight 700
• Border: 2px solid #ffffff
• Use: SHOP WOMENS / SHOP MENS on hero editorial image

Hero Editorial CTA (bordered, on light image)

• Background: #ffffff
• Text: #000000
• Radius: 0px
• Padding: 9px 14px
• Height: 44px
• Font: 16px futura-pt weight 700
• Border: 2px solid #000000
• Use: SHOP WOMEN'S BRANDS / secondary hero CTA on lighter backgrounds

Retry / Utility Action

• Background: #2d2d2d
• Text: #ffffff
• Radius: 0px
• Padding: 15px
• Height: 48px
• Font: 14px futura-pt weight 900
• Use: Utility/error state action buttons

Inputs

Search Bar

• Background: #ffffff
• Text: #2d2d2d
• Radius: 19px
• Padding: 0px 70px 0px 16px
• Height: 38px
• Font: 16px futura-pt weight 400
• Use: Global search input in header — the only rounded element in the system

Size Selector

• Background: #e8e8e8
• Text: #000000
• Radius: 0px
• Height: 56px
• Font: 16px futura-pt weight 400
• Use: Size selection chips on PDP

Cards

Product Grid Card

• Background: #ffffff
• Text: #000000
• Radius: 0px
• Use: PLP product card — no border, no shadow, sharp edges; image fills full card width

Surface Section

• Background: #f8f8f8
• Text: #000000
• Radius: 0px
• Use: Alternating content sections and page regions

Badges

Sale Badge

• Background: #d01345
• Text: #ffffff
• Radius: 0px
• Font: 12px futura-pt weight 700
• Use: Reduced price / sale tag on product cards in PLP

Lime Promo Banner

• Background: #ccff00
• Text: #000000
• Radius: 0px
• Padding: 0px 16px
• Height: 30px
• Font: 14px futura-pt weight 600
• Use: Sitewide app download promo — high-visibility editorial lime banner

Tabs

Primary Gender Nav Tab

• Background: #2d2d2d
• Text: #ffffff
• Radius: 0px
• Height: 60px
• Font: 14px futura-pt weight 900
• Active: background shifts to #525050 on active/hover gender tab
• Use: WOMEN / MEN primary navigation tabs

Category Sub-Nav Tab

• Background: #525050
• Text: #ffffff
• Radius: 0px
• Height: 50px
• Padding: 0px 10px
• Font: 14px futura-pt weight 400
• Use: Category tabs (Sale, New in, Clothing, Dresses, Shoes, Accessories, Brands…)

Verified: 2026-06-22 Tier 1 sources: https://www.asos.com/ (homepage, live computed style via playwright); https://www.asos.com/noisy-may/noisy-may-cropped-tank-top-in-washed-grey/prd/205778249 (PDP — Add to bag, size selector, nav observed) Tier 2 sources: getdesign.md/asos — 404 (no entry); styles.refero.design/?q=asos — no ASOS results found (fashion adjacent brands returned, but not ASOS) Conflicts unresolved: none

States

Do's and Don'ts

Do

• Use futura-pt uppercase for all nav labels and CTAs — it's the brand's typographic identity
• Use weight 900 for primary nav items (WOMEN/MEN) — the extreme weight is intentional
• Use sharp 0px radius on all buttons, cards, and badges — zero rounding is the brand's geometry
• Use #2d2d2d charcoal (not pure black) for the nav and primary chrome
• Reserve #018849 ASOS green exclusively for the add-to-bag action
• Use #ccff00 lime only for promotional banners — it's a maximum-energy editorial statement
• Use #d01345 red only for sale prices and discount indicators
• Keep the layout flat — no shadows; use hairlines and tints for separation

Don't

• Apply rounded corners to any button or card — 0px radius is non-negotiable
• Use multiple accent colours simultaneously — lime, green, and red each have a single role
• Use a weight below 700 on hero CTAs — the fashion editorial aesthetic requires bold confidence
• Use inline decorative shadows — the system is flat by design
• Mix futura-pt with secondary display typefaces — the single-font system is strict
• Apply the lime (#ccff00) colour to interactive elements other than promo banners
• Put the add-to-bag green on non-commerce actions — it signals "completing purchase"

Voice & Tone

ASOS's voice is the confident best-friend who always knows what's cool and makes fashion feel accessible, not exclusive. Where luxury brands whisper, ASOS speaks plainly. Where editorial magazines lecture, ASOS enthuses without condescension. The brand's personality is young, inclusive, and irreverent — it sells fashion to everyone without making anyone feel like they need to earn entry.

Voice keywords: accessible, confident, inclusive, fashion-forward, unpretentious, direct.

Forbidden register: gatekeeping luxury language ("investment piece", "curated edit"), tech startup enthusiasm ("disrupt", "revolutionise"), jargon-heavy fashion crit ("deconstructed silhouette"), or anything that excludes the broad demographic ASOS explicitly serves.

Voice samples (live site, 2026-06-22):

• "Download our new app" — app banner (direct, energetic). (verified live 2026-06-22)
• "SHOP WOMENS" — hero CTA (uppercase, energetic). (verified live 2026-06-22)
• "Search for items and brands" — search placeholder (plain, inclusive "brands" nod). (verified live 2026-06-22)

Agent Prompt Guide

Quick Color Reference

• Primary nav / surface: ASOS Charcoal (#2d2d2d)
• Active nav: (#525050)
• Background / canvas: White (#ffffff)
• Body text: Black (#000000)
• Muted text: (#666666)
• Add to bag CTA: ASOS Green (#018849)
• Sale price: Sale Red (#d01345)
• Promo banner: Lime (#ccff00) with black text
• Hairline: (#dddddd)

Example Component Prompts

• "Create an ASOS-style product card: white background, no border-radius, no shadow. Product image full-width. Product name at 14px futura-pt weight 400, #000000. Price at 16px weight 700 #000000. Sale price in #d01345."
• "Design an ASOS add-to-bag button: background #018849, white text #ffffff, 0px radius, full-width, 44px height, 16px futura-pt weight 700, uppercase."
• "Build ASOS nav: #2d2d2d charcoal background, 60px height. WOMEN and MEN tabs at 14px futura-pt weight 900, white text. Below: #525050 sub-nav 50px with Sale/New in/Clothing/Dresses tabs at 14px weight 400."
• "Create ASOS search bar: white background #ffffff, #2d2d2d text, 19px border-radius (pill), 38px height, 16px futura-pt weight 400, placeholder 'Search for items and brands'."
• "Design ASOS hero section: full-width editorial image, overlay two CTAs: 'SHOP WOMENS' and 'SHOP MENS' — white background, black text #000000, 0px radius, 2px solid white border, 9px 14px padding, 16px futura-pt weight 700 uppercase."

Iteration Guide

1. Futura PT geometric sans, uppercase for identity — weight 900 on primary nav, 700 on CTAs
2. Zero-radius discipline: 0px on everything except the search pill (19px)
3. Charcoal #2d2d2d is the brand's navy/black — use it, not #000000, for nav chrome
4. Green is commerce only (#018849) — add to bag, checkout, completing actions
5. Red is price signal only (#d01345) — sale and reduced prices
6. Lime is promo only (#ccff00) — maximum-energy editorial statement, sparingly
7. No shadows, ever — flat hairlines and tints separate the layout