---
version: alpha
name: "Four Seasons"
website: "https://www.fourseasons.com"
description: >-
  A luxury hospitality brand whose marketing surface runs a strict monochromatic palette — pure ink black and pure white — punctuated only by the browser's default hyperlink blue, with zero chromatic brand accent. Display headlines use Saol Display at weight 300 in uppercase at 60–80px, a deliberately featherlight typeface rarely seen in hospitality; Neue Helvetica at 10px uppercase with 3–4px letter-spacing carries every label, button, and navigation element; Monotype Garamond at 18px handles all body text. The result is a system that trusts photography and architecture above every graphic element — the brand voltage is the image, not a color.

seo:
  title: "Four Seasons Design System for React — ink-black monochrome, Saol Display, 16 components"
  metaDescription: "Four Seasons' marketing-site design system as a DESIGN.md file. Strict ink-black on white, Saol Display at weight 300, Neue Helvetica uppercase labels, Monotype Garamond body — 16 color tokens, 12 typography levels, 16 components. For React and AI tools."
  highlights:
    - "Monochromatic discipline — zero chromatic brand accent; every color on the page is ink black, white, or a photographic pixel"
    - "Saol Display at weight 300 — the hero runs 60px uppercase display in an ultra-light editorial serif, the inverse of the bold-display hospitality convention"
    - "Dual typeface voices — Saol Display for atmosphere, Neue Helvetica 700 uppercase for all navigation and CTAs, Monotype Garamond for all editorial body text"
    - "Photography as the brand — the above-fold hero is a full-bleed landscape photograph with the display headline overlaid in white, making each destination the visual identity"
    - "Zero-radius system — all buttons, inputs, and cards render with 0px border-radius; the brand relies on hairlines and whitespace rather than rounded softness"
  tags:
    - "Travel & Hospitality"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Four Seasons' marketing site works from a principle almost no other luxury hospitality brand dares to commit to: there is no brand color. The palette on fourseasons.com is pure black on pure white, with a photographic hero above the fold and nothing chromatic anywhere in the chrome. Where Marriott leans on its signature red and Hilton on cobalt blue, Four Seasons holds nothing — every square centimeter of brand voltage is delegated to the photograph of the Aegean Sea, the Costa Rican canopy, or the Maldivian lagoon that fills the viewport. The identity lives in curation, not pigment.

    The DESIGN.md file packages the system into a machine-readable spec: 16 color tokens drawn from a strict ink-and-white palette with hairline grays at three levels; 12 typography tokens spanning Saol Display at 60–80px weight 300 for hero and editorial display, Neue Helvetica at 10–24px weight 700 uppercase for every label and navigation element, and Monotype Garamond at 15–21px weight 400 for body and editorial text; a flat 0px radius throughout; and 16 component definitions covering the photography hero, the hairline-bordered booking form, the destination-card grid, and the uppercase-label navigation system. Typography is the system's most complex dimension: three typefaces divide by register — aspirational, structural, and editorial — rather than by weight alone.

    Feed this file to Claude or Cursor to reproduce Four Seasons' specific moves: no accent color means every CTA must earn attention through contrast and spacing alone, not through color; buttons at 10px uppercase Neue Helvetica 700 with 3px tracking read as understated authority rather than urgency; display at weight 300 signals confidence through restraint rather than through muscle. The system's primary discipline is photographic curation — the spec captures the chrome, but the brand lives in the images it frames.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.fourseasons.com"
      title: "Four Seasons — official site"
      description: "Four Seasons' public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Four Seasons' primary brand color?"
      answer: "Four Seasons has no chromatic brand color in its marketing-site system. The entire palette is ink black (#000000, frequency 847) and pure white (#ffffff, frequency 765), with three hairline grays (#d8d8d8, #6d6d6d, #7d7d7d) and the browser's default hyperlink blue (#0000ee) as an unbranded structural element. The brand's visual authority comes entirely from destination photography — each hero photograph is effectively the brand color for that page. This is the deliberate move that separates Four Seasons from competitors who use a signature color as a shortcut for luxury signaling."
    - id: "typography"
      title: "What typefaces does Four Seasons use, and what are the best substitutes?"
      answer: "Four Seasons runs three typefaces in strict register separation. Saol Display handles hero and editorial display at 60–80px weight 300 uppercase — it is a contemporary high-contrast serif with an unusually light display weight, signaling aspirational understatement. Neue Helvetica at 10–24px weight 700 uppercase with 2.5–4px letter-spacing carries every label, button, navigation link, and structural element — the system's disciplined sans voice. Monotype Garamond at 15–21px weight 400 handles body text and editorial paragraphs. For open-source substitutes: Cormorant Garamond approximates Saol Display's high-contrast ultralight feel; Inter or Helvetica Now approximates Neue Helvetica; EB Garamond (which is registered in the CSS variables) approximates Monotype Garamond."
    - id: "button-style"
      title: "How does Four Seasons style its buttons without a brand color?"
      answer: "Four Seasons' buttons are a textbook case of authority through restraint. The primary button is a rectangle filled with medium gray (#6d6d6d), white text in 10px Neue Helvetica 700 uppercase with 3px letter-spacing, 40px height, 0px border-radius, and 0px horizontal padding on the label. The border-radius zero is structural — the brand has no rounded softness anywhere in its chrome. The gray fill is the button's only concession to color; it does not use black (too funereal) or white (too light). Secondary actions appear as text-only uppercase labels with underlines. There is no blue or gold accent button; contrast does the work."
    - id: "spacing-rhythm"
      title: "What is Four Seasons' spacing rhythm?"
      answer: "The dominant spacing unit is 40px — it appears 50 times in the captured page, making it the system's base module for section padding, content margins, and internal card gaps. The secondary unit is 20px, used for tighter internal padding. Button padding runs 12px vertical by 20px horizontal. The page alternates between very generous section padding (160px top for hero overlays) and tight editorial grids (0px by 15px on the navigation strip). The overall rhythm is generous-to-generous — Four Seasons does not pack content; each destination card gets significant white breathing room."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own luxury hospitality site?"
      answer: "Yes — feed this file into Claude, Cursor, or any AI tool that reads structured design tokens and it will reproduce Four Seasons' specific moves: strict monochrome chrome, Saol Display ultralight serif for hero moments, Neue Helvetica uppercase for all labels, 0px border-radius throughout, and the photography-led hero pattern. The key discipline to preserve is the absence of a brand accent color — any temptation to add a gold or warm-toned accent immediately breaks the system's identity. The tokens resolve to real values: #000000 for ink, #ffffff for canvas, #6d6d6d for button fill. The one thing the spec cannot provide is the curation of the destination photographs, which is where the actual brand work lives."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  ink: "#000000"
  canvas: "#ffffff"
  ink-soft: "#2d2d2d"
  surface-1: "#030303"
  muted: "#6d6d6d"
  muted-light: "#7d7d7d"
  hairline: "#d8d8d8"
  hairline-dark: "#1f1f1f"
  link-default: "#0000ee"

