Qantas Design System

Overview

Qantas' digital surface is built on a paradox: the brand is synonymous with red, but the page is predominantly charcoal. Red as annotation: where Virgin Atlantic fills hero sections with deep purple canvas and Air New Zealand commits black and red as co-equal structural tones, Qantas treats Qantas Red (#df0000) as annotation — it underlines links, outlines secondary buttons, marks price callouts, and fills the primary CTA — while charcoal (#323232) at 1052 page occurrences carries the actual structural weight of text, borders, and hairlines. The 85 red occurrences against 1052 charcoal on a brand that names its airline after its color inverts every expectation about how a brand deploys its voltage color.

Photography does the emotional work that brand color fills would do on a less visually rich brand. The hero shows Sydney Harbour from the air on a Qantas Explorer campaign tile. Below that, a "Flight deals" section renders Melbourne, Sydney, and Perth as photography cards with city names and from-price callouts in red. The "Discover more" editorial band runs full-bleed kangaroo photography and Harbour Bridge sunset tiles. The red appears in the photography sections as text annotation on images — never as a background fill competing with the photography.

Typography runs Qantas Sans across every tier — a proprietary grotesk with a notably sparse weight stack: 300 for display and body-light, 400 for running text and labels, 700 for buttons and nav links. The weight-300 display at 56px gives the "Plan your trip" section heading a considered, lightweight openness; the weight-700 button labels ("Search flights," "Sign up") shift to assertive without an intermediate semibold tier. Light display, heavy action is the principle — the 300-to-700 gap with no weight in between is the sharpest typographic decision in the system.

Key Characteristics:

