---
version: alpha
name: Gymshark
description: Hardcore-minimal fitness retail. Near-pitch-black and white UI surfaces fade into gym photography, while bold uppercase Montserrat display type channels the intensity of the weight room. Tiny radius, flat shadows, high-density product grids.

colors:
  # Primary canvas
  background: "#ffffff"
  surface: "#f5f5f5"
  surface-dark: "#000000"

  # Text / ink
  ink: "#000000"
  ink-secondary: "#444444"
  ink-tertiary: "#6e6e6e"
  ink-muted: "#53565a"

  # Brand accent — Gymshark uses black as its primary action color; accent is informational blue
  primary: "#000000"
  on-primary: "#ffffff"
  primary-container: "#1b1b1b"

  # Interaction / state
  text-hover: "#565656"          # was rgb(86,86,86) — link hover color
  focus-ring: "#007db5"          # was rgba(0,125,181,1) — input focus outline color
  focus-ring-tint: "#007db5"     # same source, used as focus border

  # Semantic
  error: "#bf2e35"               # --particles-color-red-400
  error-bright: "#ff453a"        # --particles-color-lightred-400
  warning: "#ffb005"             # --color-icon-warning
  success: "#2c8349"             # --particles-color-green-500
  info: "#007db5"                # --color-icon-accent

  # Borders
  border: "#bbbcbc"              # --color-border-primary
  border-subtle: "#e7e7e7"       # from raw palette / border combinations
  border-divider: "#ebebeb"      # nav/ul dividers (rgb 235,235,235)

  # Shadow tint
  shadow-soft: "#000000"         # rgba(0,0,0,0.1) 0px 4px 15px — flattened to black

typography:
  display-hero:
    fontFamily: "Montserrat, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0px
  display:
    fontFamily: "Montserrat, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  heading-section:
    fontFamily: "Montserrat, Helvetica, Arial, sans-serif"
    fontSize: 25px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Montserrat, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  label-ui:
    fontFamily: "Montserrat, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Roboto, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Roboto, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-bold:
    fontFamily: "Roboto, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Roboto, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.36
    letterSpacing: 0px
  button-ui:
    fontFamily: "Roboto, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Roboto, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  caption-body:
    fontFamily: "Roboto, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  3xl: 48px
  4xl: 64px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  pill: 9999px

components:
  # Buttons
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    border: "1px solid {colors.ink}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 0px

  # Product cards
  card-product:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px
  card-ui:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 24px

  # Inputs
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    border: "1px solid transparent"
    padding: 0px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    boxShadow: "0px 2px 6px rgba(0,125,181,0.15)"
    outline: "2px solid rgba(0,125,181,0.5)"
    rounded: "{rounded.sm}"
    padding: 0px 12px

  # Navigation
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  banner-promo:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    padding: 8px 16px

  # Badges / tags
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 5px 8px

  # Tab / filter pills
  tab-pill:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 6px 16px
  tab-pill-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
    padding: 6px 16px

  # Wishlist / icon button
  button-icon:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: 8px
    size: 56px
---

# Gymshark Design System

## Overview

Gymshark.com is a fitness retail site built like a manifesto poster — raw, uncompromising, and muscular. The design philosophy is gymfloor minimalism: strip the UI to near-nothing so that full-bleed photography of athletes in motion carries all the emotional charge. The canvas is white (`{colors.background}`) bordered by pure black (`{colors.ink}`), and every interaction element — buttons, nav links, product tags — lives in that same binary range. There is no brand color beyond black and white. The gear on the models is the color story. The interface just gets out of the way.

The two-font system is its own form of branding. Montserrat Bold in uppercase runs every headline and section label with a tight 1.1–1.25 line-height that reads as athletic determination rather than editorial refinement. It has the weight-room intensity of a chalkboard PR. Roboto Regular and Medium handle all transactional copy — nav links, product details, legal text — at workhorse legibility settings (1.4–1.75 line-height). The split signals "inspiration vs. information" with zero ambiguity. Combined with a near-zero radius system (mostly `{rounded.none}` with a `{rounded.sm}` 4px at form controls), the design has sharp, functional edges throughout — no softness, no decorative rounding, nothing that would feel out of place in a concrete-floor gym.

