# Orangetheory design system

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

## Overview

Orangetheory grounds its page in #f4eddf warm sand with #0a0a0a ink, and fills large 30px rounded cards with #ff8633 orange. PP Right Grotesk runs everything: 60.8px bold display and 35.2px headings, then a light 300 body at 19.2px. Buttons are orange pills with dark labels.

- Theme: light
- Mood: orange, sand, rounded cards, grotesk, fitness
- Category: Fitness studio

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#f4eddf` | The page ground |
| Surface | `#0a0a0a` | Raised panels, bands and cards |
| Text | `#0a0a0a` | Primary ink, 17.0:1 on the background |
| Accent | `#ff8633` | Primary actions |

Full palette, most used first: `#f4eddf`, `#0a0a0a`, `#ffffff`, `#ff8633`, `#000000`.

## Typography

- **PPRightGrotesk**: display and body, 100% of the text. Use Space Grotesk. PP Right Grotesk is a paid typeface. Space Grotesk is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | PPRightGrotesk | 60.8px | 700 | 1 | 0.016em |
| Heading | PPRightGrotesk | 35.2px | 700 | 1.09 | -0.009em |
| Subheading | PPRightGrotesk | 19.2px | 300 | 1.53 | 0.005em |
| Body | PPRightGrotesk | 19.2px | 300 | 1.53 | 0.005em |
| Small | PPRightGrotesk | 17.9px | 500 | 1.34 | -0.002em |

Sizes in use, largest first: 61px, 50px, 35px, 26px, 24px, 19px, 18px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 3px, 16px, 20px, 32px, 40px, 48px, 55px, 60px, 67px.

## Shape

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

No shadows: depth comes from color and borders.

## Components

### Primary button ("Free Class*")

- Fill: #ff8633
- Text: #0a0a0a, 19.2px at weight 500
- Border: none
- Corner: pill (9999px)
- Height: 47px, padding 12px 36px

### Card

- Fill: #0a0a0a
- Border: none
- Corner: 30px
- Shadow: none

## Do

- Fill large rounded cards with the orange and set dark text on them.
- Use a warm sand ground instead of white.
- Pair bold headlines with light, large body copy.

## Don't

- Put orange text on the sand: it reads at only 2.1:1.
- Use small radii: cards round at 30px.
- Add a second typeface.

## CSS variables

```css
:root {
  --color-background: #f4eddf;
  --color-surface: #0a0a0a;
  --color-text: #0a0a0a;
  --color-accent: #ff8633;
  --font-display: "PPRightGrotesk", system-ui, sans-serif;
  --text-display: 60.8px;
  --weight-display: 700;
  --font-heading: "PPRightGrotesk", system-ui, sans-serif;
  --text-heading: 35.2px;
  --weight-heading: 700;
  --font-subheading: "PPRightGrotesk", system-ui, sans-serif;
  --text-subheading: 19.2px;
  --weight-subheading: 300;
  --font-body: "PPRightGrotesk", system-ui, sans-serif;
  --text-body: 19.2px;
  --weight-body: 300;
  --font-small: "PPRightGrotesk", system-ui, sans-serif;
  --text-small: 17.9px;
  --weight-small: 500;
  --space-1: 3px;
  --space-2: 16px;
  --space-3: 20px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 55px;
  --space-8: 60px;
  --space-9: 67px;
  --radius-1: 30px;
  --radius-2: 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.