At a glance
Citymapper, in one page
Citymapper's iOS app is a transit nerd's instrument panel disguised as a friendly app. Its whole reason to exist is to answer "how do I get from here to there, right now, the smartest way?" — and the visual language is built around a single insight: every transport mode gets its own loud, consistent color, and a route is read as a colored strip. Open the app, type a destination, and you get a stack of route cards; each card shows a leg strip — a horizontal row of color-coded mode chips (a green walk pill → a blue tube badge → a red bus badge → a green walk pill) with little arrows between them. You don't read the words; you read the *colors and the ETA*. This mode-color system (walk green, bus red, tube/metro blue, rail purple, bike cyan, cab amber) is the brand. It is consistent across every city Citymapper supports, and it never changes between light and dark mode — a bus is always red.
The canvas is clean and near-neutral so the mode colors and the live map carry all the energy: white (#FFFFFF) in light, a deep blue-black (#0C0E14) in dark. Citymapper's own brand accent is an electric blue (#2B5BFF) used for the destination pin, primary links, the metro mode, and selected states. But the single most iconic control in the entire product is the GO button: a fat, friendly, rounded green (#00C281) pill with a play triangle and the word "GO", which launches GO trip mode — a live, step-by-step navigation experience that counts down to your next action ("Get off in 2 stops", "Walk 4 min to the platform", "Your bus is 1 min away") with big type, a progress line, and disruption alerts. The GO pill is shape- and color-locked: it looks the same on every screen, in every city, in every theme.
The structure is: an origin→destination card at the top (two dots — a gray "from" dot and a blue "to" dot — connected by a short line, exactly like a transit map), a list of route options ranked by Citymapper's blend of speed/cost/effort (tagged "Fastest", "Cheapest", "Easiest", "Rain-safe"), and the GO button. Tapping a route opens step-by-step, and starting it enters GO trip mode. Other signature surfaces: the departures board (a live list of next departures at a stop, each row a colored line badge + destination + minutes, with imminent departures in amber), the Nearby screen (stops around you with live arrivals), and disruption banners (orange) that surface line closures inline in route results.
Typography is a friendly geometric grotesque — Citymapper uses a custom face, well-approximated by Inter with heavy weights. The personality is *confident and chunky*: ETAs and the GO label are extra-bold (800–900), place names are semibold, supporting text is regular gray. It's playful but never cute at the expense of legibility — you have to read this while half-running for a train.
Key Characteristics:
- Mode-color system — walk
#00B894, bus#E8453C, tube/metro#2B5BFF, rail#8E44D8, bike#00A8C5, cab#FFB400— theme-invariant, the brand's soul - Leg strip — a route shown as a horizontal row of color-coded mode chips with arrows between
- GO button — fat green (
#00C281) rounded pill with a play triangle; shape/color-locked everywhere - GO trip mode — live step-by-step navigation with big countdown type and a progress line
- Origin→destination card — gray "from" dot + blue "to" dot joined by a transit-map line
- Route options ranked & tagged — Fastest / Cheapest / Easiest / Rain-safe
- Departures board — live next-departure list; colored line badge + destination + minutes (amber when imminent)
- Disruption banners — orange inline alerts for closures and delays
- Clean near-neutral canvas (white / deep blue-black
#0C0E14) so mode colors + map pop - Electric blue (
#2B5BFF) is Citymapper's own accent; green is reserved for GO - Chunky confident type (Inter / custom grotesque), extra-bold ETAs
- Bottom tabs: Get me / Nearby / Saved / You
Do's and don'ts
Do
- Give every transport mode its loud, consistent color (walk green / bus red / tube blue / rail purple / bike cyan / cab amber) and keep it identical across themes
- Render routes as a leg strip of colored mode chips with arrows — color first, words second
- Keep the GO button a fat green (
#00C281) pill, shape- and color-locked on every screen and theme - Use Citymapper Blue (
#2B5BFF) for the brand accent / destination / metro; reserve green for GO - Show the O→D as a gray "from" dot + blue "to" dot joined by a transit-map line
- Tag routes with *why* ("Fastest", "Cheapest", "Easiest", "Rain-safe")
- Make the departures board live, with imminent (≤3 min) departures in orange
- Use tabular figures for every ETA, minute, and countdown
- Surface disruptions inline as orange banners in route results
- Keep the canvas calm (white / deep blue-black
#0C0E14) so mode colors and the map pop - Use chunky extra-bold type for ETAs and GO — readable while moving
Don't
- Don't recolor modes per theme — a bus is always red, light or dark
- Don't render a route as a plain text list — it must be the colored leg strip
- Don't use green for anything except GO / live / on-time — green means "go"
- Don't change the GO button's shape or color contextually — it is the brand control
- Don't use pure black (
#000000) for dark canvas — it's deep blue-black#0C0E14 - Don't bury the GO button or crowd it — it always has clear space
- Don't let real line colors get overridden by category color when the official line color is known (use the line's true color, fall back to mode color)
- Don't animate countdowns abruptly — cross-fade the minute number (150ms)
- Don't hide disruptions in a sub-screen — they belong inline, in orange, in the results
- Don't thin out ETA type — it's the loudest thing on screen (800–900)
- Don't add a second "primary" green action competing with GO
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 Citymapper design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Citymapper Blue: #2b5bff
- Citymapper Blue Bright: #4d7bff
- Citymapper Blue Pressed: #1e45cc
- GO Green: #00c281
- Canvas White: #ffffff
- Surface Gray: #f4f5f8
- Surface Pressed: #e8eaf0
- Divider: #e3e5ec
- Dark Canvas: #0c0e14
- Dark Surface 1: #15171f
Type:
- families: Inter, Numerics, Grotesque
- scale: 10, 12, 13, 14, 15, 16, 18, 22, 26
- weights: 400, 600, 700, 800, 900
Shape:
- radius: 8, 12
- elevation: Shadow: `0 10px 22px -10px rgba(0,194,129,0.7)`
Spacing: 6, 11, 12, 13, 14
Rules:
- Give every transport mode its loud, consistent color (walk green / bus red / tube blue / rail purple / bike cyan / cab amber) and keep it identical across theme…
- Render routes as a leg strip of colored mode chips with arrows — color first, words second
- Keep the GO button a fat green (`#00C281`) pill, shape- and color-locked on every screen and theme
- Use Citymapper Blue (`#2B5BFF`) for the brand accent / destination / metro; reserve green for GO
- Show the O→D as a gray "from" dot + blue "to" dot joined by a transit-map line
- Tag routes with *why* ("Fastest", "Cheapest", "Easiest", "Rain-safe")
Avoid:
- Don't recolor modes per theme — a bus is always red, light or dark
- Don't render a route as a plain text list — it must be the colored leg strip
- Don't use green for anything except GO / live / on-time — green means "go"
- Don't change the GO button's shape or color contextually — it is the brand control
- Don't use pure black (`#000000`) for dark canvas — it's deep blue-black `#0C0E14`
- Don't bury the GO button or crowd it — it always has clear space
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Citymapper Blue (
#2B5BFF): The brand accent — destination pin, primary links, selected states, the "metro/tube" mode color, secondary CTAs. - Citymapper Blue Bright (
#4D7BFF): Dark-mode link & active-tab variant for contrast on the dark canvas. - Citymapper Blue Pressed (
#1E45CC): Pressed state of blue CTAs. - GO Green (
#00C281): Reserved exclusively for the GO button and GO trip mode — never used for generic UI.
Transit Mode Colors (Theme-Invariant — the brand)
These define a route's readability and do not change between light and dark.
| Mode | Color | Tint (bg use) |
|---|---|---|
| Walk | #00B894 | rgba(0,184,148,0.18) |
| Bus | #E8453C | rgba(232,69,60,0.18) |
| Tube / Metro / Subway | #2B5BFF | rgba(43,91,255,0.18) |
| Rail / Train / Overground | #8E44D8 | rgba(142,68,216,0.18) |
| Bike / Scooter | #00A8C5 | rgba(0,168,197,0.18) |
| Cab / Rideshare | #FFB400 | rgba(255,180,0,0.18) |
| Ferry | #0094C6 | rgba(0,148,198,0.18) |
Real transit lines (e.g., London Victoria line navy, NYC A/C/E blue) override these defaults with the operator's official line color when known. The mode colors are the *fallback and category* color.
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light canvas. - Surface Gray (
#F4F5F8): Route cards, grouped sections. - Surface Pressed (
#E8EAF0): Pressed rows. - Divider (
#E3E5EC): Hairlines between route legs and departure rows.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#0C0E14): Primary dark canvas — a deep blue-black, NOT pure black. - Dark Surface 1 (
#15171F): Route cards, elevated surfaces. - Dark Surface 2 (
#1E212B): Departures board, hovered/selected cards. - Dark Divider (
#282C38): Hairline dividers on dark.
Text
- Text Primary Light (
#10131A): ETAs, place names, titles — near-black. - Text Secondary Light (
#5A6473): Metadata, "min" suffix, captions. - Text Tertiary Light (
#8A93A3): Disabled, placeholder, leg arrows. - Text Primary Dark (
#ECEEF3): Primary text on dark. - Text Secondary Dark (
#98A0AE): Secondary on dark. - Text Tertiary Dark (
#646C7A): Tertiary on dark.
Surface / Tint Map
| Role | Light Mode | Dark Mode |
|---|---|---|
| Canvas | #FFFFFF | #0C0E14 |
| Surface 1 | #F4F5F8 | #15171F |
| Surface 2 | #E8EAF0 | #1E212B |
| Divider | #E3E5EC | #282C38 |
| Blue tint | #2B5BFF14 | #2B5BFF29 |
| GO Green tint | #00C2811F | #00C2812E |
Semantic
- Disruption Orange (
#FF8A00): Line closures, severe delays — inline banners and the "minutes soon" departure state. - Live Green (
#00C281): "Live" indicator dot, on-time confirmation (shares the GO green). - Delay Red (
#E8453C): Cancelled/severely-delayed services (shares the bus red intentionally — "red = stop/problem"). - Info Blue (
#2B5BFF): Informational tips, "we updated this route".
Type scaleRead the full spec
Font Family
- Primary: Citymapper's custom geometric grotesque (a chunky, friendly sans tuned for glanceable transit data).
- iOS Fallback:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif - Web/Catalog Substitute:
Inter(weights 400–900) — closest free face matching the chunky grotesque feel. - Numerics: Tabular figures for ETAs, minutes, and the departures board so countdowns don't jitter.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Grotesque | 32pt | 900 | 1.1 | -0.5pt | "Get me somewhere" / GO-mode primary instruction |
| ETA Hero | Grotesque | 26pt | 800 | 1.15 | -0.3pt | Route card "24 min", GO-mode countdown |
| Section | Grotesque | 22pt | 800 | 1.2 | -0.2pt | "Best routes", "Departures" |
| Row Title | Grotesque | 18pt | 700 | 1.3 | -0.1pt | Line name, step title |
| Body | Grotesque | 16pt | 400 | 1.45 | 0pt | Step descriptions, route notes |
| Place | Grotesque | 15pt | 600 | 1.3 | 0pt | Origin/destination, stop names |
| Meta | Grotesque | 14pt | 400 | 1.4 | 0pt | "Updated 12s ago · live" |
| Mode Badge | Grotesque | 12pt | 800 | 1.0 | 0.3pt | Line/route number on a colored chip — uppercase |
| ETA Suffix | Grotesque | 13pt | 600 | 1.0 | 0pt | The "min" after a number |
| GO Label | Grotesque | 18pt | 900 | 1.0 | 0.4pt | The word "GO" in the button — uppercase |
| Button | Grotesque | 15pt | 800 | 1.0 | 0pt | Secondary buttons |
| Tag | Grotesque | 10pt | 800 | 1.0 | 0.4pt | "Fastest"/"Cheapest" pills — uppercase |
| Departure Min | Grotesque | 16pt | 800 | 1.0 | 0pt | Minutes on the departures board, tabular |
| Tab Label | Grotesque | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
Principles
- ETAs and GO are the loudest type (800–900): the number you act on dominates every screen.
- Tabular figures for anything counting down: route ETAs, departure minutes, GO-mode countdowns.
- Mode badges are uppercase, chunky, tracked: line numbers/names sit in colored chips at 12pt 800.
- Confident, not cute: heavy weights, tight tracking on big type — readable while moving.
- Dynamic Type first-class: display, ETA, body scale; mode badges, tab labels, the GO label stay fixed (chips are layout-sensitive).
Components and layoutRead the full spec
Buttons
GO Button (the icon of the app)
- Shape: Full rounded pill, 28pt corner radius (≈ height/2), height 54pt
- Background:
#00C281(GO Green) — never any other color - Content: a play triangle (filled) + the word "GO" in 18pt weight 900, color
#003322(dark green text for warmth) or white per contrast - Shadow:
0 10px 22px -10px rgba(0,194,129,0.7) - Pressed: scale 0.98 + brightness 0.95
- Locked: identical shape, color, and label on every screen and in every theme — it is the brand control
Primary Button (Get directions / secondary CTA)
- Background:
#2B5BFF(Citymapper Blue) - Text: white, 15pt weight 800
- Corner radius: 12pt; padding 13pt/24pt
- Pressed:
#1E45CC
Outline Button (Save place)
- Background: transparent
- Text & border:
#2B5BFFlight /#4D7BFFdark, 1.5pt border - Corner radius: 12pt; padding 11pt/18pt
Text Button (More routes)
- Font: 14pt weight 700
- Color:
#2B5BFF/#4D7BFFdark - Pressed: 60% opacity
Cards & Containers
Origin→Destination Card
- Background:
#F4F5F8/#15171F, 1pt divider border, 14pt corner radius, 12pt/14pt padding - Two rows: a 10pt gray dot ("from") and a 10pt blue dot ("to"), joined by a 2pt vertical divider segment between them — reads like a transit-map stop pair
- Place text: 14–15pt weight 600
Route Option Card
- Background:
#F4F5F8/#15171F, 1pt divider border, 16pt corner radius, 14pt/16pt padding, 12pt vertical gap between cards - "Best" route: border switches to GO Green
#00C281 - Head: ETA "24" 22pt 800 + "min" 13pt 600 secondary, with a right-aligned tag pill ("Fastest"/"Cheapest")
- Leg strip: horizontal flex row of mode chips: each chip is a colored rounded-8pt pill with a 13pt white mode glyph + a short label/number (e.g., "4" for walk minutes, "Victoria" for a line); chips separated by a tertiary "›" arrow
Departures Board
- Container:
#1E212B/ surface, 14pt radius,overflow: hidden - Row: 13pt/16pt padding, 1pt bottom divider (none last)
- Leading: a 34×24 line badge (mode-colored, 12pt 900 white text — e.g., "VIC", "63", "NR")
- Middle: destination 14pt weight 600
- Trailing: minutes 16pt weight 800 — GO Green normally, Disruption Orange when ≤ 3 min ("leave now")
Mode Chip / Badge
- Rounded 8–10pt pill, mode color background, white text 12pt 800 uppercase, optional 13pt glyph
- The atomic unit of every route view
Navigation
Top (Origin→Destination)
- The O→D card *is* the top region on the route screen — no separate nav bar; back chevron floats top-left when drilled in
Bottom Tab Bar
- Height: 64pt + safe area
- Background:
#FFFFFF/rgba(12,14,20,0.94)withbackdrop-filter: blur(20px), 0.5pt top divider - Tabs (4): Get me / Nearby / Saved / You
- Icon: 22pt; active
#2B5BFFlight /#4D7BFFdark (filled), inactive tertiary gray - Label: 10pt weight 600, always shown
- No pill indicator — color + icon-fill change only
GO Trip Mode (full-screen takeover)
- Replaces normal chrome: a big current-instruction header (ETA Hero / Display weight), a vertical progress line with mode-colored segments and stop dots, a "next action" card, and a persistent disruption strip if relevant
- A floating "End" / minimize control; the GO green theme dominates
Input Fields
Destination Search
- Height: 48pt
- Background:
#F4F5F8/#1E212B - Corner radius: 12pt
- Leading 18pt search glyph (tertiary)
- Placeholder: "Where to?" 15pt 400 tertiary
- Focus: 2pt
#2B5BFFborder
Origin Field (inline in O→D card)
- Borderless row in the O→D card; tap to edit, opens the same search sheet
Distinctive Components
Leg Strip
- The signature route visualization — a horizontal sequence of mode chips + arrows
- Reads in <1s: color = mode, number = line/duration
- Never render a route as plain text — always the colored strip
GO Trip Mode Countdown
- Big "Get off in 2 stops" / "Bus in 1 min" instruction (ETA Hero/Display weight)
- A live vertical progress line; the current leg's segment animates/pulses in its mode color
- Haptic + voice cues at each step transition
Departures Board
- Live, auto-refreshing; minutes tick down; imminent (≤3 min) turn orange
- "Live" green dot + "updated Ns ago" caption
Route Tag Pill
- Tiny uppercase pill on a route card: "Fastest" (GO-green tint), "Cheapest" (blue tint), "Easiest", "Rain-safe" (a cloud glyph), "Step-free"
- Communicates *why* you'd pick this route
Disruption Banner
- Inline orange (
#FF8A00) strip in route results: "⚠ Victoria line: minor delays" - Tap to expand details; severe closures use Delay Red
#E8453C
Nearby Stops List
- Each entry: stop name + a row of mode badges with the soonest arrival per line
- The "I just want to see what's around me" surface
Spacing System
- Base unit: 4pt
- Scale: 4, 6, 8, 12, 16, 18, 24, 32, 40, 54
- Page horizontal inset: 16pt
- Card internal padding: 14–16pt
- Route-card vertical gap: 12pt
- Leg-strip chip gap: 6pt
Grid & Container
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Leg-strip labels abbreviate sooner; 3 route cards visible |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated above the map / O→D card |
| iPhone 15/16 Pro Max | 430pt | Larger map peek; leg strips show fuller line names |
| iPad (portrait) | 768pt | Two-pane: route list (≤420pt) + live map |
| iPad (landscape) | 1024pt+ | Same two-pane wider; GO trip mode full-screen with side step list |
Dynamic Type
- Display, ETA hero, body, place: full scale
- Mode badges, route tag pills, the GO label, departure-min, tab labels: FIXED (chips are layout-sensitive)
- GO-mode instruction scales up generously (you read it from a pocket-glance distance)
Orientation
- All screens rotate
- iPad landscape locks the two-pane split; GO mode rotates with a side-by-side step list + map
- The leg strip wraps rather than truncating mode color
Touch Targets
- GO button: 54pt tall pill, full width of its inset
- Route card: full-card tap, ≥ 72pt tall
- Mode chip (when tappable): ≥ 44pt hit even if visually ~28pt
- Departures row: full-row tap, ≥ 50pt
- Tab bar icons: 22pt glyph, 44pt hit
Safe Area Handling
- Top: O→D card / map respects safe area + Dynamic Island
- Bottom: tab bar + home indicator respected; the route sheet's peek height sits above the home indicator; the GO button floats above safe area
- Keyboard: destination search sheet rises above the keyboard
- Sides: 16pt content inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-citymapper {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0c0e14;
--heading-color: #0c0e14;
--link-color: #2b5bff;
--link-hover-color: #0038f7;
--border-color: #d3d4d5;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(12,14,20,0.06);
--card-hover-shadow: 0 6px 18px rgba(12,14,20,0.12);
--header-bg: #0c0e14;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #616266;
--button-bg: #2b5bff;
--button-text-color: #ffffff;
--button-hover-bg: #0038f7;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #f0f1f1;
--button-secondary-text-color: #0c0e14;
--button-secondary-hover-bg: #e2e2e3;
--button-secondary-border: 1px solid #d3d4d5;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0c0e14;
--base-font: var(--font-inter);
--heading-font: var(--font-helvetica);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/travel/citymapper/DESIGN.md· 25.7 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.