What is Rolex's primary brand color?

Rolex's brand voltage is forest green (#127749), the color of the Rolex crown emblem and navigation accents. It appears 20 times across the captured marketing page — 10 as text, 10 as border — and is classified as a structural color in the extraction despite having clear brand identity. The deeper forest-green (#006139) appears once as a background fill, likely for a gradient or brand mark. No other chromatic color exists on the marketing surface; the vast majority of the page is near-black (#212121) ink on a white canvas, with the forest green acting as the sole brand identifier.

What typeface does Rolex use, and what should I use as a substitute?

Rolex runs two typefaces: Helvetica Now Text as the primary sans for all display, heading, body, and button text, and the proprietary RolexFont-S as a secondary voice for category-attribution labels. Helvetica Now Text spans from 78px at weight 700 for the primary hero heading down through 14px at weight 300 for body copy — an unusually wide weight arc. RolexFont-S appears at 11-13px with 1.4-1.6px letter spacing for brand-attributed spans like 'Rolex presents' and model category labels. The closest open-source substitutes are Inter for Helvetica Now Text (the proportions are close at the body sizes) and any condensed uppercase sans at generous tracking for the RolexFont-S role.

Why does Rolex use a pill CTA on an otherwise sharp-cornered system?

Rolex's radius vocabulary is deliberately binary. The primary CTA button carries a 9999px fully-rounded pill at 44px height — the warmest, most approachable element on the page. Every other surface (cards, hero bands, section containers, the product grid) uses 0px sharp corners. The 10px radius appears on a small secondary surface (likely a tooltip or dropdown). This tension is intentional: the pill CTA reads as the single 'invitation' against an otherwise precise, architectural surface language. It creates contrast rather than inconsistency — the pill says 'touch here' while the sharp edges say 'this is serious craftsmanship.'

What is Rolex's page canvas color?

The Rolex marketing page runs on a white canvas (#ffffff) for the editorial body below the fold, with #212121 near-black used for all text, border rules, and navigation chrome. The page does not use a warm cream or a slightly-blue near-white like some luxury brands — the white is flat and technical. The hero above the fold uses a mid-grey gradient background (#767676, #d4d4d4) to display the watch photographs against a neutral tone that lets the watch metal and dial colors read clearly. Pure black (#000000) appears once as a background fill for a dark editorial band.

Can I use this DESIGN.md to build a luxury product marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI coding tool that reads structured design tokens. The agent will reproduce Rolex's specific moves: near-monochrome structural palette with a single held-in-reserve green accent, Helvetica Now Text spanning weight 300 body through weight 700 display, RolexFont-S for small brand-attribution labels, pill CTAs against sharp-cornered cards, and no decorative chrome between typography and photography. The 15 components cover the top nav, hero watch-photography band, section heads, product grid cards, and footer. One caveat: this system works because the watches themselves are the visual content — the same restraint on a less visually compelling product would feel empty.

Rolex Design System

Rolex's marketing design system as a DESIGN.md file.

About Rolex DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source rolex.com

E-commerce & Retail
Automotive

Rolex's marketing site achieves something rare in luxury: the page retreats almost completely behind the watches. The canvas is near-black at #212121 for structural chrome (navigation labels, body text, hairlines) and white for the editorial body below the fold — not a warm cream, not a near-neutral, but a flat technical white. The only chromatic moment in the entire system is forest green at #127749, the Rolex brand color, which appears in the navigation crown mark and secondary-accent links. Everything else — the entire hero above the fold, the product grid, the editorial bands — is given over to watch photography against neutral gradient backgrounds. Where Patek Philippe layers dark watch photography on near-black and Omega uses its crimson voltage in section headings, Rolex holds color nearly completely in reserve.

The DESIGN.md file packages this system into a machine-readable spec using the Google Labs open format. Inside: 12 color tokens drawn from a near-monochrome palette with a single forest-green accent; 11 typography tokens spanning Helvetica Now Text from the 78px display tier at weight 700 down through a 14px body at weight 300 — an unusually wide weight range for a single sans family — plus RolexFont-S at 11-13px for proprietary label attribution; a binary radius scale (9999px pill for the primary CTA, 0px for everything else); 8 spacing tokens on an 8px base; and 15 components covering the top nav, primary pill CTA, hero watch-photography band, section headings, body text, the watch-grid card, footer columns, and breadcrumb labels.

Feed this file to an AI coding tool and it will reproduce Rolex's specific stance: near-black text on white, a single forest-green accent held almost entirely in reserve, Helvetica Now Text with a 300-to-700 weight arc, pill CTAs against sharp-cornered cards, and no decorative chrome between the brand and the watch photograph. The restraint is the design statement — the one principle worth borrowing only if the product itself is visually strong enough to carry the page.

What makes it distinct

Near-monochrome restraintthe entire marketing surface runs on three structural tones (near-black, white, mid-grey) with the forest green appearing only in navigation accents and brand marks
Pill CTA on a zero-radius systemthe primary button is a 9999px full pill, every card and band carries 0px sharp corners — a deliberate binary tension
Helvetica Now Text as the primary voicebody at weight 300, display at weight 700 — the gap between them wider than most luxury brands allow
RolexFont-S at 1.4px trackingthe proprietary label typeface appears only at small sizes (11-13px) for category spans, functioning as a second voice for brand attribution
Full-bleed watch photography does all decorative workno gradients, no brand colors in hero bands, no typographic ornamentation

Live at rolex.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

rolex.com

Explore Rolex

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Rolex design system FAQ

Common questions about Rolex's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Rolex — official site

Rolex's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.