typography:
  display-xl:
    fontFamily: "\"Saol Display\", serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 65px
    letterSpacing: 0
  display-lg:
    fontFamily: "\"Saol Display\", serif"
    fontSize: 60px
    fontWeight: 300
    lineHeight: 55px
    letterSpacing: "2px"
  heading-xl:
    fontFamily: "\"Neue Helvetica\", helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 200
    lineHeight: 31px
    letterSpacing: "4px"
  heading-md:
    fontFamily: "\"Neue Helvetica\", helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 21px
    letterSpacing: "4px"
  body-lg:
    fontFamily: "\"Monotype Garamond\", garamond, serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 31.5px
    letterSpacing: "0.5px"
  body-md:
    fontFamily: "\"Monotype Garamond\", garamond, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: "0.5px"
  body-sm:
    fontFamily: "\"Monotype Garamond\", garamond, serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 25px
    letterSpacing: "0.5px"
  label-lg:
    fontFamily: "\"Neue Helvetica\", helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: "3px"
  label-md:
    fontFamily: "\"Neue Helvetica\", helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 13px
    letterSpacing: "3px"
  label-sm:
    fontFamily: "\"Neue Helvetica\", helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 13px
    letterSpacing: "3px"
  button-md:
    fontFamily: "\"Neue Helvetica\", helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 700
    lineHeight: 13px
    letterSpacing: "2.5px"
  nav-link:
    fontFamily: "\"Neue Helvetica\", helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 13px
    letterSpacing: "2.05px"

