A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
23tokens
14type steps
4radius steps
9pxspacing base
Skyscanner, in one page
Skyscanner's iOS app is a calm, white, decision-making instrument. It is not a lifestyle travel app full of wanderlust photography — it is a price-comparison engine, and the entire visual language is engineered to make a confident "is this a good deal?" judgment in under three seconds. The canvas is pure white (#FFFFFF) with a single, unmistakable brand color — Skyscanner Sky Blue (#0770E3) — carrying every primary action: the Search button, the active trip-type segment, selected calendar dates, and the focused input ring. There is no secondary accent competing for attention. The blue *is* the call to action, everywhere, every time.
The signature moment is the price-as-color system. Skyscanner's core insight is that a number alone ("£148") doesn't tell you if it's good — so the app paints prices with a traffic-light scale: green (#00A698) for cheap, amber (#FFB81C) for average, red (#E5392E) for expensive. This shows up in the month price grid (a calendar where every day is tinted by how its fare compares), the price-trend bar chart, the "Cheapest"/"Best"/"Fastest" result tabs, and the Everywhere map (where destinations are labeled with color-coded fares). Once you've seen the green-amber-red language, you read Skyscanner fares the way you read a thermometer.
The other signature is "Everywhere" as a destination. Most flight apps require you to know where you're going. Skyscanner's most-loved feature lets you set the destination to a literal place called "Everywhere" and the app returns a ranked list of the cheapest countries and cities to fly to. This reframes the whole product from "book the flight I want" to "find the trip I can afford" — and the UI treats Everywhere as a first-class search target with its own globe iconography and exploratory result layout.
The structure is a stacked search card (From / To / Dates, with a circular swap button straddling the From–To divider), a prominent blue Search flights button, and below it a results list of flight rows — each row a horizontal timeline: departure time + airport on the left, a thin line with a dot and a "Direct" / "1 stop" label in the middle, arrival time + airport, and a bold fare on the right. Carrier logos are small and monochrome-friendly; the app never lets airline branding overwhelm its own neutral chrome.
Typography is Skyscanner Relative (the brand's custom humanist sans by Dalton Maag), falling back to SF Pro / Inter on iOS where the custom face isn't bundled. It is friendly but information-dense: fares and times are heavy (700–800), supporting metadata is light (400) and gray. The type system never gets decorative — this is a tool, and the type works like instrument labeling.
Key Characteristics:
- Pure white canvas (
#FFFFFF) light / cool navy-black (#0B0F14) dark — neutral, tool-like, never photo-driven - Single brand accent: Sky Blue
#0770E3carries 100% of primary actions - Traffic-light price system — green
#00A698cheap / amber#FFB81Caverage / red#E5392Eexpensive — the core mental model - Month price grid — a calendar where every day is tinted by fare vs. typical price
- "Everywhere" as a first-class destination — find the cheapest place to fly, not just a known route
- Stacked search card — From / To / Dates with a circular swap button on the From–To divider
- Best / Cheapest / Fastest result tabs — Skyscanner's signature sort triad
- Flight result row — horizontal timeline (time → line+dot+stops → time → bold fare)
- Price alerts — track a route and get pinged when the fare drops
- Skyscanner Relative typeface — friendly humanist sans, instrument-grade hierarchy
- Bottom tab bar: Explore / Trips / Saved / Profile
Do's and don'ts
Do
- Use pure white (
#FFFFFF) light / cool navy-black (#0B0F14) dark — neutral, tool-like - Make Sky Blue (
#0770E3) the single primary-action color — one blue action per screen - Always color prices with the traffic-light scale (green
#00A698/ amber#FFB81C/ red#E5392E) - Render the month price grid with per-day fare color — never a plain calendar
- Treat "Everywhere" as a real, selectable destination with globe iconography
- Use the stacked search card with the circular swap button on the From–To divider
- Offer Best / Cheapest / Fastest as the result sort triad (Best = default)
- Use tabular figures for every fare, time, and calendar price
- Keep the traffic-light hues identical between light and dark — price meaning is theme-invariant
- Give the Search button the only persistent (blue-tinted) shadow
- Surface "Set price alert" prominently — tracking is a signature Skyscanner behavior
Don't
- Don't use travel/destination photography as primary chrome — Skyscanner is a tool, not a magazine
- Don't introduce a second accent color — the blue does all primary work
- Don't show fares as plain black text without traffic-light color in calendars/charts
- Don't render a normal date picker where a price calendar belongs
- Don't shift the green/amber/red hues for dark mode — they must mean the same thing
- Don't put two primary (filled-blue) buttons on the same screen
- Don't use pure black (
#000000) for dark canvas — it's cool navy-black#0B0F14 - Don't let airline branding/logos overpower Skyscanner's neutral chrome — keep them small and monochrome-tolerant
- Don't animate fares jumping abruptly — color-crossfade price changes (150ms)
- Don't bury the swap button — it lives on the From–To divider as a circular control
- Don't hide "Everywhere" — it is the product's most-loved differentiator
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Skyscanner design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Sky Blue: #0770e3
- Sky Blue Pressed: #0a5bba
- Sky Bright: #05a8fa
- Deep Navy: #05203c
- Canvas White: #ffffff
- Surface Gray: #f5f7fa
- Surface Pressed: #e9edf2
- Divider: #e2e7ec
- Focus Ring: #0770e3
- Dark Canvas: #0b0f14
Type:
- families: Skyscanner Relative, Inter, Numerics, Relative
- scale: 8, 10, 11, 12, 13, 14, 15, 16, 17
- weights: 400, 600, 700, 800
Shape:
- radius: 6, 12, 14, 16
- elevation: Shadow: `0 8px 18px -8px rgba(7,112,227,0.7)` light / none dark | Give the Search button the only persistent (blue-tinted) shadow
Spacing: 9, 12, 14, 16
Rules:
- Use pure white (`#FFFFFF`) light / cool navy-black (`#0B0F14`) dark — neutral, tool-like
- Make Sky Blue (`#0770E3`) the single primary-action color — one blue action per screen
- Always color prices with the traffic-light scale (green `#00A698` / amber `#FFB81C` / red `#E5392E`)
- Render the month price grid with per-day fare color — never a plain calendar
- Treat "Everywhere" as a real, selectable destination with globe iconography
- Use the stacked search card with the circular swap button on the From–To divider
Avoid:
- Don't use travel/destination photography as primary chrome — Skyscanner is a tool, not a magazine
- Don't introduce a second accent color — the blue does all primary work
- Don't show fares as plain black text without traffic-light color in calendars/charts
- Don't render a normal date picker where a price calendar belongs
- Don't shift the green/amber/red hues for dark mode — they must mean the same thing
- Don't put two primary (filled-blue) buttons on the same screen
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Sky Blue (
#0770E3): The brand color and the single primary-action color — Search button, active segment, selected dates, focused input, links, primary CTAs. - Sky Blue Pressed (
#0A5BBA): Pressed/active state of the primary button. - Sky Bright (
#05A8FA): Dark-mode link & "Everywhere" accent — a lighter blue that holds contrast on the dark canvas. - Deep Navy (
#05203C): Skyscanner's deep brand navy — used for high-contrast headers, splash, and selected-state backgrounds in some surfaces.
Price Traffic-Light System (Theme-Invariant)
These three colors are the core of Skyscanner's identity and do not shift hue between light and dark.
| Role | Color | Meaning | Tint (bg use) |
|---|---|---|---|
| Price Low | #00A698 | Cheap / good deal | rgba(0,166,152,0.16) |
| Price Average | #FFB81C | Typical fare | rgba(255,184,28,0.16) |
| Price High | #E5392E | Expensive / avoid | rgba(229,57,46,0.16) |
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas. - Surface Gray (
#F5F7FA): Search card fill, grouped sections, inactive segments. - Surface Pressed (
#E9EDF2): Pressed rows, selected list items. - Divider (
#E2E7EC): Hairline dividers inside the search card and between result rows. - Focus Ring (
#0770E333): 20% Sky Blue ring on focused inputs.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#0B0F14): Primary dark canvas — a cool navy-black, NOT pure black. - Dark Surface 1 (
#141A22): Search card, elevated surfaces. - Dark Surface 2 (
#1C242E): Result rows, hovered/selected cards. - Dark Divider (
#25303C): Hairline dividers on dark.
Text
- Text Primary Light (
#0E1B2C): Primary text — fares, times, titles — a near-navy black. - Text Secondary Light (
#5C6B7A): Metadata, airport codes, sort captions. - Text Tertiary Light (
#8B97A3): Disabled, placeholder, very low emphasis. - Text Primary Dark (
#E8EDF2): Primary text on dark. - Text Secondary Dark (
#9AA7B4): Secondary on dark. - Text Tertiary Dark (
#66727E): Tertiary on dark.
Page / Surface Tints
| Role | Light Mode | Dark Mode |
|---|---|---|
| Canvas | #FFFFFF | #0B0F14 |
| Surface 1 | #F5F7FA | #141A22 |
| Surface 2 | #E9EDF2 | #1C242E |
| Divider | #E2E7EC | #25303C |
| Sky Blue tint | #0770E314 | #0770E329 |
| Low (green) tint | #00A6981F | #00A6982E |
| Average (amber) tint | #FFB81C1F | #FFB81C2E |
| High (red) tint | #E5392E1F | #E5392E2E |
Semantic
- Error Red (
#E5392E): Form errors, no-results state — shares the "expensive" red intentionally. - Success Green (
#00A698): Price-drop confirmation, saved-alert toast — shares the "cheap" green. - Warning Amber (
#FFB81C): Fare-change warnings, "price went up since you last looked". - Info Blue (
#0770E3): Informational banners, "prices update every few minutes".
Type scaleRead the full spec
Font Family
- Primary:
Skyscanner Relative(by Dalton Maag for Skyscanner) — a friendly, slightly humanist grotesque designed for dense travel data and global script coverage. - iOS Fallback:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif - Web/Catalog Substitute:
Inter— closest free face matching Relative's x-height and humanist proportions. - Numerics: Tabular figures enabled for all fares, times, and the price calendar so columns align.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Relative | 32pt | 800 | 1.15 | -0.5pt | "Explore everywhere" hero |
| Screen Title | Relative | 26pt | 700 | 1.2 | -0.3pt | "London → Barcelona" results header |
| Section | Relative | 22pt | 700 | 1.25 | -0.2pt | "Cheapest month", "Price trend" |
| Card Title | Relative | 18pt | 700 | 1.3 | -0.1pt | Flight duration "Direct · 2h 15m" |
| Fare (Large) | Relative | 19pt | 800 | 1.2 | -0.2pt | Result-row price, tabular |
| Body | Relative | 16pt | 400 | 1.45 | 0pt | Descriptions, fare-rule text |
| Price (Inline) | Relative | 15pt | 600 | 1.3 | 0pt | "from £42 return", tabular |
| Time (Result) | Relative | 17pt | 700 | 1.2 | 0pt | Departure/arrival times, tabular |
| Meta | Relative | 14pt | 400 | 1.4 | 0pt | "3 results · sorted by Best" |
| Airport Code | Relative | 12pt | 600 | 1.3 | 0.4pt | "LHR", "BCN" — uppercase |
| Field Label | Relative | 12pt | 600 | 1.3 | 0.2pt | "DEPART · RETURN" — uppercase, tertiary |
| Button | Relative | 16pt | 700 | 1.0 | 0pt | Primary/secondary buttons |
| Chip | Relative | 13pt | 700 | 1.0 | 0pt | Price hint chips, filter chips |
| Tab Label | Relative | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Calendar Day | Relative | 11pt | 700 | 1.0 | 0pt | Day number in price grid, tabular |
| Calendar Price | Relative | 8pt | 600 | 1.0 | 0pt | Tiny fare under day number |
Principles
- Numbers are the hero: fares, times, and dates are the heaviest type on screen (700–800); everything supporting is 400 gray.
- Tabular figures everywhere money or time appears: the price calendar, result list, and trend chart all need vertical digit alignment.
- Uppercase only for codes & labels: airport codes and field labels are uppercase with positive tracking; nothing else is.
- Instrument-grade restraint: no italics, no decorative weights — type is labeling for a tool.
- Dynamic Type first-class: titles, body, fares scale; tab labels, airport codes, and calendar micro-prices stay fixed (layout-sensitive grid).
Components and layoutRead the full spec
Buttons
Primary Button (Search flights / Continue)
- Shape: Rounded rectangle, 12pt corner radius
- Background:
#0770E3(Sky Blue) - Text:
#FFFFFF, Relative 16pt weight 700 - Height: 50pt; full-width minus 18pt insets
- Padding: 14pt vertical, 28pt horizontal
- Shadow:
0 8px 18px -8px rgba(7,112,227,0.7)light / none dark - Pressed: background
#0A5BBA+ scale 0.98
Secondary / Outline Button (Set price alert)
- Background: transparent
- Text & border:
#0770E3, 1.5pt border - Corner radius: 12pt
- Padding: 12pt vertical, 20pt horizontal
- Font: Relative 14pt weight 700
- Pressed: background
#0770E314
Pill Button (Filters / Sort)
- Background:
#F5F7FAlight /#1C242Edark - Border: 1pt
#E2E7EC/#25303C - Text:
#0E1B2C/#E8EDF2, Relative 13pt weight 600 - Corner radius: 500pt (full pill)
- Padding: 9pt vertical, 16pt horizontal
Text Button (View 64 deals)
- Font: Relative 14pt weight 600
- Color:
#0770E3light /#05A8FAdark - No underline
- Pressed: 60% opacity
Cards & Containers
Search Card (the stacked From/To/Dates input)
- Background:
#FFFFFFwith 1pt#E2E7ECborder light /#141A22with 1pt#25303Cborder dark - Corner radius: 16pt,
overflow: hidden - Internal field: 14pt vertical / 16pt horizontal padding, 1pt bottom divider between fields (none on last)
- Leading icon: 18pt Sky Blue stroke icon
- Field label: 12pt 600 uppercase tertiary; value: 15pt 600 primary
- Swap button: 30pt circle, 1pt divider border, straddling the From–To divider line, vertically centered on it
Flight Result Row
- Background:
#F5F7FAlight /#1C242Edark - Border: 1pt divider
- Corner radius: 14pt
- Padding: 16pt
- Layout (horizontal): [time 17pt700 + airport 12pt600] → [duration 11pt tertiary, 1pt line with trailing dot, "Direct"/"1 stop" 10pt green/amber] → [time + airport] → [fare 19pt800 + "return" 11pt]
- Carrier logo: 20pt, rendered grayscale-tolerant
Price Calendar Day Cell
- Square aspect, 7pt corner radius
- Background:
#F5F7FAlight /#141A22dark (1pt divider border) - Content: day number 11pt 700 primary, micro-fare 8pt 600 colored by traffic-light
- Selected: background
#0770E3, all text white - Out-of-month: 35% opacity
- Cheapest day in view: green fare + subtle green ring
Section Container
- Background:
#FFFFFF/#0B0F14(flush, no card) OR grouped#F5F7FA/#141A22 - 16pt horizontal page inset
- Section header: 22pt 700, 16pt top margin
Navigation
Top App Bar
- Height: 44pt + safe area
- Leading: Skyscanner wordmark ("sky" primary + "scanner" Sky Blue) on home; back chevron on detail
- Trailing: circular avatar (gradient
#0770E3→#05A8FA) or filter icon - Background: canvas, no border on scroll-top; 0.5pt divider once scrolled
Trip-Type Segmented Control
- Three segments: Return / One way / Multi-city
- Inactive:
#F5F7FAfill,#5C6B7Atext, 1pt divider border, 8pt radius - Active:
#0770E3fill, white text - 12pt font weight 600, 8pt vertical padding
Bottom Tab Bar
- Height: 64pt + safe area
- Background:
#FFFFFF/rgba(11,15,20,0.94)withbackdrop-filter: blur(20px)and 0.5pt top divider - Tabs (4): Explore / Trips / Saved / Profile
- Icon: 22pt; active
#0770E3(filled), inactive#8B97A3/#66727E - Label: Relative 10pt weight 600, always shown
- No pill indicator — active is color + icon-fill change only
Input Fields
Search Field (inside search card)
- See Search Card above — borderless rows separated by dividers, leading Sky Blue icon
Standalone Text Input
- Height: 50pt
- Background:
#F5F7FA/#1C242E - Border: 1pt
#E2E7EC/#25303C - Corner radius: 12pt
- Focus: 2pt
#0770E3border +#0770E333glow ring - Placeholder: 15pt 400 tertiary
Everywhere Affordance
- Inline pill/link below the To field: globe icon 14pt
#05A8FA+ "Explore Everywhere — find the cheapest destination" in 12pt 600 Sky Bright - Tapping sets destination to the literal "Everywhere" target
Distinctive Components
Month Price Grid
- A 7-column calendar; each day cell tinted by its fare vs. typical: green/amber/red micro-price
- Header: "Cheapest month — October"; sub: "Green is a good deal · prices per person"
- Selected date: full Sky Blue fill
- The single most recognizable Skyscanner surface — never render dates without price color
Best / Cheapest / Fastest Tabs
- A 3-segment toggle above the result list
- "Best" = Skyscanner's blended score (default), "Cheapest" = lowest fare, "Fastest" = shortest duration
- Active tab: 2pt
#0770E3underline +#0E1B2Ctext; inactive:#5C6B7A - Each tab can show its winning fare inline (e.g., "Cheapest £42")
Everywhere Result List
- When destination = Everywhere: a ranked list of countries/cities
- Row: destination name + small map thumbnail + "from £29" in green
- Tapping a country drills into its cheapest cities, then routes
Price Alert Toggle
- A bell + "Track prices" pill on a route
- On: Sky Blue fill, bell filled; sends push when fare drops
- Off: outline, gray bell
Price Hint Chip
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Calendar cells slightly tighter; search-card padding 14pt |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top app bar |
| iPhone 15/16 Pro Max | 430pt | Larger calendar cells; result rows show fuller route text |
| iPad (portrait) | 768pt | Search card centered max 560pt; results list single wide column |
| iPad (landscape) | 1024pt+ | Two-pane: search/filters left, results right; calendar shows 2 months |
Dynamic Type
- Display, screen title, body, fares: full scale
- Tab labels, airport codes, field labels, calendar day numbers and micro-prices: FIXED (price grid is layout-sensitive)
- Result-row times scale up to XL but the row reflows to keep fare right-aligned
Orientation
- All screens rotate
- iPad landscape adds the two-pane split (search ↔ results) and a dual-month calendar
- The price calendar reflows columns only on iPad; iPhone stays 7-wide
Touch Targets
- Search button: 50pt tall
- Calendar day cell: ≥ 38pt hit (visually square, padded to target)
- Swap button: 30pt visual, 44pt hit
- Tab bar icons: 22pt glyph, 44pt hit
- Best/Cheapest/Fastest tab: full segment, ≥ 44pt tall
Safe Area Handling
- Top: app bar respects safe area + Dynamic Island
- Bottom: tab bar + home indicator respected; sheets inset above home indicator
- Keyboard: autocomplete dropdown positions above keyboard; search card scrolls clear
- Sides: 18pt content inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-skyscanner {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0b0f14;
--heading-color: #0b0f14;
--link-color: #007e72;
--link-hover-color: #004b44;
--border-color: #d3d4d5;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(11,15,20,0.06);
--card-hover-shadow: 0 6px 18px rgba(11,15,20,0.12);
--header-bg: #0b0f14;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #606366;
--button-bg: #00a698;
--button-text-color: #000000;
--button-hover-bg: #007369;
--button-border: none;
--button-border-radius: 14px;
--button-secondary-bg: #f0f1f1;
--button-secondary-text-color: #0b0f14;
--button-secondary-hover-bg: #e2e2e3;
--button-secondary-border: 1px solid #d3d4d5;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0b0f14;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--card-border-radius: 14px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- sofi 77.8%
- sleep cycle 77.6%
- grammarly 76.8%
- plenty of fish 76.7%
- life360 76.4%
Where this came from
- Source document
ios/design-md/travel/skyscanner/DESIGN.md· 26.3 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.