---
title: "Gymshark design system"
variant: extended
source: https://www.gymshark.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/gymshark-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Gymshark · Design System

> Clean monochrome framing for high-energy training imagery

**Theme:** light · **Industry:** fashion · **Source:** https://www.gymshark.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Gymshark’s homepage pairs a restrained monochrome interface with large-scale campaign imagery and densely browsable product rails. Bold condensed display headlines establish an athletic editorial voice while the shopping experience stays clear, direct, and image-led.

## North star

Keep the commerce interface quiet and sharply structured so bold training photography and condensed headlines carry the energy.

## Overview

The page uses a white canvas as a quiet frame for near-black text, pale grey product surfaces, and campaign imagery that supplies most of the colour. Dark video heroes create immediate contrast, with white copy and outlined or filled rectangular calls to action placed over the footage. SN Skandia carries navigation, product details, and supporting copy; Plaak Gymshark gives major headlines a condensed, forceful silhouette. The layout alternates wide campaign panels with horizontal product carousels and four-column editorial image grids, then shifts into text-heavy discovery links and a structured footer. Spacing is generous around section headings and full-width media, while product information remains compact to support scanning. Hairline borders and square corners keep controls crisp and functional. The visual identity comes from the contrast between disciplined, low-chrome commerce UI and varied, human workout photography rather than from a bright accent colour.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cool Alloy | `#dee0e3` | `--color-cool-alloy` | surface | Pale product-card backgrounds, subtle section surfaces, and fine borders separating controls and content. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and high-contrast text or button treatment over dark campaign imagery. |
| Training Ink | `#0d1012` | `--color-training-ink` | brand | Core headings, navigation, body text, links, and dark overlays that anchor campaign media. |
| Muted Steel | `#767a7f` | `--color-muted-steel` | semantic | Secondary navigation, subdued links, captions, and supporting copy. |
| Soft Mist | `#f4f5f6` | `--color-soft-mist` | surface | Occasional quiet footer or button surface; a minor supporting neutral rather than a defining brand colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#dee0e3` (Cool Alloy) · `--color-surface-2` → `#f4f5f6` (Soft Mist) · `--color-text` → `#0d1012` (Training Ink) · `--color-text-muted` → `#767a7f` (Muted Steel) · `--color-border` → `#dee0e3` (Cool Alloy)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0d1012` | `#ffffff` | 19.09:1 | AAA |
| `#0d1012` | `#dee0e3` | 14.43:1 | AAA |
| `#0d1012` | `#f4f5f6` | 17.49:1 | AAA |
| `#767a7f` | `#ffffff` | 4.32:1 | AA-large |
| `#767a7f` | `#dee0e3` | 3.27:1 | AA-large |
| `#767a7f` | `#f4f5f6` | 3.96:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0px, rgb(13, 16, 18) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SN Skandia | `--font-body` | webfont | 400, 700 | Primary interface and commerce font for navigation, body copy, product names, captions, and buttons. | Inter |
| Plaak Gymshark | `--font-display` | webfont | 500, 800 | Display face for the main campaign headline and compact section-level statements. | Oswald |

- **SN Skandia:** Use regular weight for most UI; keep case natural, with compact, readable line spacing.
- **Plaak Gymshark:** Use the measured heavy display weight for large headlines and a medium weight for smaller display headings; retain condensed uppercase styling where shown.

### Type scale — Perfect Fifth (ratio ≈ 1.508, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 800 | 0.9 | 0 | — | Plaak Gymshark | Oversized condensed campaign headline over hero video. |
| h2 | 20px | 500 | 0.94 | 0 | — | Plaak Gymshark | Compact display-style section titles and campaign headings. |
| h3 | 18px | 400 | 1.4 | 0 | capitalize | SN Skandia | Editorial card titles and selected content headings. |
| body | 14px | 400 | 1.4 | 0 | — | SN Skandia | Product information, descriptions, and supporting page copy. |
| caption | 12px | 400 | 1.3 | 0 | — | SN Skandia | Small campaign notes, product labels, and footer details. |
| button | 14px | 400 | 1.4 | 0 | capitalize | SN Skandia | Short, direct labels on shopping and category controls. |
| nav | 14px | 400 | 1.4 | 0 | — | SN Skandia | Primary navigation and utility links in the header. |
| link | 14px | 400 | 1.4 | 0 | — | SN Skandia | Product names, view-all links, and content destinations. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 4, 5, 6, 8, 15, 16, 24, 40, 64 px.
- Section rhythm 40px · element gap 4px · card padding 84px · max content width 1360px.

