# SoulCycle design system

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

## Overview

SoulCycle runs a #000000 black hero with white type, then white sections below, and uses #ffde00 yellow for square buttons and highlighted words. Helvetica Neue sets 54px medium display tracked -0.019em, 14px body and 12px bold uppercase labels tracked 0.125em. Small pill dots mark the carousel.

- Theme: dark
- Mood: black, yellow, helvetica, high contrast, fitness
- Category: Fitness studio

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#000000` | The page ground |
| Surface | `#ffffff` | Raised panels, bands and cards |
| Text | `#ffffff` | Primary ink, 21.0:1 on the background |
| Muted text | `#808080` | Supporting copy, 5.3:1 on the background |
| Accent | `#ffde00` | Primary actions |
| Highlight | `#ffd700` | Brand color in artwork, marks and badges |
| Border | `#0f0f0f` | Hairlines and dividers |

Full palette, most used first: `#000000`, `#ffffff`, `#808080`, `#ffde00`, `#555555`, `#777777`, `#111111`, `#666666`, `#999999`, `#262c2f`.

## Typography

- **Helvetica Neue**: display and body, 60.7% of the text. Use Inter. Helvetica Neue is a paid typeface. Inter is a free stand-in, not a match.
- **HelveticaNeueLTStd-Roman-Normalized**: display and body, 17.9% of the text. Use Inter. The roman cut of Helvetica Neue, a paid typeface. Inter is a free stand-in.
- **HelveticaNeueLTStd-Md-Normalized**: display and body, 12.5% of the text. Use Inter. The medium cut of Helvetica Neue, a paid typeface. Inter Medium is a free stand-in.
- **HelveticaNeueLTStd-Bd-Normalized**: display, 8.8% of the text. Use Inter. The bold cut of Helvetica Neue, a paid typeface. Inter Bold is a free stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | HelveticaNeueLTStd-Md-Normalized | 54px | 400 | 1.19 | -0.019em |
| Heading | HelveticaNeueLTStd-Bd-Normalized | 32px | 400 | 1.25 | 0 |
| Subheading | HelveticaNeueLTStd-Roman-Normalized | 24px | 400 | 1.33 | 0 |
| Body | Helvetica Neue | 14px | 400 | 1.6 | 0 |
| Small | Helvetica Neue | 12px | 700 | normal | 0.125em |

Sizes in use, largest first: 54px, 44px, 42px, 32px, 24px, 22px, 18px, 16px, 14px.

## Spacing

Values sit on a 4px grid.
Values in use: 4px, 8px, 10px, 12px, 16px, 20px, 24px, 28px, 30px, 32px, 120px.

## Shape

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

Shadows, most used first:

- `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px`
- `rgba(0, 0, 0, 0.3) 4px 4px 10px 0px`

## Components

### Primary button ("Get Started")

- Fill: #ffde00
- Text: #000000, 14px at weight 400
- Border: none
- Corner: 0px
- Height: 48px, padding 4px 32px

### Secondary button ("Book a Bike")

- Fill: transparent
- Text: #ffffff, 14px at weight 400
- Border: 1px solid #ffffff
- Corner: 0px
- Height: 40px, padding 0px 24px

## Do

- Hold the palette to black, white and one yellow.
- Color key words in a headline yellow rather than the whole line.
- Set small labels uppercase, bold and tracked wide.

## Don't

- Use the yellow on white: it is meant for black grounds and fills.
- Round the buttons: they are square.
- Add a serif.

## CSS variables

```css
:root {
  --color-background: #000000;
  --color-surface: #ffffff;
  --color-text: #ffffff;
  --color-text-muted: #808080;
  --color-accent: #ffde00;
  --color-highlight: #ffd700;
  --color-border: #0f0f0f;
  --font-display: "HelveticaNeueLTStd-Md-Normalized", "Inter", system-ui, sans-serif;
  --text-display: 54px;
  --weight-display: 400;
  --font-heading: "HelveticaNeueLTStd-Bd-Normalized", "Inter", system-ui, sans-serif;
  --text-heading: 32px;
  --weight-heading: 400;
  --font-subheading: "HelveticaNeueLTStd-Roman-Normalized", "Inter", system-ui, sans-serif;
  --text-subheading: 24px;
  --weight-subheading: 400;
  --font-body: "Helvetica Neue", "Inter", system-ui, sans-serif;
  --text-body: 14px;
  --weight-body: 400;
  --font-small: "Helvetica Neue", "Inter", system-ui, sans-serif;
  --text-small: 12px;
  --weight-small: 700;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 28px;
  --space-9: 30px;
  --space-10: 32px;
  --space-11: 120px;
  --radius-1: 10px;
  --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.