DESIGN.md · Analysis

Tough Mudder

toughmudder.com · 30 Oct 2026 · 47 colors · Sequel 100 Black 86, Jet Brains Md

Tough Mudder

Tough Mudder is a team-based mud run and obstacle race brand built on high-energy, high-contrast action photography and a bold, orange-on-black visual identity. The system pairs an ultra-heavy display face with a monospaced body face to feel like a training manual crossed with a festival poster.

Colors

surface#000000

surface-dim#0a0a0a

surface-bright#313233

surface-container-lowest#000000

surface-container-low#161616

surface-container#222222

surface-container-high#313233

surface-container-highest#424344

on-surface#ffffff

on-surface-variant#cecece

inverse-surface#eeeeee

inverse-on-surface#222222

outline#828282

outline-variant#444444

surface-tint#fe5803

primary#fe5803

on-primary#111111

primary-container#ff6700

on-primary-container#000000

inverse-primary#c24300

secondary#cecece

on-secondary#222222

secondary-container#313233

on-secondary-container#eeeeee

tertiary#909090

on-tertiary#000000

tertiary-container#757575

on-tertiary-container#ffffff

error#cf2e2e

on-error#ffffff

error-container#7a1414

on-error-container#ffdad6

primary-fixed#ff6700

primary-fixed-dim#fe5803

on-primary-fixed#000000

on-primary-fixed-variant#313233

secondary-fixed#eeeeee

secondary-fixed-dim#cecece

on-secondary-fixed#000000

on-secondary-fixed-variant#444444

tertiary-fixed#dddddd

tertiary-fixed-dim#909090

on-tertiary-fixed#000000

on-tertiary-fixed-variant#333333

background#000000

on-background#ffffff

surface-variant#313233

Typography

display: fontFamily: Sequel 100 Black 86 · fontSize: 120px · fontWeight: 900 · lineHeight: 140.4px · letterSpacing: -2px
headline-lg: fontFamily: Sequel 100 Black 86 · fontSize: 64px · fontWeight: 900 · lineHeight: 64px · letterSpacing: -0.03em
headline-md: fontFamily: Sequel 100 Black 86 · fontSize: 28.8px · fontWeight: 700 · lineHeight: 28.8px · letterSpacing: -2px
title-lg: fontFamily: Jet Brains Md · fontSize: 20px · fontWeight: 700 · lineHeight: 28px · letterSpacing: -0.02em
body-lg: fontFamily: Jet Brains · fontSize: 18px · fontWeight: 400 · lineHeight: 28px
body-md: fontFamily: Jet Brains · fontSize: 16px · fontWeight: 400 · lineHeight: 28px
label-md: fontFamily: Jet Brains Md · fontSize: 16px · fontWeight: 700 · lineHeight: 28px · letterSpacing: -0.5px
label-sm: fontFamily: Jet Brains Md · fontSize: 12px · fontWeight: 700 · lineHeight: 16px · letterSpacing: 0.08em

Design guidance

Overview

