What is Qantas' primary brand color?

Qantas' brand voltage is Qantas Red (#df0000), wired into the CSS as --color-alias-brand-primary and aliased to 30 component-level variables including --color-comp-web-button-primary-enabled-background, --color-comp-web-button-secondary-enabled-border, and --color-alias-interactive-link-enabled-foreground. It appears 85 times on the captured marketing page — 40 as text (inline links, price callouts), 5 as background (primary CTA fill, sale badge), and 40 as border (secondary button outlines, divider accents). The dominant ink tone by frequency is charcoal #323232 at 1052 occurrences; red annotates rather than fills.

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

Qantas runs Qantas Sans — a proprietary grotesk developed exclusively for the airline — across every tier of the marketing system. The weight stack is intentionally sparse: weight 300 for display (56px, 40px) and body paragraphs, weight 400 for default running text and labels, and weight 700 for buttons, nav links, and action labels. There is no weight 500 or 600 in the captured surface — the jump from 300 to 700 with nothing in between is the signature typographic move. Helvetica is the declared fallback. For open-source substitutes, Nunito Sans at weights 300/400/700 transfers the proportions reasonably; Figtree at the same weights captures the rounded-grotesk character more faithfully.

What is Qantas' corner-radius approach?

Qantas uses a binary radius language: 800px (effectively a maximum-value pill) for nav links, chip buttons, and loyalty tier badges, versus 8px for content cards, input fields, and interactive tiles. The 800px value appears 22 times in the extraction — almost always on the nav link component (captured at 40px height with 800px radius, rendering as a full pill). The 4px value appears once on a secondary chip surface. There is no 12/16/24px middle tier — the system is either form-precision (8px) or fully-rounded pill (800px). This binary approach makes the pill surfaces feel deliberate rather than decorated.

How does Qantas handle destination photography in its marketing system?

Destination photography is the primary visual medium on the Qantas marketing page — the hero band is a full-bleed photograph of Sydney Harbour, and the flight-deals section renders destination cities (Sydney, Melbourne, Perth) as photography cards with city name, 'from £X' price callout in Qantas Red, and a secondary link label. Photography carries no overlay gradient in the deal cards; the image bleeds to the card edge and the text sits below, not over the image. The 'Discover more' editorial section below the fold runs full-bleed photography tiles (kangaroo on red, Harbour Bridge at sunset) with white headline text overlay. Photography does the atmospheric work that color fills would do on a brand without strong destination imagery.

How does the Qantas Frequent Flyer tier palette work?

The Qantas Frequent Flyer (QFF) system exposes a dedicated color per tier, all wired as CSS custom properties. Bronze: #df0000 (shared with the brand primary, per --color-base-qff-status-bronze). Silver: #b2b2b2 (--color-base-qff-status-silver). Gold: #c3a56e (--color-base-qff-status-gold). Platinum: #323232 / --color-base-qff-status-platinum shares the charcoal ink. Platinum One: #0f2e4d dark navy (--color-base-navy-80). Chairman's Lounge: #191919 near-black (--color-base-neutral-90). The tier palette escalates from the open brand red through silver and gold metallics to near-black exclusivity — a coherent status ladder where color darkness signals tier elevation.

Qantas Design System

Qantas' marketing and booking design system as a DESIGN.md file.

About Qantas DESIGN.md

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

Travel & Hospitality

Qantas' marketing page resolves the airline design problem differently than its competitors. The page opens with a full-bleed photography hero for a Qantas Explorer promotion — red text on an aerial harbor shot — followed immediately by a booking search widget on a white canvas, then a section heading ("Flight deals") in 56px Qantas Sans at weight 300, and then a horizontal scroll of destination photography cards with price callouts. The visual hierarchy is: photography first, function second, brand color as annotation. Where British Airways uses Midnight Blue as architectural canvas and Virgin Atlantic uses dark purple as a dramatic hero fill, Qantas trusts the destination photography to carry emotional weight and reserves the red (#df0000) for text links, secondary-button outlines, and price highlights — never as a background canvas on the standard marketing page.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 17 color tokens drawn from the 81 clustered CSS custom properties on `:root` — organized into a Qantas Red brand tier (wired as `--color-alias-brand-primary` and 30 component-level aliases), a charcoal ink tier at #323232 carrying 1052 page occurrences, warm-grey surface tokens at #f3f2f1 and #e5e3e1, and the loyalty-tier palette (bronze, gold, platinum, Chairman's Lounge). Eleven typography tokens run Qantas Sans from 56px display at weight 300 to 14px captions at weight 400. Seven radius tokens establish the binary 800px pill / 8px card split. 17 component definitions cover the red-outlined secondary button, the pill-shaped nav link, the photography destination card, the booking search form, and the loyalty tier badge.

Feed this file to Claude or Cursor and it will reproduce Qantas' specific moves: charcoal-not-black ink throughout, photography-over-text composition for destination sections, Qantas Red as annotation color rather than canvas fill, three-weight typographic stack with a 300-to-700 jump, and the binary pill/card radius split. The system is worth studying for its restraint — 85 red occurrences against 1052 charcoal in a brand that is synonymous with its red color demonstrates that frequency is not how brand color signals identity.

What makes it distinct

Qantas Red as secondary-button voltage#df0000 wired as --color-alias-brand-primary outlines secondary buttons, underlines links, and fills the primary CTA; charcoal carries 1052 occurrences as the actual dominant tone
Qantas Sans at three weightsdisplay at 56px/weight 300, section heads at 40px/weight 300, and buttons/nav at weight 700; the gap between 300 and 700 with nothing in between is the system's typographic signature
Binary radius language800px pill on nav links and chips against 8px on cards and inputs; no 12/16/24px middle tier
Photography-first destination gridthe booking search widget sits above a 3-column destination photography card grid where the only text on images is price callouts in Qantas Red
Charcoal-not-black ink#323232 replaces pure black for all text and border rendering; the system has no pure #000000 text occurrences outside disabled-state overlays

Live at qantas.com

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

qantas.com

Explore Qantas

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.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Qantas design system FAQ

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

Qantas — official site

Qantas' public marketing and booking 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.