--- version: alpha name: "Hyatt" website: "https://www.hyatt.com" description: >- A global hospitality brand whose public marketing site uses a strict system-font stack — no custom web fonts are loaded, with display running -apple-system/system-ui/Roboto at weight 700 and body at weight 400 — paired with a near-charcoal ink (#282828) on white. The brand's sole chromatic identity token is the cobalt blue of the World of Hyatt loyalty program square, visible in the site logo; the marketing surface itself contains no chromatic brand accent in the captured chrome. Typography discipline is notable for what it omits: no custom serif, no condensed display, no brand-licensed typeface — the system trusts the operating system's default sans-serif at all scales. seo: title: "Hyatt Design System for React — charcoal ink, system fonts, World of Hyatt cobalt, 14 components" metaDescription: "Hyatt's marketing-site design system as a DESIGN.md file. Near-charcoal ink (#282828) on white canvas, system-font-stack typography at weight 700 display, minimal color palette, 12 color tokens, 10 typography levels, 14 components. For React and AI tools." highlights: - "System-font-stack only — no 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 black — the dominant text color is a slightly lifted dark gray appearing in both text (10) and border (10) contexts" - "Monochromatic chrome — the 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 10px — secondary labels and error codes run 10px uppercase with Menlo monospace, echoing a developer-facing reference page aesthetic" - "Flat border-radius — no radius values captured in the marketing surface; the system uses no rounding on any structural chrome element" tags: - "Travel & Hospitality" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.hyatt.com" title: "Hyatt — official site" description: "Hyatt's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Hyatt's primary brand color?" answer: "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." - id: "typography" title: "What typeface does Hyatt use, and what should I use as a substitute?" answer: "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." - id: "spacing-system" title: "What spacing values does Hyatt use?" answer: "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." - id: "error-page-context" title: "Why does the Hyatt extraction show an error page?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own hospitality or travel site?" answer: "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." mockups: - "marketing-hero" - "checkout-flow" colors: ink: "#282828" canvas: "#ffffff" ink-muted: "#717171" surface-dark: "#000000" typography: display-xl: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 60px fontWeight: 700 lineHeight: 72px letterSpacing: 0 body-lg: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 31.2px letterSpacing: 0 body-md: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20.8px letterSpacing: 0 label-sm: fontFamily: "-apple-system, \"system-ui\", \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 13px letterSpacing: 0 mono-sm: fontFamily: "Menlo, Consolas, Monaco, \"Liberation Mono\", \"Lucida Console\", monospace" fontSize: 12px fontWeight: 400 lineHeight: 15.6px letterSpacing: 0 rounded: none: "0px" spacing: xs: "4px" sm: "12px" base: "18px" md: "24px" lg: "32px" xl: "120px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px 32px" height: "48px" border: "0" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px 32px" height: "48px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px 24px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "0px 12px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-md}" error-code: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.label-sm}" error-reference: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.mono-sm}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "24px" borderColor: "{colors.ink-muted}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "4px" height: "48px" borderColor: "{colors.ink-muted}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-md}" padding: "32px 24px" loyalty-logo: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.label-sm}" rounded: "{rounded.none}" padding: "4px" --- ## 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 | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 60px | 700 | 72px | Hero h1 | | `{typography.body-lg}` | 24px | 400 | 31.2px | Lead paragraph body | | `{typography.body-md}` | 16px | 400 | 20.8px | Default body text | | `{typography.label-sm}` | 10px | 400 | 13px | Uppercase labels (ERROR, REFERENCE) | | `{typography.mono-sm}` | 12px | 400 | 15.6px | Monospace reference codes | ### 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.