# Gymshark · Design system migration spec

> Source: https://www.gymshark.com  ·  Curated by OpenDesign  ·  en

> An excellent example of a product-focused e-commerce site that uses restraint in UI design to elevate the product photography.

## 1. Identity DNA

The system is an industrial chassis for athletic energy, a monochromatic frame where the body in motion becomes the sole source of color. It adopts the vocabulary of a premium gym—high-contrast, disciplined, and focused—using bold typography and cinematic photography to construct an immersive, product-forward environment. The aesthetic is one of controlled power, where every design decision reinforces the intensity of the athletic performance.

**One-liner:** Premium athletic wear with bold typography and cinematic photography
**Keywords:** Athletic · Premium · Energetic · Industrial
**Analogy:** A premium fitness apparel brand with an industrial, gym-focused aesthetic

## 2. Color

The palette is a disciplined monochrome of black, white, and neutral grays, functioning as a silent foundation. This restraint ensures the photographic imagery, capturing the vibrancy of performance and fabric, carries all the visual weight and emotional resonance.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--bg-quiet` | `#E7E7E7` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#444444` | secondary text |
| `--muted` | `#6E6E6E` | placeholder |
| `--muted-soft` | `#53565A` | weak hint |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** Monochromatic core with photographic vibrancy providing the primary visual interest

Color is withheld from the interface to grant full chromatic authority to the product and the athlete.

## 3. Typography

Typography employs a condensed sans-serif for display, creating impactful, uppercase statements, paired with a neutral humanist sans for body text that prioritizes legibility for product details. The typographic voice is direct and commanding, with uppercase treatment reserved exclusively for hierarchy-defining headers and navigation.

- **Display:** condensed-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -0.5px | Primary hero headlines and section headers |
| body | 16px | 1.3 | 400 | 0px | General body copy and navigation labels |
| label | 14px | 1.4 | 500 | 0.5px | Small utility text and secondary links |

**Type rules:**
- Uppercase text is used exclusively for display headers and category navigation
- Body text maintains a neutral, highly legible weight for product descriptions

## 4. Spacing

A strict 8px base grid imposes a rhythmic, modular discipline on the interface, with generous whitespace carving out clear zones for content and interaction.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid with generous whitespace around major UI components

## 5. Surfaces

Surfaces are defined by depth through shadow, using a singular, soft elevation to lift interactive components from the page. Borders are sparse, employed only as minimal hairlines to define interactive element boundaries where necessary.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 4px 15px 0px
- **Borders:** Minimal, using hairline 1px borders primarily for interactive element definition

## 6. Layout

The layout skeleton is built on a full-width canvas, leading with immersive, cinematic hero photography. This editorial expanse transitions into structured, multi-column product grids, creating a rhythm between atmospheric storytelling and focused commerce.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width photographic heroes followed by structured multi-column product grids

## 7. Motion & Interaction

Motion is functional and immediate, designed for responsive feedback rather than ornamentation. Interactions like hover states and scaling transforms are executed with fast, subtle transitions between 125ms and 200ms, keeping the interface feeling sharp and athletic.

- **Durations:** micro 125ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Quick color transitions for interactive hover states
  - Smooth scaling transformations on product imagery

- **Hover:** Color transitions and slight scaling on interactive elements
- **Click:** Immediate visual feedback via state changes
- **Transition:** Fast 125ms to 200ms transitions for immediate UI response
- **Keyboard:** Standard focus states on interactive elements

## 8. Voice & Don'ts

The editorial voice is direct, motivational, and premium, mirroring the brand's athletic discipline. Headlines are short, punchy, and uppercase, while calls-to-action are understated, action-oriented text links that prioritize function over decorative flair.

- **Tone:** Direct, motivational, and premium
- **Headline style:** Short, punchy, uppercase statements that command attention
- **CTA style:** Action-oriented text links with minimal visual weight
- **Avoid:** Excessive exclamation marks / Passive voice / Decorative fonts / Soft pastel color palettes / Overly complex sentence structures

### Don'ts
- ❌ don't use decorative serif fonts — screenshot shows a condensed sans-serif for headlines
- ❌ don't rely on solid color backgrounds for sections — screenshot shows photographic imagery as the primary visual element
- ❌ don't use heavy shadows or 3D effects — screenshot shows flat, minimalist component design
- ❌ don't center-align hero text — screenshot shows left-aligned text overlays
- ❌ don't use multi-colored accent buttons — screenshot shows simple white underlined text links for CTAs
- ❌ don't use rounded square cards with borders — screenshot shows borderless, image-focused layouts

The system deliberately omits decorative serifs, colorful accents, heavy shadows, and complex layouts to maintain a stark, focused environment where the product and performance remain the unequivocal protagonists.

## System Prompt (paste into AI tool)

```
Gymshark is a premium athletic apparel brand. The design DNA is defined by cinematic, high-contrast photography and bold, condensed sans-serif typography. The color palette is strictly monochromatic, relying on pure black and white with the vibrancy of the photography providing all visual interest. Key colors are #000000, #FFFFFF, and neutral greys like #444444. The typography uses a condensed sans for display and a humanist sans for body text. Critical constraints: do not use decorative serifs, do not use heavy shadows, and do not use colorful accent buttons. The layout is wide and editorial, prioritizing the imagery over UI chrome.
```