• Qantas Red (#df0000) at 85 occurrences — annotation voltage, not canvas fill; 40 as text, 40 as border, 5 as background.
• Charcoal ink (#323232) at 1052 occurrences — the dominant structural tone for all text, borders, and hairlines; the page reads charcoal-and-white, with red as highlight.
• Qantas Sans at three weights only: 300 (display, body-light), 400 (running text), 700 (buttons, nav); no 500 or 600 in the system.
• Binary radius — 800px pill for nav links and chips, 8px for cards and inputs; no middle tier.
• 70px tall booking search inputs — the date picker and airport-selector fields are unusually tall (70px) compared to the 44–48px standard; the height makes them tappable on mobile without explicit mobile handling.
• Photography-first editorial bands — destination content runs as photography cards with price annotations, not text-and-icon layouts.
• Teal focus ring (#237271) — the --color-alias-text-field-focused and --color-comp-web-text-field-focused-border use teal rather than the brand red for keyboard focus states.

Colors

Brand

• Qantas Red ({colors.primary} — #df0000): frequency 85. Used as text (40), border (40), background (5). Wired as --color-alias-brand-primary, --color-comp-web-button-primary-enabled-background, --color-comp-web-button-secondary-enabled-border. The brand voltage — 30 CSS component aliases, present in interactive surfaces across the system.
• Primary Hover ({colors.primary-hover} — #bc0b07): frequency 0 on base page; wired as --color-alias-interactive-primary-hover, --color-comp-web-button-primary-hover-background. A one-step darker red for hover and active states on the primary CTA.
• Primary Pressed ({colors.primary-pressed} — #99110b): frequency 0; wired as --color-alias-interactive-primary-pressed, --color-comp-web-button-primary-pressed-background. The deepest red for press confirmation.

Structural (Text / Border)

• Ink ({colors.ink} — #323232): frequency 1052. Used as text (526), border (522), background (4). The dominant structural tone — every heading, body paragraph, nav label, hairline rule, and input border is charcoal. Wired across 100+ CSS custom properties. Not black; the slight lift reduces contrast harshness against white at small text sizes.
• Ink Secondary ({colors.ink-secondary} — #666564): frequency 72. Used as text (36), border (36). The secondary text tone for body captions, overline labels, placeholder text, and muted button text. Wired as --color-alias-text-secondary, --color-comp-web-teaser-body-text.
• Ink Tertiary ({colors.ink-tertiary} — #7f7e7d): frequency 2. A lighter text muted for disabled labels and the --color-alias-icon-secondary context.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 60. The page floor — used as background across the booking form, content sections, and card surfaces. Wired as --color-alias-surface-background-primary, --color-alias-text-field-background-primary.
• Surface 1 ({colors.surface-1} — #f3f2f1): frequency 10. The warm-grey secondary surface for the booking search form background, input field fills, and secondary section backgrounds. Wired as --color-alias-surface-background-secondary, --background-grey.
• Surface 2 ({colors.surface-2} — #e5e3e1): frequency 12. A slightly darker warm grey for disabled states, hover backgrounds on tertiary buttons, and divider-subtle rules. Wired as --color-alias-surface-background-tertiary, --color-alias-border-subtle.

Hairline

• Hairline ({colors.hairline} — #cccac8): frequency 1. Border tone for card outlines, divider rules, and the inactive page-indicator dot. Wired as --color-alias-page-indicator-inactive, --color-alias-text-secondary-on-dark.

Interactive

• Focus ({colors.focus} — #237271): frequency 0 on resting state; wired as --color-alias-text-field-focused, --color-comp-web-text-field-focused-border. The teal focus ring — deliberately not the brand red, preventing focus rings from reading as error or brand states.

Loyalty Tiers

• Tier Bronze ({colors.tier-bronze} — #df0000): shares the brand primary; wired as --color-base-qff-status-bronze. Bronze tier is the entry level, using the open brand red.
• Tier Gold ({colors.tier-gold} — #c3a56e): frequency 0 in marketing chrome; wired as --color-base-qff-status-gold, --color-alias-tiers-qff-status-gold-primary. A warm amber-gold for the QFF Gold membership indicator.
• Tier Platinum One ({colors.tier-platinum-one} — #0f2e4d): frequency 0; wired as --color-base-navy-80. A deep navy for the Platinum One tier — the highest QFF status outside Chairman's Lounge.
• Tier Chairman's ({colors.tier-chairmans} — #191919): frequency 0; wired as --color-base-qff-status-chairmans-lounge. Near-black for Chairman's Lounge — the darkest, most exclusive tier color signal.

Semantic

• Error ({colors.error} — #bc0b07): wired as --color-alias-validation-error, --color-comp-web-text-field-error-border. A slightly darker red than the brand primary — distinct enough from #df0000 to read as a different semantic state.
• Success ({colors.success} — #208204): wired as --color-alias-validation-success, --color-alias-text-positive.

Typography

Font Family

The system runs Qantas Sans (declared as "Qantas Sans", Helvetica, sans-serif) across every tier without a secondary voice. No serif, no monospace, no secondary sans — one family does every typographic job from the 56px display heading to the 14px form label. The weight range is intentionally sparse: 300, 400, and 700 only — the intermediate semibold (500/600) tier is absent from the captured surfaces entirely.

Hierarchy

Principles

The weight-300 display at 56px is the most distinctive typographic decision in the system. Where most airline booking sites run section headings at weight 600–700 to assert authority, Qantas runs "Plan your trip" at weight 300 — the same weight as a light body paragraph at 6x the size. The openness of light-weight display at 56px creates a browsing-forward, unhurried character that contrasts with the transactional weight-700 buttons ("Search flights"). Light display, heavy action — the weight jump from 300 (heading) to 700 (button) with no intermediate tier is the typographic signature.

Font Substitutes

Qantas Sans is proprietary. Nunito Sans at weights 300/400/700 is the closest open-source substitute for the rounded-grotesk character; Figtree at the same weights captures the slightly warmer counter shapes more faithfully. For the display tier, either substitute must use the tight -0.5px tracking that the extracted samples show — without it, the 56px heading feels too open.

Layout

Spacing System

• Base unit: 8px — the dominant gap value at 65 occurrences in the extracted spacing.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 96px.
• Booking form: {spacing.3xl} (96px) internal section padding in the booking area; the search input fields are 70px tall — 26px taller than the booking-site category standard.
• Card internal padding: {spacing.lg} 24px for editorial tiles; destination photography cards run 0 internal padding (photography bleeds to edge, text sits below the image).

Grid and Container

• Max content width: ~1040px for the booking search widget; the flight-deals destination grid runs at full page width with 3 columns.
• Hero band: the promotional banner (Qantas Explorer, "Say G'day to more of Australia") runs full-bleed with photography on the right half and red text + CTA on the left half.
• Flight deals grid: 3-column horizontal scroll on desktop, showing destination photography cards with city name, "from £X" price callout, and a flight indicator.
• Discover more: 2-column editorial grid with full-bleed photography tiles, alternating text placement.

Rhythm

The page alternates between utility (white booking widget sections, form inputs) and editorial (full-bleed photography bands). The booking search widget and the flight-deals section are white-canvas functional zones. The Qantas Explorer hero band and the "Discover more" editorial band are photography-led atmospheric zones. The rhythm is: utility / photography / utility / photography, with the charcoal section headings acting as the only transitional typographic signal.

Elevation

The system uses minimal shadow. The extracted page has no significant box-shadow occurrences on the marketing surface. Elevation is created through surface-color contrast — white cards on the warm-grey surface-1 booking widget background, photography tiles that bleed to card edges with no border, and the charcoal footer on white. The booking search form inputs use a {colors.surface-1} fill rather than a white fill — the warm-grey inverts the card-on-canvas relationship: the input is darker than the page, not lighter. The teal focus border ({colors.focus}) on focused inputs is the most visually active elevation signal on the page.

Shapes

The radius language is binary — tight form controls versus generous pills:

• {rounded.none} 0px — section bands, footer, full-bleed photography tiles.
• {rounded.xs} 4px — secondary chip surfaces, the smallest interactive elements.
• {rounded.sm} 8px (46 occurrences — dominant) — cards, input fields, the booking search container. The workhorse radius.
• {rounded.md} 12px — 1 occurrence; a single transitional surface.
• {rounded.lg} 24px — 1 occurrence; large feature card variant.
• {rounded.pill} 800px (22 occurrences) — nav links, chip buttons, primary and secondary CTA buttons. The nav link component was captured at 40px height with 800px radius, rendering as a full pill.
• {rounded.full} 9999px — circular avatar badges, loyalty tier chip pills at 50% radius.

No 16px or 32px radius exists in the system. The binary structure is deliberate: utility surfaces are tight (8px), navigational and action surfaces are fully rounded (800px). The contrast between the form-precision of the booking input fields and the warmth of the pill nav links is the shape language's personality.

Components

button-primary — Qantas Red {colors.primary} fill, white text, weight-700 label, 800px pill radius, 12×24px padding, 48px height. The "Search flights" and "Sign up" CTAs are the canonical instances. Red fill on white is the only background application of the brand color.

button-primary-hover — Darkens to {colors.primary-hover} (#bc0b07) on hover — a visibly darker red confirming interactivity.

button-secondary — White {colors.canvas} fill with 1px Qantas Red border and red text, 800px pill radius. The "View all" and supplementary action buttons. The red border gives secondary buttons as much brand presence as the primary CTA — the two-button pairing appears frequently side by side.

button-supplementary — Transparent fill, red text, no border, 800px pill radius, 8×20px padding. The "Read more" and tertiary link-style actions.

top-nav — White {colors.canvas} surface, charcoal text, 56px height, 1px {colors.surface-2} bottom rule. Qantas wordmark (the flying kangaroo icon + logotype) at left; primary nav links center; search, login, and the "Book" red CTA pill at right.

nav-link — White background, charcoal {colors.ink} text at {typography.nav-link} 16px / 500, 800px pill radius, 8×16px padding captured from extraction. Hover state applies a {colors.surface-2} background fill — the pill shape makes the hover fill read as an enclosed zone rather than a boxy rectangle.

hero-heading — Charcoal ink {colors.ink} text, {typography.display-xl} 56px / 300, -0.5px tracking. The "Plan your trip" section heading — weight 300 at this size reads as considered, not timid.

section-heading — Same {typography.display-xl} token; applied to "Flight deals," "Discover more." Charcoal text throughout; the red never appears as a section heading color.

body-paragraph — Charcoal ink at {typography.body-lg} 18px / 400. The editorial body text for destination descriptions and promotional copy.

body-paragraph-muted — Secondary charcoal {colors.ink-secondary} (#666564) at {typography.body-md} for overline labels, teaser sub-text, and form hints.

card-destination — White {colors.canvas} fill, {rounded.sm} 8px radius, 0 internal padding (photography bleeds to edge). Used in the 3-column flight-deals grid. Photography occupies the upper 2/3 of the card; city name and price callout sit in a text zone below with 16×16px padding.

price-callout — Transparent background, Qantas Red {colors.primary} text at {typography.body-md}. The "from £107" and "from £199" price labels on destination cards. The red text is the primary brand signal on the photography grid.

text-input — {colors.surface-1} fill (warm grey), charcoal text, {rounded.sm} 8px radius, 0×24px padding (horizontal) with 48px icon indent on the left, 70px height. The booking search fields (Where from, Where to, Travel dates) use this unusually tall format.

text-input-focused — Same as text-input but {colors.focus} (#237271) teal border replaces the hairline. The teal focus ring distinguishes focus from error (red) and from the brand primary — a deliberate three-way color split for accessibility.

editorial-tile — {colors.surface-1} fill, {rounded.sm} 8px radius, 24px padding. The "Sign up: Take off £30" and "Fly non-stop to Australia" editorial cards in the "Discover more" section.

tier-badge — Gold {colors.tier-gold} fill, white text, {typography.label-md}, pill radius. The QFF Gold tier indicator. Bronze tier shares the brand red; Platinum One uses the deep navy.

footer — Charcoal ink {colors.ink} fill (not pure black), white text at {typography.body-sm}, 48×32px padding. The footer mirrors the nav in using charcoal as the dark structural tone — the deep-navy footer that most airline brands use appears here as charcoal.

Do's and Don'ts

Do keep Qantas Red as annotation and action color, not canvas fill. The system's defining move is 85 red occurrences against 1052 charcoal — the red reads as signal precisely because it is scarce. Filling section backgrounds, editorial tiles, or hero bands in red would collapse the signal-to-noise ratio.

Do use weight 300 for display headings at 40px and above. The 56px weight-300 section headings invert the expected airline display convention. Bumping to weight 400 or 500 at this size shifts from "considered" to "generic airline booking."

Do run booking form inputs at 70px height. The tall input fields are not a mistake — they are extracted from the live page (height: 70px on #departurePort-input). They create a generous, tap-friendly affordance that reads as high-spec against the 44px-standard inputs most booking sites use.

Do use the teal {colors.focus} (#237271) for focus rings rather than the brand red. The three-way color split — red for brand/interactive, teal for focus, dark-red #bc0b07 for error — keeps keyboard navigation visually distinct from brand and error states.

Don't add a weight-500 or weight-600 intermediate tier to the typography stack. The 300-to-700 jump is the system's signature; introducing a middle weight softens the contrast between the considered display tone and the assertive action label.

Don't use {colors.surface-1} (#f3f2f1) for text or border roles — it is a background-only token (10 occurrences, all background fills). For light borders use {colors.surface-2} (#e5e3e1) or {colors.hairline} (#cccac8).

Don't apply a 16px or 24px corner radius to the navigation pill surfaces. The nav link component runs at 800px radius — effectively maximum. Switching to a more conservative 16px or 24px radius would make the nav links read as pill-ish rather than fully pill, losing the binary contrast with the tight 8px card radius.

Don't use the loyalty tier colors ({colors.tier-gold}, {colors.tier-platinum-one}, {colors.tier-chairmans}) outside QFF loyalty contexts. The status escalation from red bronze to near-black Chairman's Lounge is a deliberate status signal; decorating marketing content with gold or navy tier tones dilutes the exclusivity reading.

Known Gaps

• Hero photography tokens: the full-bleed destination photography bands use specific photography art-direction guidelines (subject placement, color temperature, altitude framing for cities) that are not expressible as design tokens — the visual identity of photography selection is absent from this spec.
• Hover states: documented for {component.button-primary-hover} only; the secondary button hover, the nav-link pill hover fill, and the card hover state are wired in CSS but not represented as named components.
• Mobile booking form: at mobile widths the 3-column flight-deals grid collapses and the booking form tabs (Return / One-way / Multi-city) change layout; the responsive breakpoints are not captured.
• QFF tier full palette: Silver (#b2b2b2) and the Chairman's Lounge full visual system (including special check-in signage) are declared in CSS variables but not represented as components in this spec.
• Motion: the Qantas Explorer promotional banner uses an auto-playing carousel; the page-indicator dots (captured as --color-alias-page-indicator-active and --color-alias-page-indicator-inactive) imply slide animation that is not reflected in the static token spec.
• In-flight and product branding: Qantas' cabin interiors, Business Suite styling, and the Business Rewards sub-brand carry separate visual identities not captured on the public marketing page.