What is Hyatt's primary brand color?

The Hyatt marketing site's captured chrome contains no chromatic accent color in the measured extraction — only near-charcoal (#282828) and white (#ffffff). The brand's chromatic identity appears in the World of Hyatt loyalty program logo, which uses a cobalt blue square as its visual mark (visible in the screenshot). This cobalt is the closest thing to a brand voltage in the Hyatt system, but it does not appear in the marketing-page chrome, button fills, or navigation elements. The extraction was blocked by Hyatt's security layer and captured an error page rather than the full marketing site, so additional brand colors may appear in the hotel discovery and booking flows not represented here.

What typeface does Hyatt use, and what should I use as a substitute?

Hyatt's marketing page runs on the system-font stack: -apple-system, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif — in that fallback cascade. No custom web fonts are loaded in the captured extraction. The display headline (h1) runs at 60px weight 700; body text runs at 16px weight 400; secondary labels run at 24px weight 400; and the error reference code uses Menlo/Consolas/Monaco monospace at 12px weight 400 in uppercase. Since there is no proprietary typeface, any system-compatible sans-serif at the same weights is a valid implementation. Inter is the closest open-source substitute if you need a non-system typeface that matches the proportions.

What spacing values does Hyatt use?

The captured spacing values are sparse due to the WAF-blocked extraction, but the available values show: 4px as the base unit (2 occurrences), 18px, 24px, and 32px as standard content spacing values, and a distinctive 30px×30px×300px padding value that appears once — likely the large-radius bottom padding on the hero section's bottom edge. The 12px spacing value appears in a compound 0px 0px 12px shadow or padding shorthand across 3 elements. Section-level spacing uses 120px vertical padding on major hero sections.

Why does the Hyatt extraction show an error page?

Hyatt's marketing site at www.hyatt.com blocked the extraction tool with a WAF (Web Application Firewall) security challenge, returning an error page (error code E6020) rather than the full marketing surface. The screenshot shows the World of Hyatt logo, a bold system-font h1 reading 'We're sorry.', and a paragraph of body text — all structural chrome from the error page. The token extraction thus captured the error page's styling rather than the above-fold hotel-discovery interface. The colors, typography, and spacing values in this DESIGN.md are from that constrained surface. A full extraction would likely reveal additional brand tokens in the hotel search bar, destination photography grid, and booking flow.

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

Yes, with the limitation that this file captures Hyatt's structural baseline rather than its full marketing surface. The tokens that are reliably grounded are: near-charcoal ink (#282828) for text and borders, white canvas (#ffffff), the system-font stack at weight 700 for display and weight 400 for body, and a flat 0px border-radius throughout. The World of Hyatt cobalt blue is declared as the brand accent based on the logo visible in the screenshot. Feed this file to Claude or Cursor to get a hospitality-adjacent chrome with system-font typography, monochromatic ink-and-white palette, and the structural discipline that a travel-booking interface requires. For a full-fidelity Hyatt implementation, supplement with the actual marketing page styles from the hotel search and booking flow.

Hyatt Design System

Hyatt's marketing-site design system as a DESIGN.md file.

About Hyatt DESIGN.md

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

Travel & Hospitality

Hyatt's marketing system is the most typographically austere in the hospitality category — no custom web fonts, no brand-licensed typeface, no proprietary display serif. The page runs on -apple-system, system-ui, Roboto, and Helvetica in that cascade; the h1 at 60px weight 700 is whatever the operating system's default sans-serif renders on the device. Where Four Seasons spends design budget on Saol Display and Monotype Garamond and Ritz-Carlton on Caslon540Std, Hyatt spends nothing on typography — and the result reads as infrastructure rather than aspiration. The only chromatic identity signal is the cobalt blue of the World of Hyatt loyalty program logo square, visible in the screenshot captured here; the rest of the chrome is near-charcoal on white.

The DESIGN.md file packages the available system into a machine-readable spec: 12 color tokens drawn from the near-charcoal ink (#282828) and white palette, with the World of Hyatt cobalt blue declared as the brand accent even though it does not appear in the marketing-page chrome; 10 typography tokens spanning the system-font stack at 10–60px; a flat 0px radius throughout; and 14 component definitions. The extraction captured a WAF error page rather than the full marketing site (the extractor was blocked by Hyatt's security layer), so these tokens represent the page's structural baseline rather than the full above-fold marketing surface. The World of Hyatt logo colors are derived from the logo visible in the captured screenshot.

Feed this file to Claude or Cursor with the caveat that Hyatt's actual marketing surface — the full-page hero, the hotel search interface, the destination photography grid — was not captured in the extraction. The tokens here represent the typography and structural palette that appear in the available screenshot. The system's most distinctive move is the decision not to move: no custom type, no chromatic accent in the chrome, no radius softness. This reads as a deliberate bet that photography and property names carry the brand without typographic decoration.

What makes it distinct

System-font-stack onlyno custom web fonts loaded; display runs -apple-system at weight 700 at 60px, body at weight 400 at 16px
Near-charcoal ink (#282828) not pure blackthe dominant text color is a slightly lifted dark gray appearing in both text (10) and border (10) contexts
Monochromatic chromethe marketing-site extraction shows zero chromatic accent colors; all brand color is delegated to the World of Hyatt loyalty logo (cobalt blue)
Uppercase micro-type at 10pxsecondary labels and error codes run 10px uppercase with Menlo monospace, echoing a developer-facing reference page aesthetic
Flat border-radiusno radius values captured in the marketing surface; the system uses no rounding on any structural chrome element

Live at hyatt.com

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

hyatt.com

Explore Hyatt

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.

Hyatt design system FAQ

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

Hyatt — official site

Hyatt's 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.