Orangetheory
Warm sand, big rounded orange cards and a quirky grotesk in heavy and light weights.
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.
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.
Avoid
- Put orange text on the sand: it reads at only 2.1:1.
- Use small radii: cards round at 30px.
- Add a second typeface.
Colors
Color roles
Background
#f4eddfThe page ground
Surface
#0a0a0aRaised panels, bands and cards
Text
#0a0a0aPrimary ink, 17.0:1 on the background
Accent
#ff8633Primary actions
Typography
Type
PPRightGroteskdisplay 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.
Systems that ship
Hierarchy at a glance
A quieter supporting head
Body copy carries the explanation, so it has to stay readable at length on every screen.
Labels, captions and metadata
Sizes in use: 61px / 50px / 35px / 26px / 24px / 19px / 18px
Spacing
Spacing
No single base unit: these are the values the page repeats.
Shape
Corners and depth
Components
Buttons and cards
Rebuilt here from the measured values, not copied from the site's code.
Free Class*
Card titleA card in this system, rebuilt from its measured fill, border, corner and shadow.
DESIGN.md
Hand this to your AI coding tool
Drop it in your repo as DESIGN.md and point Claude Code, Cursor or Codex at it before you ask for a page.
# 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.
Orangetheory 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 Orangetheory.