rounded:
  none: "0px"
  sm: "4px"
  md: "5px"

spacing:
  xs: "3px"
  sm: "12px"
  md: "15px"
  base: "18px"
  lg: "20px"
  xl: "24px"
  2xl: "37px"
  3xl: "40px"
  4xl: "60px"

components:
  button-primary:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "12px 20px"
    height: "40px"
    border: "0"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "8px 20px"
    height: "40px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 30px"
    height: "60px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "0px 15px"
  hero-section:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.none}"
    padding: "160px 0px 0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-lg}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
  body-paragraph-ink:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "30px 25px 50px"
  destination-card:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.none}"
    padding: "40px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "8px 20px"
    height: "40px"
    borderColor: "{colors.hairline}"
  booking-bar:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "30px 25px 50px"
  overline:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-sm}"
    padding: "60px 40px"
  modal-overlay:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "40px"
---

## Overview

Four Seasons' marketing site builds an identity from absence. **Monochromatic authority**: where Marriott brands every element in corporate burgundy, Hilton in cobalt blue, and even Aman in warm sand tones, Four Seasons holds nothing — no accent color, no brand voltage, no chromatic shorthand for luxury. The palette is pure ink black (#000000) and pure white (#ffffff). What fills the visual hierarchy is destination photography: a full-bleed Aegean sunset, a Maldivian lagoon, a Parisian rooftop — each image carries the brand's chromatic identity for that page, and the chrome stays out of the way.

Typography is the system's most articulated dimension. Three typefaces divide strictly by register. Saol Display at 60–80px weight 300 uppercase carries hero headlines — an ultra-light contemporary serif that signals aspiration through feathery thinness rather than bold authority. Neue Helvetica at 10–12px weight 700 uppercase with 2.5–4px letter-spacing carries every navigation label, button, and structural overline — the system's disciplined sans voice, deliberately compressed to the smallest legible size to remain subservient to the images. Monotype Garamond at 15–21px weight 400 handles body text and editorial paragraphs — a classical serif that reads unhurried, as if there were no deadline.

