DESIGN.md · Analysis

Gymshark

gymshark.com · 28 Oct 2026 · 47 colors · Plaak Gymshark, SN Skandia

Gymshark

Gymshark is a performance apparel brand selling gym, running and training clothing to an athletic audience. The storefront is high-contrast monochrome with photographic, full-bleed hero imagery and a single hot-red accent reserved for promotional labels.

Colors

surface#f6f6f4

surface-dim#d7d7d7

surface-bright#ffffff

surface-container-lowest#ffffff

surface-container-low#f6f6f4

surface-container#f5f5f5

surface-container-high#dedee3

surface-container-highest#c1c1c1

on-surface#0d1012

on-surface-variant#565656

inverse-surface#0d1012

inverse-on-surface#ffffff

outline#c1c1c1

outline-variant#d7d7d7

surface-tint#bf2e35

primary#bf2e35

on-primary#ffffff

primary-container#d8380c

on-primary-container#ffffff

inverse-primary#ff8a80

secondary#68b631

on-secondary#111111

secondary-container#e3f2d6

on-secondary-container#2c5a14

tertiary#1f96db

on-tertiary#111111

tertiary-container#33c3f0

on-tertiary-container#0d1012

error#bf2e35

on-error#ffffff

error-container#fbe4e4

on-error-container#7a1419

primary-fixed#f9d9d9

primary-fixed-dim#e8a3a7

on-primary-fixed#3b0a0d

on-primary-fixed-variant#7a1419

secondary-fixed#d6ecc2

secondary-fixed-dim#9fd06f

on-secondary-fixed#1d3d0b

on-secondary-fixed-variant#2c5a14

tertiary-fixed#cdeaf9

tertiary-fixed-dim#7fcbef

on-tertiary-fixed#053349

on-tertiary-fixed-variant#0e5a85

background#ffffff

on-background#000000

surface-variant#d7d7d7

Typography

display: fontFamily: Plaak Gymshark · fontSize: 19.732px · fontWeight: 500 · lineHeight: 18.5481px
headline-lg: fontFamily: Plaak Gymshark · fontSize: 45.6px · fontWeight: 800 · lineHeight: 41.04px · letterSpacing: -0.01px
headline-md: fontFamily: Plaak Gymshark · fontSize: 45.6px · fontWeight: 800 · lineHeight: 41.04px · letterSpacing: -0.01px
title-lg: fontFamily: Plaak Gymshark · fontSize: 19.732px · fontWeight: 500 · lineHeight: 18.5481px
body-lg: fontFamily: SN Skandia · fontSize: 14px · fontWeight: 400 · lineHeight: 19.6px
body-md: fontFamily: SN Skandia · fontSize: 14px · fontWeight: 400 · lineHeight: 19.6px
label-md: fontFamily: SN Skandia · fontSize: 14px · fontWeight: 400 · lineHeight: 19.6px
label-sm: fontFamily: SN Skandia · fontSize: 14px · fontWeight: 400 · lineHeight: 19.6px

Design guidance

Overview

Gymshark sells performance training apparel to an athletic, fitness-driven audience across gym, running and everyday wear. The storefront presents itself as a serious performance label: full-bleed photographic heroes of athletes in motion, a stark black-on-white interface, and product imagery shot against warm neutral studio backdrops. The aesthetic movement is best described as Athletic Minimalism: almost no ornament, with image and typography carrying the emotional weight. The response it evokes is focus and aspiration rather than playfulness.

The voice is confident, imperative and short. Headlines are set in all caps ("SOFTSENSE™", "POPULAR RIGHT NOW") while body copy stays plain and descriptive ("Our new premium, super soft fabric that responds to your movement in the moment."). Example sentence: "Built to move with you — no obstacles, least of all your kit."

Colors

