---
version: alpha
name: "Hyatt"
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."
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:
    fontFamily: "Inter"
    fontSize: "72px"
    lineHeight: 1.55
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Inter"
    fontSize: "16px"
    lineHeight: 1.55
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "8px"
  card: "16px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

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

## Colors

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.

## Typography

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

## Layout

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.

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.

## Elevation & Depth

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

## Shapes

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

## Components

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.

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.

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.

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

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

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.

## 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.

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.