**Key Characteristics:**
- Zero chromatic brand accent — the only non-monochrome color in the captured page is the browser-default hyperlink blue (#0000ee), which is structural rather than branded.
- Saol Display at weight 300 — the lightest display weight used by any hospitality brand in the directory; 60px uppercase with 2px tracking at this weight reads as whispered confidence.
- Three-typeface system in strict register separation: aspirational serif display, compressed sans labels, classical serif body.
- Full-bleed photography hero carries all chromatic brand identity; the chrome is entirely monochrome.
- Zero border-radius throughout — every button, input, and card uses 0px rounding; the system communicates permanence through rectilinear geometry.
- 40px base spacing module — generous air between every element, consistent with a brand that does not compete for attention.
- No shadow layer — depth comes from photographic overlap and card juxtaposition, not from CSS elevation.

## Colors

### Ink and Canvas

- **Ink** (`#000000`): frequency 847. Used as text (404), border (405), background (35), shadow (3). The dominant structural color — every nav label, card border, body text, and footer fill uses this tone. At 404 text occurrences it is the page's primary reading color.
- **Canvas** (`#ffffff`): frequency 765. Used as text (379), border (370), background (16). The page floor and primary reversal color — white text over photographic fills, white backgrounds on light-mode cards.

### Text Grades

- **Ink Soft** (`#2d2d2d`): frequency 9. A near-black that softens form-field text and secondary card text without lifting to gray.
- **Muted** (`#6d6d6d`): frequency 2. Secondary text and the primary button fill — the only non-black, non-white element in the interactive chrome.
- **Muted Light** (`#7d7d7d`): frequency 3. Tertiary label text and caption elements below destination cards.

### Hairlines

- **Hairline** (`#d8d8d8`): frequency 3. Card and input borders — the lightest structural divider in the system.
- **Hairline Dark** (`#1f1f1f`): frequency 2. Deep-tone hairlines in the darkened photography zones, where a standard light hairline would disappear.
- **Near Black** (`#030303`): frequency 5, mostly as background — used in the darkest photography overlay bands.

### Structural

- **Link Default** (`#0000ee`): frequency 35. The browser-default hyperlink blue — not a brand accent but the unoverridden system color used for inline links within editorial text. Four Seasons does not override the default link color, which is itself a signal: inline links are rare enough that they need no brand treatment.

## Typography

### Font Families

The system runs three typefaces in strict register separation. **Saol Display** carries every aspirational, display, and editorial headline — a contemporary high-contrast serif shipped as a custom web font (declared as `--font-saol-display` in the CSS variables) with an unusually light weight 300 display tier. **Neue Helvetica** handles every structural, navigational, and labeling surface — always uppercase, always tracked 2.5–4px, always at 700 or controlled lighter weights. **Monotype Garamond** (declared as `--font-monotype-garamond`) carries all body and editorial text — a classical serif at weight 400 that reads unhurried and authoritative without shouting.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 80px | 300 | 65px | 0 | Maximum display — fullscreen overlaid text |
| `{typography.display-lg}` | 60px | 300 | 55px | 2px | Hero h1 — "DISCOVER FOUR SEASONS" |
| `{typography.heading-xl}` | 24px | 200 | 31px | 4px | Section h2 uppercase label |
| `{typography.heading-md}` | 16px | 700 | 21px | 4px | Sub-section heading, destination card label |
| `{typography.body-lg}` | 21px | 400 | 31.5px | 0.5px | Lead editorial paragraph |
| `{typography.body-md}` | 18px | 400 | 27px | 0.5px | Default body text, form inputs |
| `{typography.body-sm}` | 15px | 400 | 25px | 0.5px | Secondary editorial body |
| `{typography.label-lg}` | 12px | 700 | 16px | 3px | Overline labels above sections |
| `{typography.label-md}` | 10px | 700 | 13px | 3px | Button labels, nav links, overlines |
| `{typography.label-sm}` | 10px | 400 | 13px | 3px | Footer and secondary structural labels |
| `{typography.button-md}` | 10px | 700 | 13px | 2.5px | CTA button labels |
| `{typography.nav-link}` | 10px | 500 | 13px | 2.05px | Top-nav interactive links |

### Principles

Display weight holds at 300 — the lightest weight tier in the directory for any hospitality or luxury brand. The brand's confidence lives in the photograph above the text, not in typographic muscle below it. Neue Helvetica uppercase at 10px with 3px tracking is the system's only loud typographic move, and it is used for the smallest text on the page — labels and buttons — not for display. The effect is quiet authority: the headline whispers, the label directs.

### Note on Font Substitutes

Saol Display is a licensed editorial serif. **Cormorant Garamond** at weight 300 comes closest to the high-contrast ultralight feel; **Playfair Display** at weight 300 is a reasonable second choice. For Neue Helvetica, **Inter** or **Helvetica Now** at the same weight/tracking are the closest substitutes. For Monotype Garamond, **EB Garamond** is declared in the page's CSS variables (`--font-eb-Garamond`) as a fallback and transfers cleanly at the body sizes.

## Layout

### Spacing System

- **Base module:** 40px — appears 50 times in the captured page. Used for section padding, content margins, and card internal spacing.
- **Tokens:** `{spacing.xs}` 3px · `{spacing.sm}` 12px · `{spacing.md}` 15px · `{spacing.base}` 18px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.2xl}` 37px · `{spacing.3xl}` 40px · `{spacing.4xl}` 60px.
- **Hero overlay padding:** 160px top to position the Saol Display headline below the midpoint of the full-bleed photo.
- **Section padding (vertical):** 30–60px between major sections, letting each destination card breathe.
- **Button padding:** 12×20px. Navigation padding: 0×15px per link.

### Grid & Container

- **Hero:** full-bleed, no max-width constraint — the photography fills the viewport edge-to-edge, with the display headline centered below the image's primary focal point.
- **Booking bar:** a full-width form strip below the hero; destination, dates, and a button arrayed in a single horizontal row.
- **Destination grid:** responsive card grid showing 2–3 columns of featured properties, each with a full-bleed photo and an overline + Saol Display headline overlaid or below.
- **Content sections:** narrow-width editorial text (around 600–720px) centered on the canvas, with generous vertical margins.

### Rhythm

The page alternates between full-bleed photographic immersion and narrow editorial breath. There is no transitional gradient between modes — the edge of a photograph terminates cleanly and white space begins. This binary rhythm (full bleed, then contained) runs throughout the page and mirrors the brand experience: arrival in a place, then a particular point of view about it.

## Elevation

No shadow layer exists in the system. The 9827 elements scanned produced no meaningful box-shadow occurrences — depth comes exclusively from photographic layering (one image over another, text over an image) and from card juxtaposition on the white canvas. The absence of elevation design is not an oversight; the photography creates all the spatial hierarchy a luxury experience site needs.

## Shapes

The system is perfectly flat — 0px border-radius throughout. Every button, input, modal, and card uses square corners. The CSS variables explicitly declare `--t-button-border-radius: 0px` and `--t-cards-border-radius: 14px` (the latter present in variable declarations but used only in a few interior surfaces not captured in the marketing-page extraction; the dominant observed radius is 0px). The only round elements on the page are minor UI affordances (the modal scroll indicator dot). The flat geometry reads as architectural permanence — the same visual logic as a hotel's rectilinear facade rather than a consumer app's friendly pill buttons. The only radius values captured are 4px and 5px, both minor and scoped to structural affordances.

## Components

**`button-primary`** — The signature CTA. Medium gray (#6d6d6d) fill, white text, 10px Neue Helvetica 700 uppercase with 2.5px tracking, 0px border-radius, 12×20px padding, 40px height. "Check Rates" is the canonical instance. No border: the fill provides all the contrast the gray needs against white.

**`button-secondary`** — Transparent fill, ink text, 1px ink border, same Neue Helvetica 700 uppercase. Used for secondary actions below destination cards.

**`top-nav`** — White canvas, 60px height, ink text in 10px Neue Helvetica 500 uppercase. The Four Seasons wordmark flush left, destination/stay/dine/weddings/residences links centered, sign-in and language selector flush right. No background fill on hover — underline only.

**`nav-link`** — Transparent, ink text, `{typography.nav-link}` — 10px uppercase with 2.05px tracking. The most compressed nav typography in the directory.

**`hero-section`** — Full-bleed photographic hero with the display headline overlaid. Padding top 160px to position the Saol Display h1 in the lower two-thirds of the viewport.

**`hero-heading`** — White text on the photographic overlay, `{typography.display-lg}` — 60px Saol Display weight 300 uppercase with 2px tracking.

**`section-heading`** — Ink text, `{typography.heading-md}` — 16px Neue Helvetica 700 uppercase with 4px tracking. Used for "FEATURED DESTINATIONS," "THE FOUR SEASONS STORY," etc.

**`body-paragraph`** — White Monotype Garamond 18px over photographic fills; `{typography.body-md}` with 0.5px tracking. Used inside destination cards and editorial sections.

**`body-paragraph-ink`** — Same type token but in ink on white — the below-fold editorial content style.

**`card`** — White canvas, ink text, 0px radius, 30×25×50px padding. Holds a destination name in heading-md and 1–2 lines of Garamond body text.

**`destination-card`** — Full photographic fill treated as a black surface, white text, 0px radius, 40px padding. The display format for featured property tiles.

**`text-input`** — White canvas, ink-soft text, 0px radius, 8×20px padding, 40px height, 1px hairline (#d8d8d8) border. The booking form field.

**`booking-bar`** — White canvas strip spanning full width below the hero. Houses destination input, check-in/out date pickers, and the gray primary button. Padding 30×25×50px.

**`overline`** — Transparent, ink text, `{typography.label-md}` — 10px Neue Helvetica 700 uppercase with 3px tracking. The super-title above every section heading and card headline.

**`footer`** — Ink canvas, white text, 60×40px padding. Houses the Four Seasons wordmark, navigation tree, legal links, and the app-download row. All footer text uses `{typography.label-sm}`.

**`modal-overlay`** — Ink canvas, white text, 0px radius, 40px padding. Used for the booking modal and any pop-up destination detail.

## Do's and Don'ts

**Do** treat Saol Display at weight 300 as a sacred display tier — never apply it to body text or labels. The entire brand aspiration rests on the contrast between featherlight Saol Display above and compressed Neue Helvetica below.

**Do** keep navigation labels at 10px uppercase with 2.5–4px letter-spacing. Increasing label size or reducing tracking immediately collapses the authority gap between the destination headline and the structural chrome.

**Do** render CTAs in the 40px-height gray fill (#6d6d6d). The gray is the single concession to a non-ink, non-white color in the interactive chrome — replacing it with a brand accent (gold, green, blue) breaks the monochromatic discipline.

**Do** use photography fills rather than colored background fills for section variety. When a section needs visual contrast, the system reaches for a photographic image, not a colored block.

**Don't** add a chromatic accent color — not gold, not green, not any hospitality cliché. The moment a color accent enters the chrome, the system's entire identity collapses into the category default. The discipline is the brand.

**Don't** use `{typography.display-lg}` at weight 700 — the 60px Saol Display h1 must stay at weight 300. Bumping to bold makes the system indistinguishable from Marriott or Hilton's marketing pages; the lightness at large size is the typographic signature.

**Don't** use `{colors.link-default}` (#0000ee) as a brand accent or CTA color. It is the unoverridden browser hyperlink color for inline editorial links — using it anywhere outside that context introduces an accidental accent into a deliberately colorless system.

**Don't** add border-radius to buttons or cards. The system's 0px geometry is structural; rounding a button to 6px or a card to 12px immediately signals consumer-app friendliness, which is antithetical to the brand's architectural permanence.

## Known Gaps

- **Brand blue accent:** Four Seasons' loyalty program ("Book With Four Seasons") uses a distinct cobalt blue in some sub-brand contexts, but this does not appear in the marketing-site chrome captured here.
- **Hover and focus states:** the nav link underline on hover is the only documented state; full focus-ring, active-press, and disabled-button states are not captured from the marketing surface.
- **Dark mode:** the marketing site is light-only; dark surfaces appear only in photographic overlay contexts, not in a dedicated dark-mode token system.
- **Motion:** the hero rotates through destination photographs with a Ken Burns effect and fade transition; easing curves and duration values are not captured in this spec.
- **Responsive breakpoints:** the booking bar collapses to a stacked form on mobile; the Saol Display headline scales from 60px (desktop) down to approximately 36px; these responsive tokens are not included here.
- **Sub-brand surfaces:** Four Seasons Magazine, Four Seasons Yachts, and the Private Residences product use modified typographic and color treatments not captured in the main marketing site extraction.
- **Accessibility considerations:** the 10px Neue Helvetica label tier is below recommended minimum sizes for WCAG AA body text; this is a brand trade-off, not an oversight in the spec.