The palette is built on near-black ink (#0d1012) and an off-white canvas (#ffffff and #f6f6f4), with mid-greys (#565656, #c1c1c1, #d7d7d7) for secondary text and dividers. The brand accent is a saturated cherry red, #bf2e35, used for interactive emphasis and error-adjacent emphasis, while #d8380c (the global override label background) is reserved for promotional badges and sale labels. Primary (#bf2e35) is the interactive accent for links and focus states. Secondary (#68b631) is a green status and success accent, and tertiary (#1f96db) is a cool blue used sparingly for informational highlights and linked text inside cookie-adjacent utility UI.

Surface stacking is flat: the page sits on #ffffff, promotional bands sit on #f5f5f5, and product cards separate from the canvas using #dee0e3 tint

Typography

The type system pairs Plaak Gymshark, a condensed display face used at weight 800 for uppercase headlines (45.6px, line-height 41.04px, letter-spacing -0.01px) and weight 500 for small section titles (19.732px), with SN Skandia for all running text and UI labels at 14px / 19.6px. The pairing contrasts a compact, athletic display voice with a neutral, legible grotesque for interface copy. Apply uppercase only to display and section headings; never uppercase body or button labels. Button labels use weight 700 at 14px to hold against white and photographic backgrounds.

Layout

The layout is fluid up to a 1280px container max-width with a four-column product grid and 16px gutters (lg spacing). Hero bands are edge-inset by 40px and run full-bleed within that inset, with 16px lg spacing between stacked modules and 32px (2xl) between major sections. The spacing scale is compact: xs 5px for icon gaps, sm 10px for card padding, md 12px for button internals, lg 16px for component padding and gutters. Whitespace is generous between editorial modules but tight inside product tiles.

Elevation & Depth

Depth is conveyed almost entirely through tonal surface shifts rather than shadows. Where a lift is required, use a hairline shadow of 0 0 4px 0 rgba(0,0,0,0.2) on floating tiles and 0 0 4px 0 rgba(0,0,0,0.35) on overlays such as the wishlist and cart drawers. Level 1 (page, #ffffff), Level 2 (product tile, #ffffff with 0 0 4px 0 rgba(0,0,0,0.2)), Level 3 (drawer / modal, #f5f5f5 with 0 0 4px 0 rgba(0,0,0,0.35)). No backdrop blur is used.

Shapes

Shape philosophy is Architectural Sharpness: corners are nearly square. Buttons use a 4px (DEFAULT) radius, product tiles 2px (sm), and small chips 5px (lg). Full rounding (9999px) is reserved for icon-only circular controls such as the wishlist heart and carousel arrows. Inputs take the 4px DEFAULT radius to match buttons.

Components

Action Elements Primary buttons use a solid #d8380c-tinted block with #ffffff label at 14px / weight 700, 48px height and 16px horizontal padding. The hover state inverts to the primary red #bf2e35 over 150ms ease. Hero CTAs invert the scheme: a solid white block with #0d1012 text sits beside a 1px white outline ghost button; the ghost fills white on hover within 200ms.

Containers & Surfaces Product cards are #ffffff with 2px corners and 10px internal padding. On hover the tile shifts to #f5f5f5 with a 200ms background transition and reveals the wishlist heart in the top-right corner (24px circle, 4px inset).

Inputs & Interaction Input fields use 1px #c1c1c1 borders, 4px radius and 12px padding. Focus draws a 2px #bf2e35 outline offset by 1px. List items and navigation links

Do's and Don'ts

**Do**

Do use the cherry red #bf2e35 only for interactive emphasis and focus rings, never as a page background.
Do keep headlines uppercase in Plaak Gymshark at weight 800 and body in SN Skandia at 14px / 19.6px.
Do let photography carry the hero; overlay white text with a dark scrim rather than a solid colour block.
Do separate product tiles from the canvas with a #f5f5f5 tint and a 2px radius rather than heavy shadows.

**Don't**

Don't introduce rounded pill buttons; the system uses a 4px radius for all rectangular controls.
Don't apply uppercase or letter-spacing to running body copy or long labels.
Don't use the green (#68b631) or blue (#1f96db) accents for primary calls to action.
Don't stack multiple drop shadows or use backdrop blur; depth comes from tonal surfaces and a single 4px hairline shadow.

---
version: alpha
name: Gymshark
description: >-
  Gymshark is a performance apparel brand selling gym, running and training clothing to an athletic audience. The
  storefront is high-contrast monochrome with photographic, full-bleed hero imagery and a single hot-red accent reserved
  for promotional labels.
logo:
  src: https://gymshark.com/images/safari-pinned-tab.svg
  srcDark: https://gymshark.com/apple-touch-icon.png
colors:
  surface: '#f6f6f4'
  surface-dim: '#d7d7d7'
  surface-bright: '#ffffff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f6f6f4'
  surface-container: '#f5f5f5'
  surface-container-high: '#dedee3'
  surface-container-highest: '#c1c1c1'
  on-surface: '#0d1012'
  on-surface-variant: '#565656'
  inverse-surface: '#0d1012'
  inverse-on-surface: '#ffffff'
  outline: '#c1c1c1'
  outline-variant: '#d7d7d7'
  surface-tint: '#bf2e35'
  primary: '#bf2e35'
  on-primary: '#ffffff'
  primary-container: '#d8380c'
  on-primary-container: '#ffffff'
  inverse-primary: '#ff8a80'
  secondary: '#68b631'
  on-secondary: '#111111'
  secondary-container: '#e3f2d6'
  on-secondary-container: '#2c5a14'
  tertiary: '#1f96db'
  on-tertiary: '#111111'
  tertiary-container: '#33c3f0'
  on-tertiary-container: '#0d1012'
  error: '#bf2e35'
  on-error: '#ffffff'
  error-container: '#fbe4e4'
  on-error-container: '#7a1419'
  primary-fixed: '#f9d9d9'
  primary-fixed-dim: '#e8a3a7'
  on-primary-fixed: '#3b0a0d'
  on-primary-fixed-variant: '#7a1419'
  secondary-fixed: '#d6ecc2'
  secondary-fixed-dim: '#9fd06f'
  on-secondary-fixed: '#1d3d0b'
  on-secondary-fixed-variant: '#2c5a14'
  tertiary-fixed: '#cdeaf9'
  tertiary-fixed-dim: '#7fcbef'
  on-tertiary-fixed: '#053349'
  on-tertiary-fixed-variant: '#0e5a85'
  background: '#ffffff'
  on-background: '#000000'
  surface-variant: '#d7d7d7'
typography:
  display:
    fontFamily: Plaak Gymshark
    fontSize: 19.732px
    fontWeight: 500
    lineHeight: 18.5481px
  headline-lg:
    fontFamily: Plaak Gymshark
    fontSize: 45.6px
    fontWeight: '800'
    lineHeight: 41.04px
    letterSpacing: '-0.01px'
  headline-md:
    fontFamily: Plaak Gymshark
    fontSize: 45.6px
    fontWeight: 800
    lineHeight: 41.04px
    letterSpacing: '-0.01px'
  title-lg:
    fontFamily: Plaak Gymshark
    fontSize: 19.732px
    fontWeight: '500'
    lineHeight: 18.5481px
  body-lg:
    fontFamily: SN Skandia
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 19.6px
  body-md:
    fontFamily: SN Skandia
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
  label-md:
    fontFamily: SN Skandia
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
  label-sm:
    fontFamily: SN Skandia
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 19.6px
rounded:
  sm: 2px
  DEFAULT: 4px
  md: 4px
  lg: 5px
  xl: 10px
  full: 9999px
spacing:
  unit: 4px
  xs: 5px
  sm: 10px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 32px
  gutter: 16px
  container-max: 1280px
elevation:
  sm: 0 0 4px 0 rgba(0,0,0,0.2)
  md: 0 0 4px 0 rgba(0,0,0,0.35)
  lg: 0 0 4px 0 rgba(0,0,0,0.35)
layout:
  containerMaxWidth: 1280px
  gridColumns: 4
components:
  button-primary:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.lg}'
    height: 48px
  button-primary-hover:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
  button-hero-solid:
    backgroundColor: '{colors.surface-bright}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.lg}'
    height: 48px
  button-hero-outline:
    backgroundColor: transparent
    textColor: '{colors.surface-bright}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.lg}'
    height: 48px
  button-hero-outline-hover:
    backgroundColor: '{colors.surface-bright}'
    textColor: '{colors.on-surface}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.md}'
    height: 40px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
  card-product:
    backgroundColor: '{colors.surface-container-lowest}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.sm}'
    padding: '{spacing.sm}'
  card-product-hover:
    backgroundColor: '{colors.surface-container}'
  wishlist-icon:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
  input-field:
    backgroundColor: '{colors.surface-container-lowest}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.md}'
  list-item:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
  badge-promo:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-md}'
    rounded: '{rounded.sm}'
    padding: '{spacing.xs}'
