# Beachbodyondemand Design System

> High-contrast athletic utility defined by heavy Lato typography, electric blue primary actions, and a rigid foundation of deep charcoal and pure white.

**Source:** https://beachbodyondemand.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Beachbodyondemand (BODi) utilizes a high-energy, functional aesthetic that pairs a clean white canvas with a technical charcoal foundation (#161819). The system is anchored by **Lato**, used in extreme weights (700 to 900) for display and subheadings to convey strength and authority. Primary interaction is driven by an electric blue (#2490ff), while secondary "voltage" is provided by a warm amber (#f6bf26) and orange (#e67100) for high-priority conversion points. Layouts are structured with generous vertical rhythm, often alternating between white and soft gray (#f7f8fa) section backgrounds.

## Signature DNA
1. **Heavyweight Lato Display** (Lato at weight 900 for h2 headings and weight 700 for display, creating a "bold-first" hierarchy observed on the homepage and 404 pages.)
2. **Electric Blue Interaction** (The use of #2490ff for primary "Get Started" and "Back to Previous Page" buttons across all analyzed views.)
3. **Pill and Soft-Square Hybrid** (A mix of large-radius pill buttons (24px-28px) for primary actions and sharp or 4px-8px radii for secondary UI elements.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.ink}` | `#161819` | Primary text, button text, dark surface backgrounds | 270 | 1.0 | Computed Style |
| `{color.canvas}` | `#ffffff` | Primary page background, button text, icon fills | 62 | 1.0 | Computed Style |
| `{color.charcoal}` | `#202223` | Secondary dark surfaces | 5 | 0.6 | Computed Style |
| `{color.slate}` | `#706f73` | Secondary body text, footer labels | 51 | 0.8 | Computed Style |
| `{color.canvas.alt}` | `#f7f8fa` | Alternating section backgrounds | 3 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#2490ff` | Primary CTA background, active links | 5 | 0.6 | Computed Style |
| `{color.warning}` | `#f6bf26` | Secondary CTA background (Amber) | 3 | 0.6 | Computed Style |
| `{color.action}` | `#e67100` | High-priority conversion buttons (Orange) | 3 | 0.6 | Computed Style |
| `{color.sky}` | `#91c7ff` | Decorative text / Accent | 3 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{color.success}` | `#1acd7b` | Toggle on track, success states |
| `{color.error}` | `Not captured` | Not captured in source |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Lato | 400, 500, 600, 700, 900 | All headings, body, and UI labels | Lato (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 48px | 72px | normal | 700 | 404 Title | `div.Page404Styled__Title` |
| `{type.h2}` | 36px | 48px | normal | 900 | Hero Headings | `h2.Hero__Heading` |
| `{type.h3}` | 24px | 36px | normal | 500 | Success Story Names | `p.SuccessStories__Name` |
| `{type.subheading}` | 18px | 28px | normal | 700 | Section Titles | `h2.Typography__Title` |
| `{type.body.lg}` | 18px | 28px | normal | 400 | Feature Copy | `p.Typography__Copy` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Navigation, General Body | `header#unification-topNav` |
| `{type.body.sm}` | 14px | 22.4px | normal | 400 | App links, secondary copy | `a.appLink__Container` |
| `{type.caption}` | 12px | 18px | 0.3px | 400 | Footer items | `li.footerLinkStyled__FooterItem` |

### Principles
1. **Extreme Weight Contrast:** Use weight 900 for primary section headers to establish immediate visual hierarchy.
2. **Standardized Tracking:** Letter spacing is kept "normal" for headings, but increased to 0.3px-0.35px for small body text (12px-14px) to maintain legibility.
3. **Vertical Breathing Room:** Large line-heights (e.g., 1.5x the font size) are applied to display and body text to prevent dense text blocks.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 50 |
| `{space.sm}` | 10px | 100 |
| `{space.md}` | 16px | 11 |
| `{space.lg}` | 24px | 20 |
| `{space.xl}` | 40px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Navigation, Section containers | Computed Style |
| `{radius.sm}` | 4px | Secondary buttons, Inputs | Computed Style |
| `{radius.md}` | 8px | UI Controls, Cards | Computed Style |
| `{radius.pill}` | 24px / 28px | Primary CTAs | Computed Style |
| `{radius.lg}` | 30px | Panels, Large containers | Computed Style |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.button}` | `rgba(0, 0, 0, 0.3) 0px 2px 4px 0px` | Primary Blue Buttons | Computed Style |
| `{shadow.card}` | `rgba(0, 0, 0, 0.08) 0px 0px 15px 0px` | Feature Cards | Computed Style |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global header for site-wide wayfinding.
**Pages observed:** All
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink}` (#161819) / Radius `{radius.none}` / Font `{type.body.md}` (16px)
**States observed:** Default | Hover: captured

#### Primary Button (Blue)
**Role:** Main call to action for conversion and navigation.
**Pages observed:** All
**Spec:** Background `{color.primary}` (#2490ff) / Text `{color.canvas}` (#ffffff) / Radius `{radius.pill}` (24px-28px) / Shadow `{shadow.button}`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting specific fitness or nutrition programs.
**Pages observed:** Homepage
**Spec:** Background `{color.canvas}` (#ffffff) / Radius `{radius.md}` (8px) / Shadow `{shadow.card}` / Padding `{space.lg}` (24px)
**States observed:** Default | Hover: not captured

#### Secondary Button (Amber)
**Role:** High-visibility secondary actions.
**Pages observed:** All
**Spec:** Background `{color.warning}` (#f6bf26) / Text `{color.ink}` (#161819) / Radius `{radius.sm}` (4px) / Font 13.33px
**States observed:** Default | Hover: not captured

### Tier 3: Surface-specific

#### Alternating Section
**Role:** Breaking up long-form content on landing pages.
**Pages observed:** All
**Spec:** Background `{color.canvas.alt}` (#f7f8fa) / Text `{color.ink}` (#161819) / Padding 40px 24px
**States observed:** Default

#### Dark UI Panel
**Role:** High-contrast information blocks or footers.
**Pages observed:** Homepage
**Spec:** Background `{color.ink}` (#161819) / Text `{color.canvas}` (#ffffff) / Radius `{radius.none}`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (inferred from desktop screenshots) |
| Section Padding (Vertical) | 40px - 50px |
| Column Gap | 20px - 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; buttons stack vertically; font sizes for display reduce. |
| Desktop | 1440px | Multi-column grids (3-up or 4-up) for cards; horizontal top-nav visible. |

## Imagery & decoration
BODi uses high-resolution photography of people in motion, often with natural or gym-based backgrounds. Visual decoration is minimal, relying on background color shifts (#ffffff to #f7f8fa) and subtle box shadows to create depth.

## Do's
- Use Lato weight 900 for primary section headings.
- Apply `{color.primary}` (#2490ff) for the most important action on any page.
- Maintain a 24px-28px corner radius for primary pill buttons.
- Use `{color.canvas.alt}` (#f7f8fa) to separate distinct content sections.
- Ensure high contrast (20:1+) for text on dark backgrounds using `{color.ink}` (#161819).

## Don'ts
- **Wrong:** Using a light blue for primary buttons. **Right:** Use #2490ff. **Reason:** Brand consistency and interaction recognition.
- **Wrong:** Using Lato Light (300) for display. **Right:** Use weight 700 or 900. **Reason:** The brand identity is built on visual strength and weight.
- **Wrong:** Mixing multiple shadow styles on a single page. **Right:** Use the defined `{shadow.button}` or `{shadow.card}`.
- Do not use sharp corners for primary conversion buttons.
- Do not use #2490ff for body text; reserve it for interactive elements.

## Similar brands
- Peloton
- Nike Training Club
- Equinox
- Strava

## Quick start

### CSS Custom Properties
```css
:root {
  --bodi-primary: #2490ff;
  --bodi-warning: #f6bf26;
  --bodi-action: #e67100;
  --bodi-ink: #161819;
  --bodi-canvas: #ffffff;
  --bodi-canvas-alt: #f7f8fa;
  --bodi-font-main: 'Lato', sans-serif;
  --bodi-radius-pill: 24px;
  --bodi-shadow-subtle: 0px 2px 4px rgba(0, 0, 0, 0.3);
}
```

## Agent prompt examples
- "Create a primary CTA button using Beachbodyondemand's electric blue #2490ff, a 24px border radius, and Lato Bold 14px text."
- "Design a feature section with a #f7f8fa background, a Lato 900 heading at 36px, and a 3-column grid of white cards with 8px radius."
- "Generate a footer component using the #161819 background and Lato 12px text in #ffffff."

## Known gaps
- Hover and Active states for secondary buttons were not explicitly captured in the CSS variable tokens.
- Specific mobile breakpoint transition values (exact px) were inferred from standard viewport captures.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://beachbodyondemand.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://beachbodyondemand.com/pricing | Desktop 1440 | 2026-06-06 |
| About | https://beachbodyondemand.com/about | Desktop 1440 | 2026-06-06 |
| Mobile Home | https://beachbodyondemand.com | Mobile 390 | 2026-06-06 |