Use a centered, wide desktop content area capped at the measured 1360px, with a compact header above a full-bleed-feeling hero inset within the page canvas. Alternate two-column campaign videos with horizontal product rails, then use four-column image grids for popular categories, training types, and guides. Keep headings left aligned and section transitions spacious; product names, prices, and filters are denser. Lower-page SEO links and footer columns provide a more compact finish.

## Shape & elevation

- Radius: xs `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.125s ease` on interactive elements.

The interface is predominantly flat, with no measured shadow system defining the page. Use square-edged panels, subtle grey hairlines, and pale card backgrounds to distinguish shopping surfaces. Layer white text and controls directly over dark video or image areas, using a restrained dark gradient only where needed for legibility.

## Imagery

Use real workout and apparel photography as the primary expressive layer: campaign video heroes, full-length model product images, and editorial training or lifestyle tiles. Frame products clearly against light, muted studio backgrounds, while campaign footage can use darker settings and natural outdoor scenes. Let photography retain its natural colours; avoid decorative illustration or 3D effects.

## Components

### Announcement strip

A slim, centered shipping message above the main navigation, presented as underlined text with a pause control.

### Store header

Single-row navigation with category links at left, centered Gymshark wordmark, and search, wishlist, account, and bag utilities at right.

### Campaign hero

Wide video panel with a left-aligned Plaak Gymshark headline, short supporting copy, and adjacent filled and outlined rectangular CTAs.

### Product carousel

Horizontal product rail with a left-aligned heading, view-all link, carousel arrows, image-led cards, wishlist icons, and compact product details.

### Editorial category grid

Four-column image-led tiles for popular categories, training types, and guides, with short titles and selected descriptions below.

### Footer navigation

Compact multi-column help, account, and page links, followed by brand, signup, payment, social, and policy details.

### Measured component styles