Elevation is handled with one tool: a diffuse `{shadow-soft}` box-shadow (`0px 4px 15px rgba(0,0,0,0.1)`) that lifts modals, drawers, and overlaid panels. The rest of the surface is flat. Focus states tap a calm informational blue (`{colors.focus-ring}`) pulled from Gymshark's Particles design system — the only non-black accent in the UI, reserved entirely for keyboard accessibility.

**Key Characteristics:**
- Binary ink-on-white palette (`{colors.ink}` on `{colors.background}`) with no brand accent color in standard UI — photography is the only color source
- Montserrat Bold uppercase for all display and section headings — signals athletic intensity over editorial warmth
- Roboto for all body, nav, and transactional copy — efficient workhorse legibility
- Sharp-edge components: primary CTA buttons are `{rounded.none}` — no rounded corners on interactive surfaces
- `{rounded.sm}` (4px) appears only on form controls and UI containers; `{rounded.pill}` reserved for tab filters and icon buttons
- 8px base spacing grid with 6px as the densest product-grid gap
- A single diffuse shadow (`0px 4px 15px rgba(0,0,0,0.1)`) for elevated surfaces — otherwise completely flat
- Focus ring in informational blue (`{colors.focus-ring}`) as the only chromatic UI element
- Full-bleed hero photography with gradient scrim overlays for text legibility
- Product card grid with near-zero gutters, sharp edges, and tappable full-surface hit targets
- Uppercase text-transform applied pervasively to Montserrat tokens — labels and CTAs always shout
- Dense, content-forward layout: product thumbnail grids use 6–8px gaps; section breaks are 40–48px

## Colors

### Primary Canvas
- **White** (`{colors.background}`): Primary page surface, input backgrounds, nav bar, card surfaces
- **Light Gray** (`{colors.surface}`): Secondary surface, product card backgrounds on neutral shots, badge fills
- **Black** (`{colors.surface-dark}`): Inverted hero sections, dark-mode promotional areas

### Text / Ink
- **Ink** (`{colors.ink}`): All primary text, headings, CTA button fills, nav links
- **Dark Gray** (`{colors.ink-secondary}`): Secondary body text, product price de-emphasis
- **Mid Gray** (`{colors.ink-tertiary}`): Tertiary metadata, placeholder text
- **Warm Gray** (`{colors.ink-muted}`): Muted labels, less-prominent secondary copy

### Interaction States
- **Text Hover** (`{colors.text-hover}`): Link hover color — softens black to charcoal on hover
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus outline on inputs; pulled from Gymshark's Particles system (informational blue). Flattened from `rgba(0,125,181)`.

### Semantic
- **Error** (`{colors.error}`): Validation errors, destructive actions
- **Error Bright** (`{colors.error-bright}`): Alert-level error states
- **Warning** (`{colors.warning}`): Caution indicators, stock-warning badges
- **Success** (`{colors.success}`): Positive confirmation, in-stock states
- **Info** (`{colors.info}`): Informational highlights, matching `{colors.focus-ring}`

### Borders & Dividers
- **Border** (`{colors.border}`): Default form control and card borders
- **Border Subtle** (`{colors.border-subtle}`): Faint dividers between sections
- **Border Divider** (`{colors.border-divider}`): Nav mega-menu panel separators

## Typography

### Font Family
- **Display / Headlines**: `Montserrat`, fallbacks: `Helvetica, Arial, sans-serif`. Bold 700 only. Always uppercase. Used for hero copy, section headers, category labels, filter tags.
- **Body / UI**: `Roboto`, fallbacks: `Helvetica, Arial, sans-serif`. Weights 400, 500, 600, 700. Used for all body copy, nav links, product names, prices, CTAs, captions.
- **Icon Font**: `gymshark-icons` (self-hosted woff) — custom icon glyph set for wishlist, cart, search, and navigation icons.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-bleed hero overlays, campaign headline overlays (48px, 700) |
| `display` | Section heroes, editorial callout headlines (32px, 700) |
| `heading-section` | Category section headers, product collection titles (25px, 700) |
| `heading-sub` | Sub-category labels, feature callouts (20px, 700) |
| `label-ui` | Filter tabs, nav category labels, badge text (13px, 700) |
| `body-large` | Intro paragraphs, featured copy blocks (20px, 400) |
| `body` | Product descriptions, form labels (16px, 400) |
| `body-bold` | Emphasized body copy, product name in listings (16px, 700) |
| `nav-link` | Primary and secondary navigation links (14px, 500) |
| `button-ui` | CTA button labels (14px, 700) |
| `caption` | Price labels, availability badges, uppercase metadata (12px, 700) |
| `caption-body` | Legal text, fine print, secondary captions (12px, 400) |