---

## Overview

## Colors

Surface stacking is flat: the page sits on #ffffff, promotional bands sit on #f5f5f5, and product cards separate from the canvas using #dee0e3 tint

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary buttons use a solid #d8380c-tinted block with #ffffff label at 14px / weight 700, 48px height and 16px horizontal padding. The hover state inverts to the primary red #bf2e35 over 150ms ease. Hero CTAs invert the scheme: a solid white block with #0d1012 text sits beside a 1px white outline ghost button; the ghost fills white on hover within 200ms.

### Containers & Surfaces
Product cards are #ffffff with 2px corners and 10px internal padding. On hover the tile shifts to #f5f5f5 with a 200ms background transition and reveals the wishlist heart in the top-right corner (24px circle, 4px inset).

### Inputs & Interaction
Input fields use 1px #c1c1c1 borders, 4px radius and 12px padding. Focus draws a 2px #bf2e35 outline offset by 1px. List items and navigation links

## Do's and Don'ts

**Do**
- Do use the cherry red #bf2e35 only for interactive emphasis and focus rings, never as a page background.
- Do keep headlines uppercase in Plaak Gymshark at weight 800 and body in SN Skandia at 14px / 19.6px.
- Do let photography carry the hero; overlay white text with a dark scrim rather than a solid colour block.
- Do separate product tiles from the canvas with a #f5f5f5 tint and a 2px radius rather than heavy shadows.

**Don't**
- Don't introduce rounded pill buttons; the system uses a 4px radius for all rectangular controls.
- Don't apply uppercase or letter-spacing to running body copy or long labels.
- Don't use the green (#68b631) or blue (#1f96db) accents for primary calls to action.
- Don't stack multiple drop shadows or use backdrop blur; depth comes from tonal surfaces and a single 4px hairline shadow.

Edit, then copy or download.