Rolex

---
name: rolex-com-design-system
source: https://www.rolex.com/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#000000"
  text-muted: "#979797"
  surface: "#f3f3f3"
  hairline: "#d4d4d4"
  accent: "#127749"  # green
  accent-2: "#329066"  # green
  accent-3: "#006139"  # deep-green
fonts:
  primary: "RolexFont-XL"  # medium-confidence: usage counts are close
---

# Official Rolex Website - Swiss Luxury Watches — Design System

Extracted from **https://www.rolex.com/** on 2026-07-03.

> Rolex watches are crafted from the finest raw materials and assembled with scrupulous attention to detail. Discover the Rolex collection on rolex.com.

Every value below is mined from the site's live CSS (63 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 9 light against 7 dark. The palette leans monochrome: 6 neutrals carry the structure while 3 chromatic values (led by green, `#127749`) supply accent. **RolexFont-XL** leads the font stack, though usage counts are close — verify against rendered pages before committing. Rounded geometry throughout, up to full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 29% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is light (measured neutral weight 9:7). Don't flip individual sections to the opposite mode.
- The most-used radius is the full pill (x14); mid-size radii are the exception in this system.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 1 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-100` | `#f3f3f3` | 7 | **surface** — neutral closest to canvas luminance |
| `neutral-200` | `#d4d4d4` | 1 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-400` | `#979797` | 1 | **text-muted** — most-used mid-luminance neutral |
| `neutral-700` | `#545454` | 6 | — |
| `neutral-950` | `#000000` | 1 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `green` | `#127749` | 5 | **accent** — most-used chromatic color |
| `green-2` | `#329066` | 1 | **accent-2** — supporting chromatic color |
| `deep-green` | `#006139` | 1 | **accent-3** — supporting chromatic color |

### Dark mode

The source defines 2 dark-mode variants (via dark selector). Both halves of the system, first 2:

| Token | Light | Dark |
| --- | --- | --- |
| `--text` | — | `inherit` |
| `--container` | — | `rgb(var(--dark-grey) / 0.3)` |

`variables.css` ships these as a `prefers-color-scheme: dark` override block.

## Typography

**RolexFont-XL** has the most `font-family` declarations, but the margin over the rest is thin — treat the primary-face call as provisional and verify on rendered pages. Full list by usage:

| Family | Usage |
| --- | --- |
| RolexFont-XL | 10 |
| Helvetica Now Text | 7 |
| RolexFont-S | 7 |
| Helvetica Thai | 4 |
| Arial | 4 |
| Helvetica Neue | 4 |
| Microsoft YaHei | 4 |
| SangBleuKingdom | 3 |

**Size scale (px):** `10`, `12`, `14`, `14.88`, `16`, `18`, `18.88`, `32`

**Weights in use:** `300` (x12), `400` (x47), `700` (x56), `750` (x2)

**Line-heights (unitless):** `1`, `1.14`, `1.15`, `1.25`, `1.38`, `1.43`, `1.5`, `2.5`

**Letter-spacing values:** `0.125em`

## Spacing

Most-used values (px): `8`, `10`, `11`, `13`, `14`, `16`, `20`, `24`, `30`, `35`, `40`, `60`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `0.38rem` | 3 |
| `radius-md` | `0.625rem` | 1 |
| `radius-lg` | `50px` | 3 |
| `radius-full` | `9999px` | 14 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 4px 28px 0 rgba(0, 0, 0, 0.1)` (x1)

## Breakpoints

`480px`, `767px`, `768px`, `896px`, `1025px`, `1280px`, `1440px`, `1600px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #127749 */
  color: var(--color-canvas); /* #ffffff — contrast 5.6:1 */
  border-radius: 9999px; /* pill — mined as 9999px */
  font-weight: 750;
}

.card {
  background: var(--color-surface); /* #f3f3f3 */
  border: 1px solid var(--color-hairline); /* #d4d4d4 */
  border-radius: 0.38rem; /* most-used finite radius */
  box-shadow: var(--shadow-sm);
}

.input {
  background: var(--color-canvas); /* #ffffff */
  color: var(--color-ink); /* #000000 — contrast 21.0:1 */
  border: 1px solid var(--color-hairline); /* #d4d4d4 */
  border-radius: 0.38rem;
  /* placeholder color: var(--color-text-muted) #979797 */
}

.nav {
  background: var(--color-canvas); /* #ffffff */
  border-bottom: 1px solid var(--color-hairline); /* #d4d4d4 */
  color: var(--color-ink); /* #000000 */
  /* inactive links: var(--color-text-muted) #979797 */
  /* active link: var(--color-accent) #127749 — contrast vs canvas 5.6:1 */
}

.modal {
  background: var(--color-surface); /* #f3f3f3 */
  border-radius: 0.38rem;
  box-shadow: var(--shadow-sm); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #000000 */
}

.input-success {
  border-color: #127749; /* mined token: green */
}

.input-error {
  /* no red exists in the mined palette — this site does not expose an error color in its CSS. */
  /* Introduce one deliberately rather than borrowing a random red; keep saturation near the accent's. */
}
```

## Observations

- 6 of 9 extracted colors are neutrals.
- 1 distinct shadow; the softest reaches 0px blur.
- 8 breakpoints, from 480px to 1600px.

## Native CSS custom properties

First 40 of 63:

```css
:root {
  --nav-main-alert-expanded: 0;
  --nav-main-alert-height: 6.875rem;
  --nav-main-bar-height: clamp(3.75rem, calc(3.352rem + 1.634vw), 5.313rem);
  --nav-main-bar-pinned: 1;
  --nav-main-safe-height: calc(var(--nav-main-bar-height) + var(--nav-main-alert-height) * round(up, var(--nav-main-alert-expanded)));
  --nav-main-lock: -1;
  --nav-main-panes-expanded: 0;
  --nav-main-pane-primary-expanded: 0;
  --nav-main-pane-primary-sub-expanded: 0;
  --nav-main-pane-secondary-expanded: 0;
  --nav-overlay-opaque: 0;
  --nav-sub-lock: -1;
  --nav-sub-toggle-pinned: 0;
  --nav-sub-toggle-force-unpinned: 0;
  --nav-sub-pane-expanded: 0;
  --primary-font-family: "Helvetica Now Text",Helvetica,Arial,sans-serif;
  --primary-font-weight: 300;
  --secondary-font-family: RolexFont-S,sans-serif;
  --secondary-letter-spacing: 0.125em;
  --leading: normal;
  --quote-font-family: SangBleuKingdom,"Times New Roman",Times,serif;
  --quote-font-weight: 300;
  --quote-font-style: normal;
  --quote-opening: "“";
  --quote-closing: "”";
  --testimony-font-family: "Bebas Neue Pro",sans-serif;
  --testimony-font-weight: 750;
  --testimony-font-style: italic;
  --testimony-font-stretch: semi-expanded;
  --secondary-text-transform: uppercase;
  --rolex-gold: 146 108 28;
  --green: 18 119 73;
  --dark-green: 11 62 39;
  --light-green: 36 154 100;
  --light-black: 33 33 33;
  --dark-grey: 118 118 118;
  --grey: 212 212 212;
  --alternate-grey: 216 216 216;
  --another-light-grey: 236 236 236;
  --light-grey: 248 248 248;
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-green`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.