What is Four Seasons' primary brand color?

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.

What typefaces does Four Seasons use, and what are the best substitutes?

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.

How does Four Seasons style its buttons without a brand color?

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.

What is Four Seasons' spacing rhythm?

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.

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

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.

Four Seasons Design System

Four Seasons' marketing-site design system as a DESIGN.md file.

About Four Seasons DESIGN.md

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

Travel & Hospitality

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.

What makes it distinct

Monochromatic disciplinezero chromatic brand accent; every color on the page is ink black, white, or a photographic pixel
Saol Display at weight 300the hero runs 60px uppercase display in an ultra-light editorial serif, the inverse of the bold-display hospitality convention
Dual typeface voicesSaol Display for atmosphere, Neue Helvetica 700 uppercase for all navigation and CTAs, Monotype Garamond for all editorial body text
Photography as the brandthe above-fold hero is a full-bleed landscape photograph with the display headline overlaid in white, making each destination the visual identity
Zero-radius systemall buttons, inputs, and cards render with 0px border-radius; the brand relies on hairlines and whitespace rather than rounded softness

Live at fourseasons.com

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

fourseasons.com

Explore Four Seasons

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Four Seasons design system FAQ

Common questions about Four Seasons'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.

Four Seasons — official site

Four Seasons' 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.