What is Emirates' primary brand color and how is it used?

Emirates' brand voltage is a deep crimson (#d71921), appearing as the primary CTA button fill (the 'Continue' booking button), brand marks, and a handful of accent borders. With only 9 total occurrences in the captured page — 2 text, 4 background, 2 border, 1 shadow — it is one of the most restrained primary-button colors in the travel sector. A related red-brown terracotta (#af5541) appears 100 times across text and borders, carrying the warm red-family identity throughout the structural chrome. The CSS names the standard crimson as --red-color.

What typefaces does Emirates use, and what are suitable substitutes?

Emirates runs two proprietary families: Emirates-Bold for all display headings (18–50px at weight 400 and 700) and Helvetica Neue at weights 200, 300, 400, and 700 for all UI copy. The display headline captured in the hero uses a third face — Heroic-Medium, a condensed sans-serif at 120px with -5px tracking. For React implementations, Playfair Display at 700 or Freight Display are the closest substitutes for Emirates-Bold's editorial weight; for Helvetica Neue, the system sans stack at the same size/weight combinations is already very close. The Heroic-Medium hero slot can be approximated with a condensed-width variable font like Barlow Condensed at semibold.

How does Emirates achieve the compressed hero heading effect?

The hero heading runs at 120px font-size with a -5px letter-spacing (negative tracking) and a 110px line-height, creating a ratio of line-height below font-size — the text is tighter than default leading. The font family is Heroic-Medium with fallbacks to Arial Narrow Bold and Franklin Gothic Medium, both condensed-width faces. The text color is white on a full-bleed photography backdrop. The combination of very large size, negative tracking, below-unity leading, and a condensed fallback stack is what produces the magazine editorial feel. No text-transform is applied — the content itself ('A FREE DATE CHANGE') reads in all-caps but is authored uppercase in the HTML.

Why does Emirates use five gray tones with almost no color?

The near-monochromatic gray palette keeps the visual hierarchy unambiguous across a page that depends heavily on destination photography. The five structural grays — near-black (#000000, frequency 344), warm dark (#333333, 153), mid-gray (#666666, 120), silver (#a9a9a9, 230), and white (#ffffff, 128) — are enough to establish text/subtext/border/canvas hierarchy without competing with the photography or the single crimson CTA. This is an intentional luxury restraint strategy: brands like Bottega Veneta and Cartier use similar monochromatic chrome to keep color appearing only where it signals editorial intention.

Can I use this DESIGN.md to build a luxury travel site with React?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Emirates' specific moves: full-bleed hero photography with large display type at negative tracking, white editorial canvas below the fold, Emirates-Bold-equivalent headings over Helvetica Neue Light body, crimson for a single CTA voltage, and the 3px-dominant radius scale. Substitute Emirates-Bold with Playfair Display or a comparable editorial sans; substitute Heroic-Medium with Barlow Condensed SemiBold for the hero heading. The warm cream panel (#fef8d5) is the subtlest move to preserve — it appears just once per content block to break the gray monotony without introducing a second brand color.

Emirates Design System

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

About Emirates DESIGN.md

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

Travel & Hospitality

The Emirates homepage opens with an editorial impact that most airlines reserve for print campaigns. The hero is a full-bleed cabin photograph overlaid with white display type running at 120px and -5px letter-spacing — a condensed, magazine-style lock-up more common on luxury fashion sites than on booking engines. Below that single heroic typographic moment the page resolves into an orderly white canvas with Emirates-Bold headings at 24–50px, Helvetica Neue Light body copy at 14px, and a sparse palette of grays that lets the destination photography carry all the color. The contrast with a brand like Expedia (white utility grid) or Airbnb (warm photography-first) is deliberate: Emirates is performing a luxury editorial register above the booking mechanics.

The DESIGN.md file captures a two-font system anchored by Emirates-Bold — a proprietary typeface used exclusively for display headings and section titles — and Helvetica Neue across four weights (200, 300, 400, 700) for all UI copy. The brand-color system is almost monochromatic: five gray tones from near-black (#333333) to silver-gray (#a9a9a9) handle text and borders, with a terracotta red-brown (#af5541) appearing in the mid-frequency structural slots and the standard Emirates crimson (#d71921) used sparingly for the primary CTA button and brand marks. One warm cream panel (#fef8d5) appears as a single background accent per layout section — a quiet warmth move against the gray-dominant system. The radius scale is minimal: 3px dominates, with 8px on secondary surfaces.

Feed this file to an AI coding tool and it reproduces Emirates' specific moves: full-bleed hero photography with extreme display type overlay, white editorial canvas below the fold, two-font hierarchy with Emirates-Bold for headings and Helvetica Neue Light for body, crimson reserved as a single CTA voltage, and the minimal three-radius scale (3px, 8px, pill). The tension worth understanding before borrowing: the 120px/−5px hero heading at weight 400 reads as editorial restraint rather than typographic aggression. Heavy display weight would have looked mass-market; the combination of large size and light weight is the move.

What makes it distinct

Two-font editorial hierarchyEmirates-Bold for display headings, Helvetica Neue at weights 200/300/400/700 for all body, button, and UI copy
Crimson CTA voltagethe primary button fills a single deep red on a predominantly gray-and-white system, making booking actions immediately scannable
Negative-tracked display at 120pxthe hero heading compresses letterforms at -5px tracking for a condensed editorial impact rarely seen in airline marketing
Warm cream accenta single pale yellow-cream background panel appears once per section to break the white-gray monotony without introducing a second brand color
Monochrome structural palettefive gray tones from near-black to light-gray carry every text and border role; color appears only in CTAs and brand marks

Live at emirates.com

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

emirates.com

Explore Emirates

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.

Emirates design system FAQ

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

Emirates — official site

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