---
version: alpha
name: "Hilton"
website: "https://www.hilton.com"
description: >-
  A global hotel-chain brand running two tightly paired proprietary typefaces — Loew Black (uppercase, condensed-width feel) for display headings and Loew Bold for body-level UI — on a system anchored by a deep royal navy (#104c97) as the primary brand voltage and a sky blue (#00a8e1) as the interactive accent. The brand chrome is restrained and near-monochromatic at the structural level (dark gray ink on white canvas) with color reserved for the CTA button, the hero heading, and hairline borders. The marketing surface reveals 18 sub-brand logos spanning Waldorf Astoria through Tru by Hilton, each in its own color, unified under the Hilton wordmark in a centered portal footer.

seo:
  title: "Hilton Design System for React — royal navy, sky blue, Loew Black, 14 components"
  metaDescription: "Hilton's marketing-site design system as a DESIGN.md file. Royal navy CTA button, sky blue interactive accent, Loew Black uppercase display, 18 sub-brand logos, and 14 component definitions for React, Next.js, and AI tools."
  highlights:
    - "Royal navy primary voltage — the deep navy CTA button is Hilton's only brand-color use on a predominantly gray-and-white system"
    - "Sky blue interactive accent — the hero heading and link colors use a lighter sky blue rather than the primary navy, creating a two-blue brand system"
    - "Loew Black for uppercase display — all visible headings run in the Loew Black weight with uppercase tracking, a compressed condensed feel despite being set in a wide-tracking variant"
    - "18 sub-brand portfolio logos — the footer reveals Waldorf Astoria, Conrad, Canopy, DoubleTree, Embassy Suites, Hampton, Tru, Homewood Suites, and 10 others, each in its own chromatic identity"
    - "Error-page extraction — the captured tokens come from a 404/error surface; the visitor-facing homepage has a richer design, but the error page faithfully exposes the brand's core type, color, and spacing tokens"
  tags:
    - "Travel & Hospitality"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Hilton's brand system reveals itself even on a 404 page. The extraction was captured from an error surface rather than the full homepage, but the page delivers every foundational brand token in sharp relief: Loew Black in all-caps at 48px for the heading, Loew Bold for body text, royal navy on the CTA button, sky blue on the hero heading and link accents, and a 5px border radius on all interactive surfaces. The error page's editorial self-awareness ("Maybe it's us, maybe it's you. (It's probably us)") is itself brand voice. Below the fold, 18 sub-brand portfolio logos — from Waldorf Astoria down to HOME2 Suites and Hilton Grand Vacations — render in their individual chromatic identities, unified under the Hilton Hotels & Resorts wordmark centered in the footer.

    The two-blue system is Hilton's defining chromatic choice. Royal navy (#104c97) is the action color — it fills the primary CTA button, appears as the nav background on logged-in surfaces, and anchors the brand mark. Sky blue (#00a8e1) is the interaction color — it renders the hero heading on the error page, colors active link text, and outlines the error panel's cyan border. The pairing reads as depth plus energy: navy grounds the brand with hotel-lobby authority, sky blue signals digital interactivity in a way the darker navy alone could not. Competitors like Marriott use a single brand red across both roles; Hyatt uses a single gold-yellow; Hilton's two-blue strategy is the most architecturally precise chromatic discipline in the major hotel chains.

    Feed this file to an AI coding tool and it reproduces Hilton's specific moves: Loew Black uppercase display at 48px with tight leading, royal navy primary buttons, sky blue for heading accents and link text, a near-monochromatic gray structural palette, and the 5px radius that keeps the interface approachable without tipping into consumer-app softness. The sub-brand portfolio footer is the hardest surface to reproduce: 18 distinct brand identities each with their own colors, unified only by scale, positioning, and the Hilton parent wordmark above them.

  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.hilton.com"
      title: "Hilton — official site"
      description: "Hilton'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: "two-blue-system"
      title: "Why does Hilton use two different blues — navy and sky blue?"
      answer: "Hilton uses royal navy (#104c97) as the brand-ownership color — it fills the primary CTA button, anchors the Hilton wordmark, and signals the parent brand's authority. Sky blue (#00a8e1) functions as the interactive-state color — it renders heading accents, link colors, and focus indicators. The split between ownership and interactivity is deliberate: navy is the 'Hilton blue' that appears on physical property signage and print; sky blue is the digital-interaction signal that provides the visual contrast needed for link readability on white canvas. Major competitors use a single brand color for both roles — Hilton's two-blue separation is the most architecturally precise color system in the major hotel chains."
    - id: "loew-typeface"
      title: "What is the Loew typeface and what should I use as a substitute?"
      answer: "Loew is a geometric sans-serif designed by René Bieder, licensed commercially rather than proprietary. Hilton uses three weights: Loew Black (display headings at 48px, uppercase), Loew Bold (UI elements at 16px, mixed-case and uppercase), and Loew Regular (body text at 16px). The Black weight in uppercase gives headings a condensed-feeling authority despite normal letter-width, achieved by the geometry and x-height ratio. For React implementations, Montserrat Black is the closest open-source substitute for the display tier; Montserrat SemiBold or Bold matches the UI tier. Nunito Sans Black is an alternative that preserves the geometric warmth."
    - id: "sub-brand-portfolio"
      title: "How does Hilton's design system handle 18 sub-brands?"
      answer: "The Hilton portfolio footer shows all 18 brands in their own chromatic identities: Waldorf Astoria in black-and-gold, Conrad in dark gray, Canopy in bright green, DoubleTree in warm brown, Embassy Suites in deep blue, Hampton in orange-red, Tru in bright cyan, Homewood Suites in navy, HOME2 in orange, and Hilton Grand Vacations in navy. Each brand renders its own wordmark/logo in its own colors. The unifying container is not a color system but a structural system: every logo appears at the same approximate height, in a centered multi-row grid, beneath the Hilton Hotels & Resorts wordmark, and above the Hilton Honors loyalty lockup. Brand diversity is managed through position and scale uniformity, not palette alignment."
    - id: "radius-scale"
      title: "What is Hilton's corner-radius philosophy?"
      answer: "Hilton runs a single dominant radius: 5px. It appears on the primary CTA button and is the only radius in the captured extraction. This is a deliberate middle-ground: tighter than the 8–12px consumer-app radius that brands like Airbnb use, but softer than the 2–3px luxury-airline radius that Emirates uses. The 5px radius positions Hilton's digital interface between mass-market hospitality (rounded, approachable) and formal corporate hospitality (tight, authoritative). The error-panel border that frames the hero content on the captured page uses a sky-blue outline at full sharp corners — 0px radius — distinguishing the structural container from interactive elements."
    - id: "error-page-brand-voice"
      title: "What does the error page reveal about Hilton's brand voice?"
      answer: "Hilton's 404/error page reads: 'Something Went Wrong / Maybe it's us, maybe it's you. / (It's probably us).' The parenthetical self-deprecation and the willingness to take responsibility in the body copy signals a brand voice that is warm, self-aware, and conversational — unusual for a hotel chain of Hilton's scale. The heading 'SOMETHING WENT WRONG' in uppercase Loew Black sky blue is declarative and almost confrontational in its directness; the subtext immediately softens it. This brand-voice pattern — confident announcement, warm clarification — appears across Hilton's marketing copy and is worth preserving in any React implementation that uses this spec for error states."

mockups:
  - "marketing-hero"
  - "pricing-table"

colors:
  primary: "#104c97"
  secondary: "#00a8e1"
  ink: "#222222"
  ink-muted: "#666666"
  canvas: "#ffffff"
  hairline: "#666666"

typography:
  display-xl:
    fontFamily: "\"loewblack\", Arial, Helvetica, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.48px
  heading-lg:
    fontFamily: "\"loewbold\", Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"loewbold\", Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: -0.4px
  body-lg:
    fontFamily: "\"loewbold\", Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-md:
    fontFamily: "\"loewregular\", Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"loewbold\", Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  caption:
    fontFamily: "Arial, Helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0
  button-md:
    fontFamily: "\"loewbold\", Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: -0.4px

rounded:
  none: "0px"
  sm: "5px"
  full: "9999px"

spacing:
  xs: "5px"
  sm: "6px"
  md: "10px"
  base: "12px"
  lg: "20px"
  xl: "32px"
  2xl: "55px"
  3xl: "60px"
  4xl: "67px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "11px 0px"
    height: "41px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "11px 0px"
    height: "41px"
    borderColor: "{colors.primary}"
  top-nav:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "0px 32px"
    height: "48px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    padding: "0px 10px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.secondary}"
    typography: "{typography.display-xl}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    padding: "0px"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
    padding: "0px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "32px"
    borderColor: "{colors.secondary}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "12px 32px"
    height: "44px"
    borderColor: "{colors.ink-muted}"
  brand-logo-grid:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    padding: "60px 20px"
  loyalty-lockup:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    padding: "0px 0px 55px"
  error-panel:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: "67px 20px"
    borderColor: "{colors.secondary}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    padding: "11px 0px"
