F45 Training

Sizes in use: 81px / 67px / 54px / 17px / 13px / 12px

# F45 Training design system

> Captured from https://f45training.com/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/f45/). An independent analysis for reference: F45 Training and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

F45 uses #211551 deep indigo as its ground and heading color, white sections between photos and #d6001c red for pill buttons and small stars. Gotham Condensed sets 80.6px bold uppercase display, and Gotham runs light 13.4px body. Outlined pill buttons appear on white, and every rounded shape is a pill.

- Theme: dark
- Mood: indigo, red, condensed, pill buttons, fitness
- Category: Fitness studio

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#211551` | The page ground |
| Surface | `#ffffff` | Raised panels, bands and cards |
| Text | `#ffffff` | Primary ink, 16.3:1 on the background |
| Accent | `#d6001c` | Primary actions |
| Highlight | `#211551` | Brand color in artwork, marks and badges |
| Border | `#d6001c` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#211551`, `#000000`, `#d6001c`, `#ff0000`.

## Typography

- **Gotham**: body, 82.4% of the text. Use Montserrat. Gotham is a paid typeface. Montserrat is a free stand-in, not a match.
- **Gotham Condensed**: display, 17.6% of the text. Use Oswald. Gotham Condensed is a paid typeface. Oswald is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Gotham Condensed | 80.6px | 700 | 1 | 0 |
| Heading | Gotham Condensed | 67.2px | 700 | 1 | 0 |
| Subheading | Gotham Condensed | 53.8px | 700 | 1 | 0 |
| Body | Gotham | 13.4px | 300 | 1.4 | 0 |
| Small | Gotham | 11.8px | 600 | 1.4 | 0 |

Sizes in use, largest first: 81px, 67px, 54px, 17px, 13px, 12px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 4px, 8px, 10px, 13px, 17px, 21px, 42px, 84px.

## Shape

Corner radii, smallest first: pill (9999px).

No shadows: depth comes from color and borders.

## Components

### Primary button ("Start A Trial")

- Fill: #d6001c
- Text: #ffffff, 11.76px at weight 700
- Border: none
- Corner: pill (9999px)
- Height: 34px, padding 10px 21px

### Secondary button ("Find A Gym")

- Fill: transparent
- Text: #ffffff, 11.76px at weight 700
- Border: 1px solid #ffffff
- Corner: pill (9999px)
- Height: 34px, padding 10px 21px

## Do

- Set headings in condensed bold uppercase in the deep indigo.
- Use red pills for actions and small red stars as ornaments.
- Flank short text blocks with gym photos on either side.

## Don't

- Use pure black where the indigo belongs.
- Set red body text: it reaches only 3:1 on indigo.
- Square off buttons.

## CSS variables

```css
:root {
  --color-background: #211551;
  --color-surface: #ffffff;
  --color-text: #ffffff;
  --color-accent: #d6001c;
  --color-highlight: #211551;
  --color-border: #d6001c;
  --font-display: "Gotham Condensed", system-ui, sans-serif;
  --text-display: 80.6px;
  --weight-display: 700;
  --font-heading: "Gotham Condensed", system-ui, sans-serif;
  --text-heading: 67.2px;
  --weight-heading: 700;
  --font-subheading: "Gotham Condensed", system-ui, sans-serif;
  --text-subheading: 53.8px;
  --weight-subheading: 700;
  --font-body: "Gotham", system-ui, sans-serif;
  --text-body: 13.4px;
  --weight-body: 300;
  --font-small: "Gotham", system-ui, sans-serif;
  --text-small: 11.8px;
  --weight-small: 600;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 13px;
  --space-5: 17px;
  --space-6: 21px;
  --space-7: 42px;
  --space-8: 84px;
  --radius-1: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.

F45 Training and its marks belong to their owner. This page is an independent analysis of the public website, measured on 2026-10-06. We're not affiliated with or endorsed by F45 Training.