### Principles
- Montserrat is used exclusively at weight 700 — there is no light or regular Montserrat. The typeface only appears when the design needs maximum assertion.
- Uppercase transforms are applied at the CSS level to Montserrat instances — the font token itself doesn't encode text-transform, but all display and label uses are uppercase in practice.
- Roboto handles all transactional density at weights 400, 500, and 700 — weight is the primary hierarchy signal within body copy.
- Letter-spacing is not used as a tracking tool; all tokens are set to 0px to preserve natural Roboto and Montserrat spacing.

## Layout

### Spacing System

The complete spacing scale lives in the `spacing:` token block above. Base unit: 8px, with a secondary 6px density for tight product grid gutters.

Gymshark's spacing is athletic in its discipline: generous breathing room between editorial sections (`{spacing.2xl}`–`{spacing.4xl}`), but aggressively tight product grids (6–8px gaps) that create a sense of inventory abundance — like products stacked at a trade show, not spaced out in a gallery.

### Grid & Container
- Max content width: 1440px (full-bleed within viewport up to 2560px breakpoint)
- Product grid: 4-column on large desktop, 3-column on tablet, 2-column on mobile
- Grid gap: 6–8px between product cards — deliberately tight for density
- Horizontal padding: `{spacing.3xl}` desktop, `{spacing.lg}` tablet, `{spacing.md}` mobile

### Whitespace Philosophy
- Section breaks between editorial zones: `{spacing.2xl}`–`{spacing.4xl}`
- Internal component spacing: `{spacing.sm}`–`{spacing.md}` — nothing feels padded or luxurious
- The design earns its whitespace only at the page level; components themselves are tight

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all product cards, buttons, nav elements |
| Subtle (Level 1) | `rgba(0,0,0,0.1) 0px 4px 15px 0px` | Dropdown panels, notification trays, quick-view modals |
| Scrim Overlay | `rgba(0,0,0,0) → rgb(0,0,0)` linear gradient | Hero text legibility over full-bleed photography |
| Focus Ring | `0px 2px 6px rgba(0,125,181,0.15)` + 2px outline | Input keyboard focus |

**Shadow Philosophy**: Gymshark is nearly flat. One diffuse shadow (`0 4px 15px rgba(0,0,0,0.1)`) lifts floating elements — drawers, dropdowns, modals — above the page surface. Product cards have zero elevation; they live flush with the background. The only other "depth" treatment is the photographic gradient scrim used to darken hero images enough for white display text to read. This restraint keeps the UI feeling like a clean locker-room whiteboard: functional, zero embellishment.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system is nearly binary.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons (primary, secondary, ghost), product cards, hero imagery, full-width banners |
| `xs` | 2px | Rare edge case on micro-UI elements (button loading spinner context) |
| `sm` | 4px | Comboboxes, listboxes, badges, form inputs — the only softened chrome in the system |
| `pill` | 9999px | Tab/filter pills, icon buttons (wishlist, media controls), circular elements |

Gymshark's radius philosophy is functional rather than expressive: the UI components that require tapping or clicking are either fully sharp (`{rounded.none}` for primary CTAs) or fully round (`{rounded.pill}` for filters and icon actions). The in-between `{rounded.sm}` only appears where browsers expect it for form controls and where a badge sits inline with text. There is no decorative radius anywhere in the system.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card-product}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — Solid `{colors.primary}` (black) fill, white text, zero radius. The primary CTA — "Shop Now", "Add to Bag". Hover darkens to `{colors.primary-container}`.
- **`button-secondary`** — White fill with 1px black border, zero radius. Used for secondary actions alongside a primary, e.g. "Shop The Collection".
- **`button-ghost`** — Transparent fill, black text, no border. Used for text-link style actions within product modules.

### Cards

- **`card-product`** — `{colors.surface}` background, zero radius, zero padding. Product image fills the card frame edge-to-edge. Typography (`{typography.body-bold}` for name, `{typography.caption}` for price) sits below in a tight stack. No hover shadow.
- **`card-ui`** — White fill, `{rounded.sm}` corners, `{spacing.lg}` padding. Used for account panels, informational content blocks.

### Inputs

