DESIGN.md inspired by Four Seasons Hotels and Resorts

---
name: Four Seasons Hotels and Resorts
tagline: Cinematic luxury hospitality in full-bleed imagery, fine editorial serif type, and exact black-white controls.
updated_at: 2026-08-03T06:35:00.000Z
published_at: 2026-08-03T06:35:00.000Z
author: webdesignhot
source_url: https://www.fourseasons.com/
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [hospitality]
tags: [hospitality, luxury, editorial, travel, monochrome, full-bleed, concierge]
preview_swatch: ['#ffffff', '#000000', '#d8d4cd']
related: [marriott, airbnb, ihg-hotels]
description: 'Four Seasons uses restraint rather than ornamental luxury cues. The audited homepage alternates full-bleed destination photography with pure black and white fields, zero-radius controls, high-tracking uppercase utility type, and delicate Saol Display and Monotype Garamond editorial faces. An 80px desktop hero reduces to 40px on mobile, while 10px uppercase calls to action remain compact and exact.'

aliases:
  background: bg
  foreground: text
  primary: ink
  primary-foreground: on-ink
  accent: text-soft
  muted: text-muted
  border: border
  ring: ink

colors:
  bg: '#ffffff'
  bg-inverse: '#000000'
  surface: '#ffffff'
  surface-warm: '#f4f2ef'
  surface-muted: '#e7e4df'
  text: '#000000'
  text-soft: '#383838'
  text-muted: '#6b6b6b'
  text-inverse: '#ffffff'
  ink: '#000000'
  on-ink: '#ffffff'
  warm: '#d8d4cd'
  border: '#c9c6c1'
  border-strong: '#000000'
  scrim: 'rgba(0,0,0,0.42)'
  focus: '#000000'
  success: '#2d6a4f'
  warning: '#7a5800'
  danger: '#9f1d20'

typography:
  display:
    family: '"Saol Display", "Times New Roman", serif'
    weights: [300, 400]
  editorial:
    family: '"Monotype Garamond", Garamond, Georgia, serif'
    weights: [400]
  body:
    family: '"Neue Helvetica", "Helvetica Neue", Arial, sans-serif'
    weights: [400, 700]
  mono:
    family: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace'
    weights: [400, 600]
  scale:
    hero: { size: 80, weight: 300, lineHeight: 0.82, tracking: '0', family: display }
    hero-mobile: { size: 40, weight: 300, lineHeight: 1, tracking: '0', family: display }
    section: { size: 60, weight: 300, lineHeight: 1, tracking: '2px', family: display }
    section-mobile: { size: 40, weight: 300, lineHeight: 1, tracking: '2px', family: display }
    card-title: { size: 21, weight: 400, lineHeight: 1.3, tracking: '0', family: editorial }
    body: { size: 16, weight: 400, lineHeight: 1.6, tracking: '0', family: body }
    eyebrow: { size: 16, weight: 700, lineHeight: 1.2, tracking: '4px', family: body }
    eyebrow-mobile: { size: 12, weight: 700, lineHeight: 1.25, tracking: '3px', family: body }
    button: { size: 10, weight: 700, lineHeight: 1, tracking: '3px', family: body }

spacing:
  base: 4
  scale: [4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 120, 160]

radius:
  none: 0

layout:
  page-width: 1280
  prose-width: 680
  header-height: 88
  hero-min-height: 760
  property-card-min: 320
  grid-gap: 32
  section-gap: 120
  mobile-gutter: 24

components:
  primary-button:
    bg: '#000000'
    color: '#ffffff'
    height: 39
    radius: 0
    padding: '14px 22px'
    border: '1px solid #000000'
    shadow: 'none'
    use: 'Plan a stay, discover a property, or advance one concierge action.'
  inverse-button:
    bg: '#ffffff'
    color: '#000000'
    height: 39
    radius: 0
    padding: '14px 22px'
    border: '1px solid #ffffff'
    use: 'Action over dark imagery or a black editorial field.'
  text-link:
    bg: '#ffffff'
    color: '#000000'
    radius: 0
    border: 'none'
    underline: '1px solid #000000'
    use: 'Editorial exploration where a filled action would interrupt the reading rhythm.'
  property-card:
    bg: '#ffffff'
    color: '#000000'
    radius: 0
    border: 'none'
    shadow: 'none'
    padding: 0
    use: 'Large property image with location, property name, and concise editorial description.'
  booking-field:
    bg: '#ffffff'
    color: '#000000'
    height: 52
    radius: 0
    border: '1px solid #c9c6c1'
    padding: '12px 14px'
    use: 'Destination, date, guests, and residence selection with precise labels.'
  hero:
    bg: '#000000'
    color: '#ffffff'
    min-height: 760
    scrim: 'linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.42))'
    use: 'Full-bleed property or destination scene with minimal centered copy and one action.'

motion:
  duration-fast: 120
  duration-standard: 240
  duration-slow: 700
  ease-standard: 'cubic-bezier(0.22, 1, 0.36, 1)'
  image-reveal: 'Use a slow opacity reveal or restrained crop shift without obscuring property detail.'
  reduced-motion: 'Use immediate image and text changes; keep all navigation and booking states intact.'

breakpoints:
  mobile: 640
  tablet: 900
  desktop: 1200
  wide: 1600

shadows:
  card: 'none'
  menu: '0 10px 30px rgba(0,0,0,0.18)'
  dialog: '0 20px 56px rgba(0,0,0,0.32)'
  focus: '0 0 0 3px rgba(0,0,0,0.24)'