---

## Overview

Hilton's brand system is anchored by a two-blue chromatic architecture that no other major hotel chain replicates at this level of precision. **Navy-Owns, Sky-Activates.** Royal navy (#104c97) claims the brand-identity role — CTA button fills, the nav surface on authenticated pages, the parent wordmark. Sky blue (#00a8e1) claims the interactive-accent role — display headings, link text, focus indicators. The split is not decorative; it maps semantic territory: one blue for "this is Hilton," another for "this is where you go next."

The structural chrome is near-monochromatic. Two grays — dark (#222222) and mid (#666666) — handle ink, muted text, and hairlines on a white canvas. Color appears only in the two blues and in the 18 sub-brand logos that crowd the portfolio footer. Competitors like Marriott use a single red across both brand and interactive roles; IHG uses a deep teal; Hilton's disciplined two-blue separation is the most architecturally considered color system in the major hotel groups.

Loew Black runs all display headings in uppercase with tight leading (-0.48px tracking, 48px line-height on 48px type) — a unity-leading approach that packs letters into dense typographic blocks. Loew Bold handles body and UI copy at 16px across three distinct leading values depending on context. Arial and Helvetica serve as the structural fallback and the fine-print caption tier.

**Key Characteristics:**
- Two-blue system: royal navy (`{colors.primary}`) for brand identity, sky blue (`{colors.secondary}`) for interactive accents — the most architecturally precise color split in major hotel brands.
- Loew Black in uppercase at 48px with unity leading (−0.48px tracking) — a dense, authoritative display treatment.
- Near-monochromatic gray chrome: two grays (dark ink and mid-gray) on white canvas; all color is in the two brand blues.
- Single dominant radius: 5px, across all interactive surfaces — the exact midpoint between luxury-conservative (3px) and consumer-app (8–12px).
- 18 sub-brand portfolio logos in the footer, each in its own chromatic identity, unified by scale and centered grid positioning under the parent Hilton wordmark.
- Hilton Honors loyalty lockup as a distinct visual element — centered below the sub-brand grid, above the global footer links.
- The error page is brand-true: self-aware copy, sky-blue outlined panel, Loew Black heading — even the 404 surface delivers the full identity.

## Colors

### Brand

- **Royal Navy** (`{colors.primary}` — #104c97): frequency 2. Used as background only — the primary CTA button fill. The brand ownership color; wired as the button background in the component extraction. Low frequency reflects the error-page context; on the full homepage the navy appears in the nav and hero band at significantly higher frequency.
- **Sky Blue** (`{colors.secondary}` — #00a8e1): frequency 6. Used as text (3) and border (3) — the hero heading color, link text, and the error-panel border outline. The interactive-state and accent color. Its lighter luminosity (L 0.69 in OKLCH) relative to navy (L 0.43) is what makes it work as a heading color on white canvas at WCAG contrast.

### Structure

- **Near-Black Ink** (`{colors.ink}` — #222222): frequency 151. Used as text (76) and border (75). The dominant body text and border color across the entire page. Includes a merged near-black cluster — the darkest non-black ink tone in the extraction.
- **Mid Gray** (`{colors.ink-muted}` — #666666): frequency 187. Used as text (104) and border (83). The dominant hairline and secondary text color. At frequency 187, it is the most-used color on the captured page — a reflection of the many fine-print footer links and dividers.

### Canvas

- **White** (`{colors.canvas}` — #ffffff): frequency 3. Used as text (1), background (1), border (1). The page canvas, card surface, and button-text color on the navy CTA. Low frequency reflects the single-page error state.

## Typography

### Font Families

The system runs three Loew variants and the system sans fallback:

**Loew Black** — the display heading face. Used in uppercase at 48px with -0.48px tracking and unity leading. The condensed-feeling authority comes from the Black weight and uppercase treatment rather than an actual condensed typeface.

**Loew Bold** — the primary UI font. Used for nav links, CTA button labels, body paragraphs, and sub-headings at 16px. Three distinct line-height variants: 16px (nav/button, tight), 19px (heading-md), 24px (body-lg).

**Loew Regular** — body text at 16px / 21.33px line-height. The reading-weight variant for longer passages.

**Arial / Helvetica** — fine-print captions at 10px and the system fallback across all tiers. Used heavily across the 41 captured fine-print elements in the footer utility zone.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 48px | 400 (Black) | 48px | Display heading, uppercase, −0.48px tracking — "SOMETHING WENT WRONG" |
| `{typography.heading-lg}` | 24px | 400 (Bold) | 32px | Section headings |
| `{typography.heading-md}` | 16px | 400 (Bold) | 19px | UI sub-headings, uppercase, −0.4px tracking |
| `{typography.body-lg}` | 16px | 400 (Bold) | 24px | Primary body paragraphs |
| `{typography.body-md}` | 16px | 400 (Regular) | 21px | Secondary body text, reading-weight |
| `{typography.nav-link}` | 16px | 400 (Bold) | 16px | Navigation links — tight unity leading |
| `{typography.caption}` | 10px | 400 (Arial) | 14px | Fine-print footer links, global site listings |
| `{typography.button-md}` | 16px | 400 (Bold) | 19px | CTA button label, uppercase, −0.4px tracking |

### Principles

Loew uses weight-as-role rather than weight-as-emphasis. Loew Black means "display heading" — it does not appear at small sizes. Loew Bold covers everything from nav links through button labels and body paragraphs — the entire interactive and UI tier. Loew Regular handles reading-weight body only. This three-weight-three-role system is direct to implement: if it is an interactive element or a heading, it is Bold; if it is body prose, it is Regular; if it is a display moment, it is Black.

All display headings use uppercase — not a `font-variant-caps` CSS trick but authored uppercase or `text-transform: uppercase`. The heading-md and button tiers add -0.4px tracking; the display-xl tier adds -0.48px tracking. Negative tracking at Loew's geometric proportions tightens the uppercase text blocks to a newspaper-header density.

### Note on Font Substitutes

Loew is commercially licensed from Rene Bieder. For React implementations, **Montserrat** at Black weight replicates the geometric uppercase authority for the display tier; Montserrat SemiBold or Bold works for the UI tier. **Nunito Sans** is a softer alternative. For the caption/fallback tier, the Arial system stack is already what Hilton ships — no substitution needed.

## Layout

### Spacing System

- **Base unit:** 6px, with 10px, 12px, and 32px as the dominant modules.
- **Tokens:** `{spacing.xs}` 5px · `{spacing.sm}` 6px · `{spacing.md}` 10px · `{spacing.base}` 12px · `{spacing.lg}` 20px · `{spacing.xl}` 32px · `{spacing.2xl}` 55px · `{spacing.3xl}` 60px · `{spacing.4xl}` 67px.
- **Error panel top padding:** 67px — a generous breathing zone above the centered error content.
- **Footer dense row:** 6px internal spacing on the fine-print link rows (41 instances at `1px 6px 0px 0px` compound spacing).
- **Loyalty lockup bottom:** 55px below the Hilton Honors mark before the footer utility row.

### Grid & Container

- **Max content width:** ~1200px on the main content panel; the nav and footer span full width.
- **Error panel:** centered white panel with sky-blue 1px border outline, 67px top / 20px horizontal padding, max-width ~1000px — substantial breathing room communicating that this is temporary and recoverable.
- **Sub-brand grid:** centered multi-row grid of 18 portfolio brand logos, roughly 6–7 per row, each at equal height. No background color shift — white canvas throughout.
- **Navigation:** royal navy background, Hilton wordmark left, nav links center/right, 48px height.

### Rhythm

The page architecture is **sparse-centered**: the error panel sits in a white field with significant vertical space above and below; the sub-brand logo grid fills the lower half with horizontal density; the footer utility row closes the page. The rhythm is generous at the content level and dense only at the fine-print tier. This sparse centering is appropriate for an error page but also reflects the Hilton homepage's tendency toward wide margins and centered booking panels.

## Elevation

The captured surface is predominantly flat. The only elevation signal is the sky-blue border that outlines the error panel — a 1px chromatic border rather than a shadow. The white-on-white canvas relies on border contrast rather than shadow depth, consistent with the minimal structural palette.

- **Flat (no shadow):** primary content, footer, nav — the full-page baseline.
- **Chromatic outline:** the error panel uses a `{colors.secondary}` sky-blue 1px border — the only chromatic surface marker.
- **Button depth:** the royal navy button reads as elevated by color contrast against the white canvas, not by shadow.

## Shapes

The radius scale is **minimal-singular**: one dominant radius for everything interactive, nothing larger.

- `{rounded.none}` 0px — the error-panel border container, page-level structural bands, nav and footer.
- `{rounded.sm}` 5px — the primary button, inputs, and all interactive surface elements. The single radius in the interactive layer.
- `{rounded.full}` 9999px — pill variant for badge or chip elements not directly captured in the extraction.

The 5px radius is the defining proportional choice: precise enough to read as intentional (not a browser default), conservative enough to sit inside the formal hospitality register, approachable enough for a booking interface that needs to convert users under time pressure.

## Components

**`button-primary`** — Royal navy `{colors.primary}` fill, white text in uppercase Loew Bold with −0.4px tracking, `{rounded.sm}` 5px radius, 11px vertical padding, 41px height. "Go Back" is the canonical extracted instance; on the full homepage, "Find a Room" or "Book Now" are the standard instances.

**`button-secondary`** — White fill, royal navy text and border, same sizing. Used for alternative actions when a secondary CTA is needed alongside the primary.

**`top-nav`** — Royal navy `{colors.primary}` background, white link text at `{typography.nav-link}`, 32px horizontal padding, 48px height. The nav is the primary brand-color surface on the page.

**`nav-link`** — Transparent background, white Loew Bold text, 10px horizontal padding. On the full homepage, nav links include "Find a Hotel," "Hilton Honors," "Sign In" with the latter two styled distinctly.

**`hero-heading`** — Sky blue `{colors.secondary}` text, `{typography.display-xl}` (48px / Loew Black / uppercase / −0.48px tracking / 48px line-height). The display heading color is sky blue rather than navy — the interactive accent carries the headline on the captured error surface; on the full homepage, headings over photography are typically white.

**`body-paragraph`** — Ink `{colors.ink}` text, `{typography.body-lg}` (16px / Loew Bold / 24px line-height). Standard body text — notably using Loew Bold rather than Loew Regular for the primary reading weight.

**`body-paragraph-muted`** — Muted ink `{colors.ink-muted}` text, `{typography.body-md}` (16px / Loew Regular / 21px line-height). Secondary text tier and reading-weight body copy.

**`card`** — White fill, ink text, `{rounded.sm}` 5px radius, 32px padding, sky-blue border. The error panel is a direct instance of this card archetype. On the full homepage, booking search cards use the same white surface with hairline borders.

**`text-input`** — White fill, ink text at `{typography.body-md}`, `{rounded.sm}` 5px radius, mid-gray border, 12x32 padding, 44px height. The standard date, destination, and guest-count input on the booking search form.

**`brand-logo-grid`** — White canvas, 60px vertical padding, centered multi-column layout of 18 sub-brand logos at equal heights in their own chromatic identities. No background shift — the logos float on white.

**`loyalty-lockup`** — The Hilton Honors mark centered below the sub-brand grid, 55px bottom clearance before the footer utility row. Rendered as an image lockup rather than a typographic element.

**`error-panel`** — White fill, ink body text, sky-blue 1px border outline (`{colors.secondary}`), 0px radius on the container itself (the border forms a sharp-cornered frame), 67px top padding. The structural template for all full-page status messages.

**`footer`** — White canvas, mid-gray text at `{typography.caption}` (10px), 11px vertical padding on the utility row. The densest typographic surface: global site link lists, legal text, phone numbers, accessibility links.

## Do's and Don'ts

**Do** keep royal navy (`{colors.primary}`) as the exclusive CTA button color. The two-blue system only holds if navy never appears as text or an accent color — it is background-only for interactive fills. Sky blue (`{colors.secondary}`) owns the text and accent role; using navy for link text would collapse the semantic split.

**Do** run display headings in Loew Black at uppercase with -0.48px tracking. The combination of Black weight, uppercase treatment, and negative tracking is what produces the dense editorial authority at 48px. Switching to Loew Bold or removing the uppercase treatment reduces the visual weight significantly.

**Do** render the sub-brand portfolio at equal heights in a centered grid. The 18 logos span enormously different aspect ratios — from the wide "Hilton Grand Vacations" lockup to the tall "Waldorf Astoria" emblem. Equal-height constraint (not equal-width) is the unifying principle that makes the grid read as a family.

**Do** preserve the 5px border radius across all interactive elements. Unlike Emirates (3px) or Airbnb (8–16px), Hilton's 5px is a deliberate midpoint; rounding inputs or buttons to 8px would shift the register toward consumer-casual, while dropping to 3px would read as legacy-enterprise.

**Don't** use sky blue (`{colors.secondary}`) for CTA buttons. The two-blue system assigns sky blue to heading accents, link text, and interactive outlines — not to action fills. A sky-blue CTA button would conflict with the royal navy primary and undermine the semantic distinction between "brand color" and "interaction color."

**Don't** mix Loew Regular and Loew Bold at the same text level. The Bold/Regular distinction maps to interactive-vs-reading: Loew Bold for nav, buttons, and primary body; Loew Regular for secondary reading text. Mixing them within the same typographic tier produces inconsistent weight rhythm.

**Don't** add additional brand colors for section differentiation. The mid-gray and dark-ink structural palette is deliberately restrained; using a warm gray, a tinted surface, or a decorative color to separate page sections would introduce a third chromatic voice that conflicts with the two-blue system.

**Don't** center-align body text inside content panels. The error-panel copy ("Maybe it's us, maybe it's you") is center-aligned — a layout appropriate for status messages and error states. Body text in the booking flow and marketing content sections should be left-aligned; center alignment at scale undermines readability.

## Known Gaps

- **Homepage extraction:** the token capture targeted the public-facing homepage but received a redirect to an error page — the homepage's full marketing surface (hero photography, search bar, destination cards, deals modules, Honors signup flow) is not represented in the extraction data.
- **Authenticated surfaces:** the Hilton Honors dashboard, booking management, and loyalty-tier status pages use a richer token set including tier-specific gold and platinum accents.
- **Sub-brand design systems:** each of the 18 portfolio brands (Waldorf Astoria, Conrad, Canopy, etc.) has its own design system with distinct color, typography, and radius scales. None are captured here.
- **Hover and focus states:** the captured surface is resting state only; focus rings, button hover shifts, and input validation states are defined in the broader system but not represented.
- **Mobile layout:** the nav collapses, the sub-brand grid reflows, and the error-panel container adjusts to single-column at mobile widths — those responsive breakpoints are not captured.
- **Dark mode:** no dark-mode alternative is visible on the public-facing surface; navy-on-white is the sole theme.