What is The Ritz-Carlton's primary brand color?

The Ritz-Carlton's only chromatic brand accent is an antique gold (#916e27), wired into the CSS as --t-accent-color, --t-interactive-accent-color, --t-icon-color-decorative, --t-non-interactive-accent-color, and --rzp-40. It appears 11 times in the captured marketing page: 4 occurrences as text, 7 as borders — never as a background fill or button color. The primary surface colors are near-black (#1c1c1c, frequency 920) and white (#ffffff, frequency 258). The gold is deliberately held scarce — it marks interactive affordances and decorative accents, never structural surfaces. This restraint distinguishes the system from hospitality brands that use gold fills everywhere.

What typefaces does The Ritz-Carlton use, and what are the best substitutes?

The Ritz-Carlton runs two typefaces in strict division. Caslon540Std handles every serif surface — display headlines at 40–60px weight 400–500, editorial body at 18px weight 400, and the large-format editorial long-reads. The CSS variable --t-font-family is set to Caslon540Std, making it the system's dominant voice. Swiss-721 handles every sans surface — navigation links at 16px weight 700, button labels at 13px weight 700, overline labels at 12px weight 400 uppercase with 1.3px tracking. For open-source substitutes: Adobe Caslon Pro or EB Garamond approximates Caslon540Std's Old Style character; Inter or Neue Haas Grotesk approximates Swiss-721. The key typographic discipline is preserving weight 400 on Caslon540Std display headlines — bumping to 700 or 800 fundamentally changes the character from carved stone to digital marketing.

How does The Ritz-Carlton style its primary button?

The primary button uses near-black (#1c1c1c) fill, white text (#ffffff), Swiss-721 13px weight 700 at normal tracking, 0px border-radius, and 16×32px padding producing a 53px-tall element. The near-black fill is the CSS variable --t-button-primary-bg-color; the hover state switches to a medium gray (#646464) per --t-button-primary-hover-bg-color. There is no border on the primary button — the fill does all the contrast work. The secondary button inverts: transparent background, near-black text, 1px near-black border. The 0px border-radius on both variants is explicitly set as --t-button-border-radius: 0px and --t-buttons-border-radius: 0px in the design system token declarations.

Where exactly does the antique gold accent appear on The Ritz-Carlton site?

The antique gold (#916e27) appears in exactly two contexts across the captured marketing page. The first is decorative icon fills — the small ornamental motifs (the Ritz-Carlton lion-and-crown logo elements, section dividers) that appear between editorial sections. The second is interactive border highlights — the accent-colored border that appears on focused inputs, active state affordances, and selected interactive elements. The gold never fills a button, never fills a background, and never colors headline text. The CSS variable naming confirms the intent: --t-icon-color-decorative (decorative only) and --t-interactive-accent-color (interactive focus accent). At 11 total occurrences — 4 text, 7 border — this is the most scarce brand accent in the hospitality category.

Can I use this DESIGN.md to build my own luxury hotel site?

Yes — feed this file to Claude, Cursor, or any AI coding tool that reads structured design tokens and it will reproduce Ritz-Carlton's specific moves: near-black instead of true black (#1c1c1c rather than #000000), a single antique gold accent reserved for interactive focus and decorative moments only, Caslon540Std-equivalent Old Style serif at weight 400 for all display and editorial, Swiss-721-equivalent sans for all navigation and buttons, and 0px border-radius throughout. The discipline to maintain is gold scarcity — any instance where gold fills a background or a button immediately reads as a cliché of luxury rather than as the system's restrained authority. The tokens resolve directly: --t-button-primary-bg-color maps to #1c1c1c, --t-accent-color maps to #916e27.

The Ritz-Carlton Design System

The Ritz-Carlton's marketing-site design system as a DESIGN.md file.

About The Ritz-Carlton DESIGN.md

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

Travel & Hospitality

The Ritz-Carlton's marketing site holds exactly one chromatic color across its entire visual system: an antique gold (#916e27) that appears 11 times in the captured page, exclusively as borders, decorative icon fills, and interactive accent highlights — never as a background fill, never as a button color, never as a primary surface. Everything else is near-black (#1c1c1c, appearing 920 times) and white. Where Four Seasons removes all chromatic signals, Ritz-Carlton makes the opposite micro-move: it keeps one, holds it scarce, and lets its restraint signal provenance. The gold is not golden — it is deep, warm, and aged, closer to antique brass than to the yellow-gold that lesser luxury brands reach for.

The DESIGN.md file packages the system into a machine-readable spec: 16 color tokens anchored on near-black and white with the single gold accent, a cool light-blue surface tone for icon-button focus states, and semantic reds for error and alert states; 11 typography tokens split between Caslon540Std (display, editorial body, all serif surfaces) and Swiss-721 (navigation, buttons, all sans surfaces); a 0px-radius system with one pill variant at 1000px and a 22px card radius; and 16 component definitions covering the photography hero, the inline search form, the featured hotel cards, the editorial long-read module, and the navigation system.

Feed this file to Claude or Cursor to reproduce Ritz-Carlton's specific moves: near-black instead of true black softens the authority without diluting it; antique gold at 11 occurrences never becomes decoration but marks every moment the user can interact with the system; Caslon540Std uppercase at weight 400 at 60px reads as a hotel monogram carved in stone rather than displayed on screen. The system's logic is monastic — every element that is not photography or text is removed, and what remains is precise.

What makes it distinct

Single antique gold accent#916e27 wired as the interactive accent for every decorative icon, border highlight, and interactive focus element; appears 11 times, never as a fill
Caslon540Std at weight 400every display headline in an Old Style serif at regular weight, reading as engraved permanence rather than typographic muscle
Near-black ink (#1c1c1c) not true blackthe dominant text, border, and primary button fill is a slightly warm off-black that appears 920 times across the page
Zero border-radius throughoutbuttons, cards, and inputs all use 0px; the CSS variable --t-button-border-radius is set to 0px explicitly
Swiss-721 as the sans workhorsenavigation, buttons, and labels run in Swiss-721, a digital-era sans that holds authority at small sizes next to the Old Style display serif

Live at ritzcarlton.com

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

ritzcarlton.com

Explore The Ritz-Carlton

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.

Semantic

Status, errors, success, inline links.

The Ritz-Carlton design system FAQ

Common questions about The Ritz-Carlton'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.

The Ritz-Carlton — official site

The Ritz-Carlton'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.