Tough Mudder is a team-first mud run and obstacle course brand whose digital presence is built for adrenaline, camaraderie and a little bit of spectacle. The aesthetic is high-contrast Brutalist Athletic: pure black canvases, full-bleed action photography darkened to roughly 40% opacity, and a single saturated orange (#fe5803) that acts as the brand's ignition point. Interface chrome is kept stark so the photography and the orange CTAs carry the emotion.

The voice is loud, playful and inclusive: short declarative headlines like "Team Up. Get Muddy." sit beside casual invitations such as "Let your inner party animal go wild." Vocabulary leans on verbs of effort and community (conquer, join, legion, team). Example sentence: "Grab your crew and conquer the course."

Colors

Primary (#fe5803) is the signature Tough Mudder orange and is reserved for primary calls to action such as the "Find an Event" pill, the scratch-to-reveal CTA and key highlight words; hover deepens it to #ff6700 with black text. Secondary (#cecece) carries supporting body and meta text on dark surfaces, and tertiary (#909090) is used for disabled and muted labels. Surfaces step from #000000 (page) through #161616 and #222222 (cards) to #313233 (raised rows and header strips). Text is pure #ffffff on black and #cecece for secondary copy. Use orange sparingly: one primary action per viewport section, with dark overlays (rgba(0,0,0,0.6)) over photography to keep white headlines legible.

Typography

The display face Sequel 100 Black 86 is set at 120px / 140.4px with -2px tracking for hero headlines and 28.8px / 700 for section headers, creating a heavy, poster-like hierarchy. Jet Brains (400) and Jet Brains Md (700) provide a monospaced body and label voice that reads like race-day instructions. Apply uppercase and letter-spacing: 0.08em to label-sm micro-labels such as "LEARN MORE" and badges, and keep body copy at 16px / 28px for comfortable reading on dark grounds. Italic treatments are used on subheads such as "EXPERIENCE TOUGH MUDDER LIKE A VIP" to suggest motion.

Layout

The layout is a fluid, full-bleed hero system with a fixed content container of 1280px and a 12-column grid with 16px gutters. Section rhythm alternates full-width photography bands with contained card rows. Use lg (10px) spacing between tightly grouped meta items, xl (12px) between card internals, and 2xl (16px) for card padding; reserve larger vertical gaps for section separation. Whitespace is generous around headlines but dense inside event listings.

Elevation & Depth

Depth is conveyed through photographic overlays and a single soft shadow rather than layered glass. Cards sit flat on #161616 with no border; the lg elevation 0 0 24px -5px #000000 is used for floating widgets such as the Find an Event dropdown. Modal overlays use a near-black scrim at rgba(0,0,0,0.85) with a 1px #222222 frame and the 0 0 0 2px #ffffff, 0 0 0 4px #222222 ring for focus rings.

Shapes

The shape language is Soft-Athletic: small 4px radii on cards, inputs and list items keep the grid crisp, while the 40px pill radius is reserved for primary and secondary buttons and for the Find an Event control. Badges are fully rounded (9999px). This contrast lets pills read as tappable affordances while rectangular containers stay structured.

Components

Action Elements Primary buttons are 48px tall, use the 40px pill radius, label-md type in uppercase Jet Brains Md, and fill with #fe5803. On hover they transition to #ff6700 over 200ms ease-out. Secondary buttons are transparent with 1px #ffffff text links and a trailing chevron that nudges 4px right on hover.

Containers & Surfaces Cards use #161616 backgrounds with 4px radius and 16px padding. Hover lifts the surface to #313233 over 150ms. Modals sit on rgba(0,0,0,0.85) with a 2px #ffffff inner stroke.

Inputs & Interaction Inputs use #222222 fills, 4px radius, 5px vertical padding and body-md type. Focus shows a 2px #fe5803 outline offset 2px. Placeholder text uses #828282.

Do's and Don'ts

**Do**

Do use #fe5803 only for the single most important action in each viewport.
Do pair full-bleed photography with a rgba(0,0,0,0.6) overlay before placing white headlines.
Do keep all labels in Jet Brains Md uppercase with 0.08em tracking.
Do use the 40px pill radius for every primary and secondary button.

**Don't**

Don't introduce additional brand hues beyond the orange-and-grayscale palette.
Don't set body copy in the Sequel display face; reserve it for headlines.
Don't place orange text on orange or on #313233 surfaces, which fails contrast.
Don't add borders or shadows to standard cards; rely on surface step changes instead.

---
version: alpha
name: Tough Mudder
description: >-
  Tough Mudder is a team-based mud run and obstacle race brand built on high-energy, high-contrast action photography
  and a bold, orange-on-black visual identity. The system pairs an ultra-heavy display face with a monospaced body face
  to feel like a training manual crossed with a festival poster.
logo:
  src: https://toughmudder.com/wp-content/uploads/2021/12/Tough-Mudder-Favicon_new_2022.png
colors:
  surface: '#000000'
  surface-dim: '#0a0a0a'
  surface-bright: '#313233'
  surface-container-lowest: '#000000'
  surface-container-low: '#161616'
  surface-container: '#222222'
  surface-container-high: '#313233'
  surface-container-highest: '#424344'
  on-surface: '#ffffff'
  on-surface-variant: '#cecece'
  inverse-surface: '#eeeeee'
  inverse-on-surface: '#222222'
  outline: '#828282'
  outline-variant: '#444444'
  surface-tint: '#fe5803'
  primary: '#fe5803'
  on-primary: '#111111'
  primary-container: '#ff6700'
  on-primary-container: '#000000'
  inverse-primary: '#c24300'
  secondary: '#cecece'
  on-secondary: '#222222'
  secondary-container: '#313233'
  on-secondary-container: '#eeeeee'
  tertiary: '#909090'
  on-tertiary: '#000000'
  tertiary-container: '#757575'
  on-tertiary-container: '#ffffff'
  error: '#cf2e2e'
  on-error: '#ffffff'
  error-container: '#7a1414'
  on-error-container: '#ffdad6'
  primary-fixed: '#ff6700'
  primary-fixed-dim: '#fe5803'
  on-primary-fixed: '#000000'
  on-primary-fixed-variant: '#313233'
  secondary-fixed: '#eeeeee'
  secondary-fixed-dim: '#cecece'
  on-secondary-fixed: '#000000'
  on-secondary-fixed-variant: '#444444'
  tertiary-fixed: '#dddddd'
  tertiary-fixed-dim: '#909090'
  on-tertiary-fixed: '#000000'
  on-tertiary-fixed-variant: '#333333'
  background: '#000000'
  on-background: '#ffffff'
  surface-variant: '#313233'
typography:
  display:
    fontFamily: Sequel 100 Black 86
    fontSize: 120px
    fontWeight: 900
    lineHeight: 140.4px
    letterSpacing: '-2px'
  headline-lg:
    fontFamily: Sequel 100 Black 86
    fontSize: 64px
    fontWeight: '900'
    lineHeight: 64px
    letterSpacing: '-0.03em'
  headline-md:
    fontFamily: Sequel 100 Black 86
    fontSize: 28.8px
    fontWeight: 700
    lineHeight: 28.8px
    letterSpacing: '-2px'
  title-lg:
    fontFamily: Jet Brains Md
    fontSize: 20px
    fontWeight: '700'
    lineHeight: 28px
    letterSpacing: '-0.02em'
  body-lg:
    fontFamily: Jet Brains
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: Jet Brains
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28px
  label-md:
    fontFamily: Jet Brains Md
    fontSize: 16px
    fontWeight: 700
    lineHeight: 28px
    letterSpacing: '-0.5px'
  label-sm:
    fontFamily: Jet Brains Md
    fontSize: 12px
    fontWeight: '700'
    lineHeight: 16px
    letterSpacing: 0.08em
rounded:
  sm: 3px
  DEFAULT: 4px
  md: 4px
  lg: 40px
  xl: 40px
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 5px
  md: 8px
  lg: 10px
  xl: 12px
  2xl: 16px
  gutter: 16px
  container-max: 1280px
elevation:
  sm: '0 1px 0 #161d250d'
  md: '0 0 0 2px #ffffff, 0 0 0 4px #222222'
  lg: '0 0 24px -5px #000000'
layout:
  containerMaxWidth: 1280px
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    height: 48px
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.md}'
    height: 48px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '#ffffff'
  card:
    backgroundColor: '{colors.surface-container-low}'
    rounded: '{rounded.sm}'
    padding: '{spacing.2xl}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
  input-field:
    backgroundColor: '{colors.surface-container}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '#ffffff'
  badge:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary buttons are 48px tall, use the 40px pill radius, label-md type in uppercase Jet Brains Md, and fill with #fe5803. On hover they transition to #ff6700 over 200ms ease-out. Secondary buttons are transparent with 1px #ffffff text links and a trailing chevron that nudges 4px right on hover.

### Containers & Surfaces
Cards use #161616 backgrounds with 4px radius and 16px padding. Hover lifts the surface to #313233 over 150ms. Modals sit on rgba(0,0,0,0.85) with a 2px #ffffff inner stroke.

### Inputs & Interaction
Inputs use #222222 fills, 4px radius, 5px vertical padding and body-md type. Focus shows a 2px #fe5803 outline offset 2px. Placeholder text uses #828282.

## Do's and Don'ts

**Do**
- Do use #fe5803 only for the single most important action in each viewport.
- Do pair full-bleed photography with a rgba(0,0,0,0.6) overlay before placing white headlines.
- Do keep all labels in Jet Brains Md uppercase with 0.08em tracking.
- Do use the 40px pill radius for every primary and secondary button.

**Don't**
- Don't introduce additional brand hues beyond the orange-and-grayscale palette.
- Don't set body copy in the Sequel display face; reserve it for headlines.
- Don't place orange text on orange or on #313233 surfaces, which fails contrast.
- Don't add borders or shadows to standard cards; rely on surface step changes instead.

Edit, then copy or download.