- **`input`** — White background, transparent border by default, `{rounded.sm}` corners. Receives `{colors.border}` border on user interaction before focus.
- **`input-focus`** — Blue focus ring and box-shadow via `{colors.focus-ring}` — the one moment of color in the form system.

### Navigation

- **`nav-bar`** — White sticky header. Gymshark wordmark logo centered. Category links left-aligned on desktop. Search, wishlist, account, and bag icons right-aligned. Height ~60px. Link hover transitions to `{colors.text-hover}` over 0.2s ease-in-out.
- **`banner-promo`** — Full-width top bar for promo messaging ("Students get 13% off"). White background at default; can swap to `{colors.surface-dark}` for sale events.

### Badges / Tags

- **`badge`** — `{colors.surface}` fill, black text, zero radius, uppercase. Tacked onto product cards for collection labels ("NEW IN", "GSLC").

### Tab / Filter Pills

- **`tab-pill`** — Transparent fill, `{rounded.pill}` radius. Default inactive state for collection filters.
- **`tab-pill-active`** — `{colors.ink}` fill, white text. The active state flips to a solid black pill — the most rounded element in the design system.

## Do's and Don'ts

### Do
- Use `{colors.ink}` black for all primary CTAs — the button background is the brand. Never introduce a secondary brand color for CTAs.
- Keep buttons at `{rounded.none}` — the sharp edge is part of Gymshark's identity. Don't soften primary interactive elements.
- Let full-bleed photography carry all chromatic identity — UI surfaces stay `{colors.background}` or `{colors.surface}`.
- Apply `text-transform: uppercase` to all Montserrat display and label tokens — the font requires it to read as intended.
- Use `{typography.display-hero}` exclusively at 48px or above for hero overlays on photography. Avoid shrinking it into body-copy contexts.
- Use the `{colors.focus-ring}` blue only for keyboard focus states — it's the accessibility color, not a design accent.
- Keep product card grids tight (6–8px gaps) to create the warehouse-of-options density that matches Gymshark's retail energy.
- Apply `{shadow-soft}` (`0px 4px 15px rgba(0,0,0,0.1)`) only for floating / elevated panels, not cards or static elements.

### Don't
- Don't add border-radius to primary buttons — even 2px rounds undercuts the sharp-edge system identity.
- Don't use Montserrat at weights below 700 or in sentence-case — it reads as a different typeface at those settings.
- Don't introduce elevation (shadows) on product cards — Gymshark's grid is flat, dense, and competitive, not editorial or lifted.
- Don't use `{colors.focus-ring}` blue as a brand accent outside focus states — it would collide with the strict black/white identity.
- Don't pad product grids generously — the tight 6px gap creates the intentional abundance feel. Wider gaps make it feel like a boutique, not a performance brand.
- Don't mix Montserrat and Roboto in the same text block — they split editorial headlines from transactional body; blending breaks the system logic.
- Don't use gradients in UI surfaces — gradients only appear in photographic scrims for text legibility.
- Don't add semantic colors (error red, success green) to decorative elements — reserve them strictly for form validation and status indicators.
- Don't center-align body copy — Gymshark's editorial copy is left-aligned; centered text appears only in promotional banners and isolated hero overlays.

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <426px | Single-column layout, hamburger nav, hero text scales to 28–32px, full-width CTAs |
| Mobile | 426–767px | Single column continues, 2-column product grid emerges at 530px |
| Tablet | 768–1023px | 2–3 column product grid, nav partially collapsed, horizontal padding 24px |
| Desktop | 1024–1439px | Full navigation expanded, 4-column product grid, 32–40px horizontal padding |
| Large Desktop | 1440–1920px | Max-width container centered (1440px), increased side margins, full-bleed photography |
| XL | >1920px | Capped at 1920px wide content max; ultra-wide background fill only |

### Touch Targets

- Minimum CTA button height: 44px (WCAG AA)
- Product card: entire surface is tappable (no separate "add to bag" tap zone on mobile)
- Nav icons (wishlist, cart): 56px diameter touch area via `{components.button-icon}`
- Filter pills: minimum 36px height with `{spacing.sm}` vertical padding

### Collapsing Strategy