accessibility:
  focus-ring: '2px solid #000000 with 3px offset; invert to white on black or photographic surfaces'
  touch-target-min: 44
  reduced-motion-honored: true
  imagery: 'Describe the property, location, and meaningful amenity rather than generic luxury.'
  booking: 'Expose total, taxes, fees, currency, cancellation, and accessibility details in text.'

lineage:
  summary: 'Recorded from the current Four Seasons public homepage at desktop and mobile widths on 2026-08-03.'
  influences:
    - name: Four Seasons homepage
      role: 'Primary source for Saol Display and Monotype Garamond typography, monochrome controls, full-bleed imagery, zero-radius geometry, and responsive hierarchy.'
      url: https://www.fourseasons.com/
---

## 1. Visual Theme and Atmosphere

Four Seasons communicates luxury through space, image quality, and typographic restraint. Full-bleed property scenes alternate with pure black or white editorial fields. There are no decorative gradients, soft card stacks, or novelty shapes competing with the destination.

The mood is formal but not cold. Fine serif display type carries emotion, while highly tracked uppercase sans-serif labels make concierge and booking actions exact.

## 2. Color System

Use pure white and black as the dominant system. Warm gray `#d8d4cd` and pale `#f4f2ef` can separate editorial or residence content. Keep body copy black or white, with `#6b6b6b` only for secondary metadata.

Photography supplies natural color. Do not introduce a bright digital brand accent simply to make controls noticeable; contrast, placement, and whitespace perform that role.

## 3. Typography

Saol Display is the principal voice. The audited hero is 80px at 300 weight with a tight 0.82 line height, reducing to 40px/40px on mobile. Editorial section statements reach 60px desktop and 40px mobile. Monotype Garamond supports 21px property titles.

Neue Helvetica carries utility content. Eyebrows use 12-16px bold uppercase with 3-4px tracking; buttons use 10px bold uppercase with 3px tracking. Do not apply that spacing to sentences or property descriptions.

## 4. Component Styling

Primary and inverse actions are compact 39px rectangles with zero radius, 10px uppercase labels, and no shadow. Property cards are unframed: image, location, name, and short copy sit directly in the layout.

Booking fields are 52px square controls with clear labels. Use underlined editorial links where a filled button would break the visual rhythm.

## 5. Layout Principles

The hero is a full-bleed scene near 760px high, not an image inside a framed card. Keep its copy minimal and centered or aligned to a quiet image region. Major editorial bands use 120px spacing and a constrained 680px reading measure.

Property collections can use two or three broad columns with 32px gaps. Let the image occupy most of each item and avoid card chrome around it.

## 6. Shapes and Radius

The observed system uses zero-radius geometry. Buttons, fields, image frames, and panels are exact rectangles. Circles may appear only where the object itself requires one, such as media playback or a map marker.

## 7. Depth and Elevation

Ordinary content has no shadow. Black-white contrast, image edges, and spacing create depth. Menus and dialogs may use restrained shadows for functional separation, but property tiles should remain flat and editorial.

## 8. Interaction and Motion

Controls respond within 120-240ms. Image reveals can take up to 700ms with a gentle opacity or crop transition, provided the property remains inspectable and the booking task is not delayed. Avoid decorative continuous motion.

Reduced-motion mode replaces reveals with immediate visibility and removes crop shifts. Focus, date selection, and booking status remain explicit.

## 9. Responsive Behavior

Reduce display type from 80px to 40px at a breakpoint; do not scale it continuously with viewport width. Preserve a hint of the next content band below the mobile hero. Property grids become one column with full-width, uncropped-enough imagery.

Booking controls stack in task order and maintain 44px touch targets even though visual desktop actions are 39px. Keep uppercase labels from wrapping by allowing adequate width.

## 10. Accessibility

Use black focus with offset on white and white focus on images or black. Text over photography requires a measured scrim or a deliberately quiet image region. Do not rely on image darkness that changes across responsive crops.

Booking must expose total cost, taxes, fees, currency, cancellation, and accessible-room information as text. Destination imagery needs alt text only when it communicates property or amenity information.

## 11. Imagery and Media

Use actual Four Seasons properties, interiors, landscapes, dining, and guest experiences at high resolution. Images must reveal the place rather than act as blurred atmosphere. Preserve architectural lines and primary subjects when crops change.

Video should begin only by user action unless it is silent, nonessential, and easily paused. Always provide a static image that carries the same destination meaning.

## 12. Content Voice

Copy is concise, sensory, and specific to place. Use concrete property, season, dining, and cultural details rather than generic superlatives. Utility labels remain literal: "Plan your stay", "Check availability", and "Explore rental homes".

## 13. Reusable Patterns

The strongest pattern is cinematic media followed by a restrained editorial invitation. It suits premium hospitality, real estate, and cultural destinations where the object must be seen before details are compared.

A second pattern is the monochrome concierge action: compact uppercase controls remain precise while the surrounding experience feels spacious.

## 14. Agent Implementation Notes

Source real property imagery and define stable aspect ratios before laying out copy. Implement zero-radius controls and breakpoint-specific type exactly; do not add softness to make the page feel contemporary. Keep booking semantics independent from the cinematic presentation layer.

Use the image as evidence, not decoration. Every property card should identify location and name outside the image so text remains readable and indexable.

## 15. Anti-Patterns

Do not add gold gradients, beige card stacks, pill controls, ambient shadows, or ornamental script type. Avoid dark, blurred, or overly cropped images that prevent property inspection. Never let a cinematic transition delay booking, hide prices, or obscure cancellation and accessibility information.