- **Primary button** (“What are you looking for?”): background #f4f5f6 · text #0d1012 · border 1px solid · radius 0px · padding 11px 16px · 400 13.3333px Arial
- **Secondary button** (“Men”): transparent background · text #9fa3a8 · border 1px solid #dee0e3 · radius 0px · padding 8px 16px · 400 14px SN Skandia · capitalize
- **Link** (“Adapt Solid Halter Neck Tank”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px SN Skandia
- **Card**: background #dee0e3 · text #000000 · radius 0px · padding 335.6px 0px 0px 0px · 400 14px SN Skandia
- **Navigation item** (“skip to Women Women Expand Women skip to”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px SN Skandia

## Do

- Keep the page canvas white and the interface palette restrained.
- Use Training Ink for primary text and strong visual anchors.
- Reserve condensed display type for prominent campaign statements.
- Give campaign photography room to dominate its section.
- Keep product names, prices, and supporting labels compact and scannable.
- Use square-edged buttons and fine neutral borders.

## Don't

- Do not introduce unmeasured bright accent colours into the interface.
- Do not add rounded, pill-shaped buttons where the page uses square corners.
- Do not decorate product cards with heavy shadows.
- Do not let long copy compete with campaign imagery.
- Do not make the header visually louder than the hero.
- Do not replace real apparel photography with illustration or 3D mockups.

## Agent prompt

Build a new Gymshark-style commerce page with a white Gallery White (#ffffff) canvas and restrained Training Ink (#0d1012) typography. Use Cool Alloy (#dee0e3) for card surfaces and hairlines, Muted Steel (#767a7f) for secondary labels, and Soft Mist (#f4f5f6) only as a quiet supporting surface. Set interface copy in SN Skandia or a close sans-serif substitute; use a bold condensed display face for campaign headlines. Structure the page with a slim announcement, clear utility header, wide image or video hero, and scannable product rails. Follow with editorial image grids, category discovery, compact informational copy, and a multi-column footer. Keep corners square, elevation minimal, and photography natural, human, and prominent. Use direct shopping labels and preserve generous separation between major sections.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Compact announcement and store navigation above the main campaign. | Shipping offer, Category navigation, Search and account utilities | Centered announcement link, Wordmark, Icon controls |
| 2 | hero | Wide two-column campaign video with copy and calls to action aligned left. | Shop new in, Shop collection, Video playback controls | Dark video backdrop, Condensed headline, Filled and outlined CTAs |
| 3 | product-grid | Horizontal multi-card product rail with controls and compact product information. | View all, Carousel arrows, Wishlist products | Light image cards, Heart icons, Product and price labels |
| 4 | video | Wide campaign image or video with lower-left overlay copy. | Shop hybrid, Shop new in | Full-width lifestyle media, White display title, Overlay buttons |
| 5 | product-grid | Horizontal product rail with image-first cards and a compact heading row. | View all, Carousel browsing, Wishlist products | Product photography, New and fit labels, Name and price |
| 6 | category-nav | Four-column editorial image grid below a category heading and audience tabs. | Women and men tabs, Category discovery | Lifestyle photography, Short card titles, Brief descriptions |
| 7 | category-nav | Four-column training image grid with audience tabs and concise labels. | Women and men tabs, Browse by training type | Action photography, Minimal category labels |
| 8 | content-feed | Four-column guide cards beneath topic tabs. | Guide and topic tabs, Read category guides | Editorial card images, Titles and excerpts |
| 9 | category-nav | Dense single-column band of grouped shopping links. | Direct category links, Browse by product type | Compact link lists, Multiple category groups |
| 10 | other | Single-column editorial text section with multiple headings and paragraphs. | Internal content links, Search-oriented reading | Heading hierarchy, Compact body copy |
| 11 | footer | Multi-column link groups followed by a brand, signup, social, payment, and policy area. | Help and account links, Email signup, Social destinations | Compact columns, Payment marks, Policy links |

## Source CSS custom properties (selected)

```css
--override-label-text: white;
--override-label-background: #42B296;
--font-family-druk-condensed-super: Druk Condensed Super,Helvetica,Arial,sans-serif;
--font-family-anton: Anton,Montserrat,Helvetica,Arial,sans-serif;
--rounded-corners-small: 2px;
--rounded-corners-standard: 4px;
--rounded-corners-button: 5rem;
--rounded-corners-large: 8px;
--box-shadow-small: 0 4px 15px 0 rgba(0,0,0,0.1);
--box-shadow-large: 0 4px 60px 0 rgba(0,0,0,0.1);
--box-shadow-top: 0 -4px 15px 0 rgba(0,0,0,0.1);
--glass-dark-background-color: rgba(0,0,0,0.8);
--glass-medium-background-color: rgba(255,255,255,0.75);
--glass-light-background-color: rgba(255,255,255,0.5);
--glass-lightest-background-color: rgba(255,255,255,0.3);
--spacing-2: 0.2rem;
--spacing-4: 0.4rem;
--spacing-8: 0.8rem;
--spacing-10: 1rem;
--spacing-16: 1.6rem;
--spacing-24: 2.4rem;
--spacing-32: 3.2rem;
--spacing-40: 4rem;
--spacing-48: 4.8rem;
--spacing-56: 5.6rem;
--spacing-64: 6.4rem;
--spacing-80: 8rem;
--spacing-100: 10rem;
--spacing-120: 12rem;
--studio-title-font-size: 8rem;
--font-family-bebas-neue: Bebas Neue,Helvetica,Arial,sans-serif;
--global-type-letterspacing-2pc: 0.002rem;
--global-type-letterspacing-0pc: 0;
--global-type-letterspacing-1pc: 0.001rem;
--global-type-letterspacing-1-75neg-pc: -0.0017500000000000003rem;
--global-type-letterspacing-2-5pc: 0.0025rem;
--global-type-letterspacing-2-65pc: 0.00265rem;
--global-type-letterspacing-2neg-pc: -0.002rem;
--global-type-letterspacing-1neg-pc: -0.001rem;
--global-spacing-2: 0.2rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/gymshark-com