Why does Hilton use two different blues — navy and sky blue?

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.

What is the Loew typeface and what should I use as a substitute?

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.

How does Hilton's design system handle 18 sub-brands?

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.

What is Hilton's corner-radius philosophy?

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.

What does the error page reveal about Hilton's brand voice?

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.

Hilton Design System

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

About Hilton DESIGN.md

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

Travel & Hospitality

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.

What makes it distinct

Royal navy primary voltagethe deep navy CTA button is Hilton's only brand-color use on a predominantly gray-and-white system
Sky blue interactive accentthe 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 displayall 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 logosthe footer reveals Waldorf Astoria, Conrad, Canopy, DoubleTree, Embassy Suites, Hampton, Tru, Homewood Suites, and 10 others, each in its own chromatic identity
Error-page extractionthe 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

Live at hilton.com

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

hilton.com

Explore Hilton

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Hilton design system FAQ

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

Hilton — official site

Hilton'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.