DESIGN.md inspired by Hyatt

---
name: Hyatt
tagline: 'Quiet luxury hotel discovery with monochrome typography, warm metallic accents, and immersive property imagery.'
updated_at: 2026-07-26T12:00:00+12:00
published_at: 2026-07-26T12:00:00+12:00
author: webdesignhot
source_url: https://www.hyatt.com
spec: webdesignhot/0.1
quality: auto
featured: false
categories: [hospitality, marketplace]
tags: [light, premium, sans, travel, hotel, image-first]
preview_swatch: ['#ffffff', '#1a1a1a', '#9a7b52']
related: [airbnb, qatar-airways, lufthansa]
description: 'Hyatt uses a restrained luxury-hospitality system built around full-width property imagery, black and white typography, warm metallic accents, a compact destination search, and brand-family storytelling that lets each hotel image carry the atmosphere.'
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent
  muted: text-muted
  border: border
  ring: accent
colors:
  bg: '#ffffff'
  bg-dark: '#171717'
  surface: '#ffffff'
  surface-warm: '#f5f2ed'
  text: '#1a1a1a'
  text-muted: '#646464'
  brand: '#1a1a1a'
  accent: '#9a7b52'
  accent-soft: '#d8c7ad'
  border: '#d8d5d0'
  success: '#3c7352'
  on-brand: '#ffffff'
typography:
  display:
    family: 'Helvetica Neue, Arial, sans-serif'
    weights: [300, 400, 500]
  body:
    family: 'Helvetica Neue, Arial, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, monospace'
    weights: [400]
  scale:
    hero: { size: 64, weight: 300, lineHeight: 1.05, tracking: '0', family: display }
    h1: { size: 46, weight: 300, lineHeight: 1.12, tracking: '0', family: display }
    h2: { size: 32, weight: 400, lineHeight: 1.2, tracking: '0', family: display }
    body-lg: { size: 19, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
    body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
radius:
  micro: 2
  sm: 4
  md: 8
  lg: 16
  pill: 9999
spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]
layout:
  page-width: 1320
  prose-width: 720
  header-height: 76
  search-width: 1120
motion:
  ease-standard: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-fast: 160
  duration-standard: 260
  duration-slow: 520
  reduced-motion: 'replace property-image zoom with a static crop'
breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1320
components:
  button-primary: { bg: brand, text: on-brand, radius: 2, padding: '13px 24px' }
  booking-bar: { bg: surface, text: text, border: border, radius: 4, padding: '16px 20px' }
  property-card: { bg: surface, text: text, border: border, radius: 4, padding: 0 }
lineage:
  summary: 'Hyatt follows luxury editorial restraint: property photography creates emotional value, while a disciplined monochrome booking layer keeps travel search dependable.'
  influences:
    - { name: 'Luxury hospitality', role: 'cinematic property imagery and quiet typography' }
    - { name: 'Travel marketplaces', role: 'destination, date, guest, and loyalty booking controls' }
    - { name: 'Editorial portfolios', role: 'large image crops and restrained text overlays' }
---

## 1. Visual Theme & Atmosphere

Use immersive property imagery and leave the surrounding UI quiet. Black, white, and warm neutrals create a premium frame without competing with destinations.

## 2. Color Palette & Roles

Black and white form the functional system. Warm metallic `#9a7b52` is an occasional accent for membership, premium experiences, or dividers rather than a dominant fill.

## 3. Typography Rules

Display headings are large, light-weight, and calm. Body and booking labels use a neutral sans at practical sizes with generous line height.

## 4. Component Stylings

The booking bar groups destination, dates, rooms, and guests in one white surface. Property cards are image-first with minimal text, modest corners, and one clear rate or details action.

## 5. Layout Principles

Let the hero image occupy the viewport while preserving a clean booking path. Brand collections and destinations should appear as full-width editorial bands, not nested cards.

## 6. Shapes & Radius Scale

Use 2-4px corners for buttons, search, and cards. Larger radius should be rare; the premium tone depends on disciplined geometry.

## 7. Depth & Elevation

Use image overlays for text readability and one subtle shadow around the booking bar. Avoid floating translucent panels over every property image.

## 8. Interaction & Motion

Property imagery may use a slow crop or cross-fade. Booking fields need immediate feedback, and reduced-motion mode should replace zoom effects with static imagery.

## 9. Accessibility & A11y

Text overlays need an adequate dark scrim, booking fields need persistent labels, and property carousels require named controls. Never place essential rate information only in imagery.

## 10. Responsive Behavior

Move the booking bar below the hero copy on mobile and stack its controls. Maintain meaningful property-image crops with fixed aspect ratios rather than arbitrary shrinking.

## 11. Content & Voice

Use calm, specific hospitality language: stay, destination, room, experience, member rate, and resort. Avoid exaggerated luxury adjectives when the image already demonstrates quality.

## 12. Dark Mode & Theming

The system can alternate white editorial sections with dark image-led campaigns. Booking surfaces remain light and predictable in either context.

## 13. Lineage & Influences

Hyatt combines the utility of a hotel marketplace with the pacing of a luxury travel magazine. Brand families can vary visually, but the booking interaction remains consistent.

## 14. Do's and Don'ts

Do lead with real properties, preserve quiet spacing, and keep booking visible. Do not over-round controls, use generic stock travel images, or obscure pricing and dates in decorative overlays.

## 15. Agent Prompt Guide

Create a Hyatt-style hotel discovery page with full-width premium property photography, a light-weight monochrome headline, compact white destination/date/guest booking bar, restrained square actions, and warm metallic accents used sparingly.