Hyatt Design System

Overview

Hyatt's marketing chrome is the starkest typographic statement in the hospitality category. Infrastructure over aspiration: where every other major hotel brand — Four Seasons, Ritz-Carlton, Marriott — commissions proprietary typefaces or licenses editorial serifs to communicate prestige, Hyatt runs the operating system's default sans-serif stack at every scale. The h1 at 60px weight 700 renders in whatever -apple-system produces on the visitor's device. This is not an oversight; it is the same decision that large-scale infrastructure brands make when they trust their product to speak rather than their typography.

The captured extraction hit Hyatt's WAF security layer and returned an error page rather than the full marketing surface, which means the token set here represents the baseline structural chrome rather than the full above-fold hotel-discovery interface. What the error page does reveal is the typography backbone: system-font stack at 60px/700 for the h1, system-font at 24px/400 for the lead paragraph, system-font at 16px/400 for body, and Menlo monospace at 12px for the reference code. This is a system with zero font budget and considerable structural confidence.

The brand's only chromatic signal in the captured screenshot is the cobalt blue square of the World of Hyatt loyalty logo — a blue-on-blue square mark with white sans-serif text. The marketing chrome around it is near-charcoal on white, no accent visible.

Key Characteristics:

• System-font stack throughout — no custom typeface loaded; -apple-system cascades to Segoe UI on Windows, Roboto on Android, Helvetica on older systems.
• Near-charcoal ink (#282828) not pure black — a fractionally lifted dark tone appearing in both text (10) and border (10) contexts.
• Zero chromatic brand accent in the captured chrome — all brand identity is delegated to the World of Hyatt logo.
• Monospace label at 10px uppercase — the error code and reference number use Menlo/Consolas mono, signaling technical transparency.
• No border-radius captured anywhere in the structural chrome.
• Extraction was blocked by WAF — the full marketing surface (hotel grid, search bar, photography hero) is not represented in this spec.

Colors

Core

• Ink ({colors.ink} — #282828): frequency 20. Used as text (10) and border (10). The dominant structural color — both the reading text and the structural border use the same near-charcoal tone. Not pure black; the slight gray lift softens authority without diluting it.
• Canvas ({colors.canvas} — #ffffff): the page floor. White throughout the error-page surface.
• Ink Muted ({colors.ink-muted} — #717171): frequency 12. Used as text (6) and border (6). The secondary text tone — used for the REFERENCE label and the phone number context text.
• Surface Dark ({colors.surface-dark} — #000000): frequency 2, one text and one border. A rare pure-black occurrence, likely the World of Hyatt logo background or a deep overlay element.

Typography

Font Family

The system runs the OS default sans-serif stack in strict order: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif. No custom web fonts are declared or loaded in the captured extraction. The Menlo/Consolas/Monaco monospace stack appears only for code-style reference annotations.

Hierarchy

Principles

Weight variation is binary: 700 for the display h1 and 400 for everything below it. There is no intermediate weight (500, 600) in the captured typography. The system doesn't use letter-spacing adjustments — all letterSpacing values are at the default (zero tracked). The label-sm tier at 10px uppercase inherits from the same system stack; the uppercase treatment is applied via CSS text-transform rather than a separate typeface choice.

Note on Font Substitutes

Since the system runs the OS default stack, any well-kerned sans-serif at the same weights is compatible. Inter at weight 700/400 is the closest matching substitute for screens where the OS default doesn't produce the desired proportions. Geist (Vercel's open-source sans) is another option at the display scale; its cap height and weight distribution at 60px/700 match the system-ui reference closely.

Layout

Spacing System

• Base: 4px unit.
• Tokens: {spacing.xs} 4px · {spacing.sm} 12px · {spacing.base} 18px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 120px.
• Hero section padding: 120px vertical, based on the captured 120px spacing value.
• Bottom hero curve: the 30px 30px 300px padding shorthand suggests a large bottom-radius or generous vertical padding below the hero — a distinctive spacing value that may relate to the wave-curve visual at the bottom of the above-fold section on the actual marketing page.

Grid & Container

• The captured error page uses a centered single-column layout at approximately 600px max-width.
• The actual Hyatt marketing page (not captured due to WAF block) uses a full-bleed hero with a hotel-search bar overlay and a below-fold destination grid.

Rhythm

The captured surface has a single-column rhythm: logo → h1 → lead paragraph → body text → error codes. The spacing is generous — 12px shadow/padding shorthand appears 3 times suggesting consistent section spacing. The page has no complex grid rhythm visible in the available extraction.

Elevation

The captured structural surface has no box-shadow values. The 0px 0px 12px spacing value appears 3 times as a padding shorthand, not as a shadow declaration. The actual Hyatt hotel-search interface likely uses subtle card shadows for the search form, but these are not captured here.

Shapes

No border-radius values appear in the extracted radii array. The system uses a fully rectilinear geometry for all buttons, inputs, and structural elements visible in the captured surface. This matches the broader hospitality category convention: rectilinear geometry reads as permanence and architectural authority, not consumer-app approachability.

Components

button-primary — Near-charcoal (#282828) fill, white text, system-font 16px weight 400, 0px radius, 0×32px padding, 48px height. No custom typeface on the button label.

button-secondary — Transparent, near-charcoal text, 1px near-charcoal border, same typography. Used for secondary navigation actions.

top-nav — White canvas, near-charcoal text, system-font 16px weight 400, 64px height, 0×24px padding. The World of Hyatt cobalt square logo sits flush left.

nav-link — Transparent, near-charcoal text, 12px horizontal padding. Navigation labels in system-font at 16px.

hero-heading — Near-charcoal (#282828) text on white canvas, {typography.display-xl} — 60px system-font weight 700. The captured h1 reads "We're sorry." — the error page; the actual marketing h1 is a destination headline in the same font stack.

section-heading — Near-charcoal, {typography.body-lg} — 24px weight 400. Sub-section headings in the content flow.

body-paragraph — Near-charcoal text, {typography.body-lg} — 24px weight 400. Lead paragraph beneath the h1.

body-paragraph-muted — Muted gray (#717171), {typography.body-md} — 16px weight 400. Secondary body text (phone number context, secondary labels).

error-code — Muted gray, {typography.label-sm} — 10px weight 400 uppercase. The "ERROR: E6020" label style.

error-reference — Near-charcoal, {typography.mono-sm} — 12px Menlo monospace weight 400. The reference string "0.be986652.1779205379.5a8431e" — code-style identifier text.

card — White canvas, near-charcoal text, system-font body, 0px radius, 24px padding, muted hairline border.

text-input — White canvas, near-charcoal text, system-font 16px, 0px radius, 4px padding, 48px height, muted (#717171) border.

footer — White canvas (not dark), muted gray text, system-font 16px, 32×24px padding.

loyalty-logo — The World of Hyatt square logo tile: near-charcoal (#282828) or cobalt blue background, white text, 10px uppercase sans, 0px radius, 4px padding. The only element in the captured screenshot with a non-white background.

Do's and Don'ts

Do use the system-font stack at the specified weights — the system's identity is anchored to the OS default sans-serif rendering, which means Inter or Geist are acceptable substitutes but should be chosen deliberately rather than by default.

Do hold near-charcoal (#282828) as both text and border color. The system uses the same tone for structural dividers and reading text; introducing a separate border gray would differentiate what the system deliberately unifies.

Do treat the World of Hyatt cobalt blue as a loyalty-program-scoped token. The brand color appears only in the logo mark and the loyalty program UI — it should not appear in the primary marketing chrome.

Do use monospace (Menlo/Consolas) only for reference codes, confirmation numbers, and technical identifiers. The {typography.mono-sm} tier is for system-generated strings, not for decorative labels.

Don't load a custom display typeface as a "brand upgrade." The decision to use system fonts is the brand statement — adding a proprietary serif or condensed display contradicts the infrastructure-first identity.

Don't add color accents to the marketing chrome. The cobalt from the loyalty logo is the only brand color in the system; adding orange, teal, or any chromatic accent immediately shifts the register from global infrastructure to consumer lifestyle brand.

Don't introduce border-radius to buttons or navigation elements. The flat geometry of the captured surface is consistent with the brand's architectural posture; rounding would not survive the hospitality-category differentiation test.

Don't use {colors.ink-muted} (#717171) for primary body text — it is a secondary and tertiary label tone. Primary body text and display text both use {colors.ink} (#282828).

Known Gaps

• WAF block: the extractor was blocked by Hyatt's security layer (error E6020), capturing only the error page rather than the full marketing surface. The hotel discovery grid, full-bleed photography hero, hotel search bar, and booking flow are not represented in this spec.
• Brand color extraction: only 3 colors were captured (ink, ink-muted, surface-dark) because the error page renders fewer elements than the full marketing site. The full palette — including the World of Hyatt cobalt, any gold or teal accents in the rewards program, and the brand's full button and form styling — requires a successful full-page extraction.
• Typography breadth: the full Hyatt marketing page likely loads additional typeface weights or potentially a custom sans-serif for the hotel-brand wordmark; these were not captured in the WAF-blocked extraction.
• Component coverage: only the error-page components (hero-heading, body-paragraph, error-code, error-reference) were observed directly; all other components in this spec are inferred from the structural conventions visible in the screenshot and the system-font typography stack.
• Dark mode and regional variants: Hyatt operates multiple sub-brands (Park Hyatt, Grand Hyatt, Andaz, Thompson Hotels, Alila) each with distinct visual identities not represented here.
• Mobile layout: the captured screenshot is 1440px desktop; mobile breakpoints, font-size scaling, and the collapsed search-bar layout are not documented.