The Ritz-Carlton Design System

Overview

The Ritz-Carlton's marketing system is built on near-monochromatic restraint with a single act of chromatic authority. Scarce gold discipline: the antique gold (#916e27) — wired into the CSS as --t-accent-color and --t-interactive-accent-color — appears exactly 11 times in the captured page, exclusively as border accents and decorative icon fills. This is the inverse of how most hospitality brands use gold: not as the primary CTA color, not as a highlight fill, not as the dominant brand signal — but as the barely-present accent that, precisely because it appears so rarely, commands attention when it does.

Weight 400 as display: where most marketing platforms reach for 700+ weight at display sizes, Ritz-Carlton runs Caslon540Std at weight 400 for 40–60px headlines. An Old Style serif at regular weight at large sizes does not read as understated — it reads as carved. The shapes are inherent to the letterform, not imposed through weight. Where Four Seasons uses Saol Display at weight 300 (an ultra-light contemporary serif), Ritz-Carlton uses Caslon540Std at weight 400 (a classical Old Style). The visual register is different: Four Seasons whispers, Ritz-Carlton engraves. Both avoid the bold-display convention that every other hospitality brand uses.

The near-black (#1c1c1c) is the system's most structurally important color. At 920 total occurrences — 458 text, 5 background, 457 border — it is both the reading color and the hairline color, which means the page's editorial content and its structural divisions share a single tone. Unlike Four Seasons' pure black (#000000), the Ritz-Carlton's near-black carries a fractional warmth that echoes the antique gold without competing with it.

Key Characteristics:

• Single antique gold accent ({colors.primary} — #916e27) at 11 occurrences, entirely as text (4) and border (7) — never a fill.
• Near-black ({colors.ink} — #1c1c1c) dominates at 920 occurrences — simultaneously the reading color and the structural border color.
• Caslon540Std for all serif surfaces at weight 400 — display, editorial body, and accent headings share the same family and the same weight; variation comes from size only.
• Swiss-721 for all sans surfaces — navigation, buttons, labels, and form elements share a single swiss-style grotesque.
• 0px border-radius everywhere except card tiles (22px, wired as --t-cards-border-radius) and pill badges (1000px).
• Photography-led hero: the above-fold viewport is a full-bleed landscape photograph with a white-on-image text overlay; the Ritz-Carlton wordmark and search bar sit above it in a white nav strip.

Colors

Brand Accent

• Antique Gold ({colors.primary} — #916e27): frequency 11. Used as text (4), border (7). Wired as --t-accent-color, --t-interactive-accent-color, --t-icon-color-decorative, --t-non-interactive-accent-color, --rzp-40. The brand's lone chromatic token — marks decorative motifs and interactive focus states. Never fills a button or a background.

Structure

• Ink ({colors.ink} — #1c1c1c): frequency 920. Used as text (458), border (457), background (5). Wired as --t-button-primary-bg-color, --t-brand-alt-color, --t-brand-fg-color, --t-link-text-color, --t-form-label-color, and 12 other custom properties. The system's dominant color — reading text, button fill, and hairline dividers share one tone.
• Canvas ({colors.canvas} — #ffffff): frequency 258. Used as text (124), border (122), background (10). The page floor and primary reversal — white text over photography, white surfaces on light-mode cards.
• Surface Dark ({colors.surface-dark} — #000000): frequency 6. Used for the deepest overlay backgrounds (hero video overlay) and the icon-button hover background.

Muted

• Ink Muted ({colors.ink-muted} — #646464): wired as --t-link-nav-text-color, --t-tag-text-color, --t-button-primary-hover-bg-color, --t-horizontal-vertical-rule. The hover state for primary buttons and the default color for navigation links. At 0 observed occurrences in rendered content (only in CSS declarations), this is a declared but lightly-used token.
• Ink Light ({colors.ink-light} — #707070): wired as --t-overline-normal-color. Overline text in the editorial sections.
• Hairline ({colors.hairline} — #bfbfbf): frequency 2. The only gray hairline in the system — used as a border in a specific card or input context where the full-ink border would be too heavy.

Surface Utilities

• Surface Focus ({colors.surface-focus} — #e9f1fa): frequency 4. A pale blue-gray used for icon-button focus backgrounds and icon-button hover fills. Wired as --rzp-20, --t-icon-btn-focus-bg-color, --t-icon-btn-primary-bg-color. The system's only non-neutral surface-utility color.
• Surface Light ({colors.surface-light} — #e0e3ec): declared as --rzp-10. A cool light gray for structural divisions not captured in the rendered extract; represents the system's lightest surface tier.

Semantic

• Error ({colors.error} — #d0021b): wired as --t-form-error-color, --alert-10. The form validation error color — not rendered in the marketing page but present in all form contexts.
• Error Light ({colors.error-light} — #ff6868): wired as --alert-30. The lighter error tone for alert background fills.

Typography

Font Families

The system divides by register: Caslon540Std (declared as --t-font-family) is the brand-voice serif — it carries every headline, editorial body, and display moment. It is an Old Style digital serif with strong bracketed serifs and high contrast between thick and thin strokes. Swiss-721 (declared as --t-base-font-family) is the structural sans — it carries every navigation link, button label, overline, and form element. The combination of an Old Style serif with a Swiss-style grotesque is a typographic move borrowed from print-editorial traditions — the serif for voice, the sans for direction.

Hierarchy

Principles

Weight discipline: Caslon540Std runs at weight 400 for display and body (the system's dominant Caslon weight) with weight 500 only for destination card display-lg moments. There is no bold Caslon weight on the marketing surface — the contrast between Caslon's inherently high-contrast letterforms is sufficient. Swiss-721 runs at weight 700 for navigation and buttons (authority at small sizes), weight 500 for labels, weight 400 for body and captions.

Note on Font Substitutes

Caslon540Std is a licensed digital revival. Adobe Caslon Pro (available via Adobe Fonts) is the closest direct substitute. EB Garamond is registered in the CSS variables (--font-eb-Garamond declared in the Four Seasons CSS adjacent to this page) and transfers the Old Style character cleanly. For Swiss-721, Neue Haas Grotesk or Inter at the same sizes preserves the structural authority without Helvetica licensing.

Layout

Spacing System

• Base module: 8px — the fundamental grid unit, appearing 15 times in the extracted spacing values.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.base} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 48px.
• Section padding: the editorial long-read section uses 32px right-side padding on the text column with 24px bottom.
• Card padding: featured hotel cards use 32px internal padding.
• Button padding: 16×32px — the most generous button padding in the luxury hospitality category.

Grid & Container

• Hero: full-bleed photography, no max-width, with the Ritz-Carlton wordmark and search bar in a white nav strip above.
• Featured hotels section: 3-column card grid with photographic fills and Caslon overlay headlines; cards use 22px border-radius per --t-cards-border-radius.
• Editorial section ("The Journey of a Lifetime"): full-ink background panel with white Caslon40 display text at 40px, paired with 2-column destination photography.
• Below fold: further destination cards, the Ritz-Carlton Yacht Collection section, and the footer.

Rhythm

The page alternates between full-bleed photography (hero, destination cards) and constrained editorial bands (the ink-background editorial section, the footer). Unlike Cloudflare's binary rhythm (generous hero / dense sections) or Spline's steady-dark canvas, Ritz-Carlton weaves photography and editorial in 3–4 distinct bands: photography hero → white card grid → full-ink editorial → light card grid → footer. The pace is slow by design.

Elevation

The system has no shadow layer. The 4427 elements scanned produced no meaningful box-shadow occurrences. Depth is created entirely by photographic layering (text over image), surface contrast (white cards on white, ink panel on white), and the gold accent on interactive elements. The absence of elevation design is structural — the photography creates all spatial hierarchy, and CSS shadows would compete with the photographic depth.

Shapes

The system is flat with two specific exceptions. The dominant radius is 0px — all buttons use 0px (CSS --t-button-border-radius: 0px; --t-buttons-border-radius: 0px), all form inputs use 0px, and the majority of surfaces are rectilinear. The two exceptions are: featured hotel cards at 22px radius (CSS --t-cards-border-radius: 14px declared, but observed at 22px in the rendered card corners), and pill/badge elements at 1000px (full-pill rounding for loyalty badge and small chips). The 0px-dominant system with an occasional 22px card softness creates a deliberate contrast — architecture is rectilinear; the accommodation card is the warmest, most approachable element in the system.

Components

button-primary — Near-black (#1c1c1c) fill, white text, Swiss-721 13px weight 700, 0px radius, 16×32px padding, 53px height. "Reserve Now" is the canonical instance. Hover state flips to medium gray (#646464) per --t-button-primary-hover-bg-color.

button-primary-hover — Muted gray (#646464) fill, white text, all other properties unchanged. The single documented hover state.

button-secondary — Transparent fill, near-black text, 1px near-black border, same Swiss-721 type. Used for secondary actions like "View Hotels" and editorial callouts.

top-nav — White canvas, 80px height, near-black text in Swiss-721 16px weight 700. Ritz-Carlton wordmark flush left, product links (Hotels & Resorts / Experiences / Yacht Collection / Club) center, Reserve Now + sign-in flush right. Bottom hairline in near-black.

nav-link — Transparent, near-black text, {typography.nav-link} — 16px Swiss-721 weight 700 with 16px vertical padding. The primary navigation treatment.

hero-section — Full-bleed photographic hero, effectively a black surface, 575px captured height. The Ritz-Carlton wordmark overlaid in white in the nav strip; body text in white Caslon below the primary image.

hero-heading — White Caslon540Std 60px weight 400, 0px radius, 0px padding — uppercase or mixed-case overlay on the photography.

section-heading — Ink Caslon540Std 40px weight 500, used for "FEATURED HOTELS," "WHERE TO GO NEXT," etc.

overline-label — Swiss-721 12px weight 400 uppercase with 1.3px tracking. Section overlines like "FEATURED HOTELS" sit above the Caslon section heading.

body-paragraph — White Caslon540Std 18px weight 400 over photography fills — "Let The Ritz-Carlton take you to the ends of the earth."

body-paragraph-ink — Same typography token in near-black (#1c1c1c) on white canvas — editorial body text in below-fold sections.

card — White canvas, near-black text, Caslon body, 22px radius, 32px padding. Featured hotel cards with photographic header, Caslon title, and Swiss-721 label below.

editorial-section — Ink (#1c1c1c) canvas, white Caslon40 editorial text at 40px weight 400, 32px right padding, 24px bottom. "THE JOURNEY OF A LIFETIME" with two-column destination photography.

text-input — White canvas, near-black text, Swiss-721 16px weight 500, 0px radius, 1px ink border, 1px 20px 16px 0px padding (asymmetric baseline alignment). Destination search field.

search-bar — White canvas strip, horizontal layout housing destination input, date picker, and the near-black primary button. 16×8px padding per input cell.

footer — Near-black (#1c1c1c) canvas, white text, Swiss-721 overline at 12px uppercase, 32px padding. The Ritz-Carlton wordmark in white, navigation tree, social links, and the Marriott Bonvoy loyalty program link.

Do's and Don'ts

Do treat the antique gold (#916e27) as a focus and decoration token only — interactive borders and decorative icon fills. At 11 occurrences in the full page, any additional use dilutes the scarcity that gives it power.

Do use Caslon540Std at weight 400 for display headlines — the system's entire editorial authority rests on the Old Style letterforms at regular weight. The typography carries the luxury signal; the weight does not.

Do reach for near-black (#1c1c1c) rather than pure black (#000000) for text, borders, and button fills. The fractional warmth in #1c1c1c is what makes the brand feel engraved rather than printed; pure black reads as sharp digital contrast.

Do use the 22px card radius for featured-property tiles. The one instance of rounded softness in the system marks the moment of human hospitality — the guest's room — not the brand's identity elements.

Don't use the antique gold (#916e27) as a background fill or primary CTA color. Any context where gold fills a surface immediately signals decoration over authority — the gold works precisely because it is an edge condition, not a canvas.

Don't set Caslon540Std to weight 700 or 800 at display sizes. The brand's 60px display at weight 400 reads as architectural permanence; bolded Caslon at the same size reads as generic luxury marketing. The letterform does the work when you do not force the weight.

Don't add a 6–12px radius to buttons. The near-black button at 0px radius is the system's structural anchor — rounding it to pill or card radius makes it indistinguishable from consumer-app CTAs.

Don't use {colors.surface-focus} (#e9f1fa) as a surface background for sections or cards. This pale blue-gray is reserved exclusively for icon-button focus rings and hover backgrounds — pulling it into a card fill introduces an unexpected cool tone against the warm near-black and antique gold.

Known Gaps

• Full gold usage map: the 11 observed gold occurrences are from the marketing page only; the Marriott Bonvoy loyalty flow and the room-booking funnel use gold more extensively in accordions, star ratings, and tier badges.
• Hover and focus states: documented for {component.button-primary-hover} only; focus rings (which use {colors.surface-focus} per CSS declarations), active press states, and disabled-button tints are not captured from the marketing surface.
• Dark photography overlays: the hero's photograph varies by day and campaign; the token system handles any image via the white-text-over-photo overlay pattern, but the photography curation itself is not represented in the spec.
• Responsive type scaling: the CSS variables declare viewport-specific font sizes (e.g., --t-display-s-font-size-viewport-xs: 2.375rem, viewport-l: 3.75rem); this DESIGN.md captures the desktop tier only.
• Marriott Bonvoy integration: the loyalty program header band and status-tier indicators use a separate color system not captured in this extraction.
• Motion and video: the above-fold hero is a video loop on desktop; the CSS captures end-state values only — video playback tokens and Ken Burns easing are not represented.
• Sub-brand palettes: The Ritz-Carlton Reserve and The Ritz-Carlton Yacht Collection use modified typographic and accent treatments beyond this main-site system.