- **Navigation**: Full horizontal category links collapse to hamburger below 1023px; wordmark remains centered; icons (search, wishlist, account, bag) stay visible at all sizes
- **Hero sections**: `{typography.display-hero}` (48px) scales to ~28px on mobile; full-bleed photography maintained at all breakpoints with art-directed crops
- **Product grids**: 4-col (>1023px) → 3-col (768–1023px) → 2-col (530–767px) → 1-col (<530px). Gap stays 6–8px throughout.
- **Section padding**: `{spacing.4xl}` between editorial sections on desktop compresses to `{spacing.xl}`–`{spacing.2xl}` on mobile
- **CTAs**: Full-width on mobile; auto-width (min 160px) on desktop

### Image Behavior

- Hero images: full-bleed at all breakpoints, 16:9 ratio on desktop, 4:3 on tablet, 1:1 on small mobile
- Product thumbnails: square crop, responsive srcset from Gymshark CDN (`cdn.gymshark.com`)
- Lazy loading: applied to all below-fold product images
- Hover behavior on desktop: product cards support image-swap on hover (alt angle or model lifestyle shot)

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Primary text: `{colors.ink}` (#000000)
- Secondary text: `{colors.ink-secondary}` (#444444)
- Tertiary / muted text: `{colors.ink-tertiary}` (#6e6e6e)
- Surface: `{colors.surface}` (#f5f5f5)
- Border: `{colors.border}` (#bbbcbc)
- CTA background: `{colors.primary}` (#000000)
- CTA text: `{colors.on-primary}` (#ffffff)
- Focus ring: `{colors.focus-ring}` (#007db5)

### Example Component Prompts

- "Create a full-bleed hero section for a Gymshark campaign. Use a 100vw gym photography backdrop with a `linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0.6) 100%)` scrim at the bottom. Overlay a `{typography.display-hero}` (48px, Montserrat Bold, uppercase, white) headline bottom-left, followed by two `{components.button-primary}` CTAs (black fill, zero radius, 14px Roboto Bold) spaced 8px apart."
- "Design a 4-column product card grid. Each card: `{components.card-product}` (zero radius, zero padding, `{colors.surface}` background). Square product image at top, then product name in `{typography.body-bold}` (#000000), price in `{typography.caption}` (#000000 or {colors.ink-secondary}). Cards spaced 6px apart. No shadows, no hover lift."
- "Build the Gymshark sticky navigation bar. White background, Gymshark wordmark centered. Left: hamburger menu (mobile) or horizontal category links in `{typography.nav-link}` (14px Roboto 500, #000000, hover: #565656, 0.2s ease-in-out). Right: search, wishlist, account, bag icons in `{typography.caption}` size. Promo bar above nav: full-width, white background, 12px Roboto Bold uppercase text, 8px vertical padding."
- "Create a collection filter row using `{components.tab-pill}` and `{components.tab-pill-active}`. Inactive pills: transparent fill, `{colors.ink}` text, `{rounded.pill}` radius, 6px 16px padding. Active pill: `{colors.ink}` background, `{colors.on-primary}` text, same radius. Pills spaced 8px apart in a scrollable row."
- "Build a product badge for 'NEW IN'. Use `{components.badge}`: `{colors.surface}` (#f5f5f5) background, `{colors.ink}` (#000000) text, `{rounded.none}` (zero radius), 5px 8px padding, 16px Roboto Regular uppercase. Float over the product image top-left at 0,0 offset."

### Iteration Guide

1. Start with the canvas: `{colors.background}` white, `{colors.ink}` black text. Add no other colors unless it's a semantic state or photographic element.
2. Photography carries all color — let hero images bleed fully to the viewport edge. Never crop or contain them inside a card frame with radius.
3. For all display headlines: Montserrat Bold (`{typography.display-hero}` or `{typography.display}`), uppercase, tight line-height (1.1–1.25). Never use Montserrat at weight 400 or in sentence case.
4. Buttons get `{rounded.none}` — always. The sharp edge is the identity. Reserve `{rounded.pill}` for filter/tab UI only.
5. Keep product grids tight: 6–8px gaps. The density signals abundance. If it looks too spacious, reduce the gap, not the padding.
6. For elevation: only one shadow exists — `0px 4px 15px rgba(0,0,0,0.1)`. Apply it to overlaid panels only. Product cards and section containers stay flat.
7. Focus states use `{colors.focus-ring}` (#007db5) — the only blue in the system, and only for accessibility. Don't repurpose it as a design accent elsewhere.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Gymshark. Brand names and trademarks belong to their respective owners.