designmd-forge 1.2.0

package/dist/data/designs/ios-citymapper.md

@@ -0,0 +1,394 @@
+# Design System Inspiration of Citymapper (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+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
+
+## 2. Color Palette & Roles
+
+### 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".
+
+## 3. Typography Rules
+
+### 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).
+
+## 4. Component Stylings
+
+### 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: `#2B5BFF` light / `#4D7BFF` dark, 1.5pt border
+- Corner radius: 12pt; padding 11pt/18pt
+
+**Text Button (More routes)**
+- Font: 14pt weight 700
+- Color: `#2B5BFF` / `#4D7BFF` dark
+- 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)` with `backdrop-filter: blur(20px)`, 0.5pt top divider
+- Tabs (4): Get me / Nearby / Saved / You
+- Icon: 22pt; active `#2B5BFF` light / `#4D7BFF` dark (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 `#2B5BFF` border
+
+**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
+
+## 5. Layout Principles
+
+### 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
+- iPhone: single-column route list at 16pt insets; map fills above when in map mode
+- iPad: two-pane — route list (max 420pt) on the left, live map on the right; GO mode is full-screen on both
+- Departures board: single column, fixed row height
+- Leg strip: horizontal wrap, never truncates the mode color (label may abbreviate)
+
+### Whitespace Philosophy
+- **Color does the work, not whitespace**: the canvas is calm so mode colors and the map carry energy
+- **The GO button always has clear space** below the route list — it must never be crowded
+- **Glance-optimized density**: route cards are compact enough that 3–4 fit without scrolling
+- **One green action**: GO is the only green; nothing else competes for that meaning
+
+### Border Radius Scale
+- Square (0pt): map, full-bleed banners
+- Subtle (4pt): tiny tags
+- Standard (8pt): mode chips, route tag pills
+- Comfortable (10–12pt): badges, inputs, primary button
+- Card (14–16pt): route cards, O→D card, departures board
+- GO Pill (28pt ≈ height/2): the GO button
+- Pill (500pt): filter chips
+- Circle (50%): O→D dots, avatar, live dot
+
+## 6. Depth & Elevation
+
+Citymapper is mostly flat; depth highlights the live map layer and the one action that matters.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow; 1pt border/divider | Route cards, departures rows, sections |
+| Map Sheet (Level 1) | `0 -8px 24px rgba(0,0,0,0.16)` | The route list / bottom sheet sitting over the map |
+| GO Action (Level 2) | `0 10px 22px -10px rgba(0,194,129,0.7)` (green-tinted) | The GO button only |
+| Floating (Level 2) | `0 6px 20px rgba(16,19,26,0.14)` | Disruption detail popover, mode-filter sheet |
+| Modal Scrim | `rgba(8,10,16,0.5)` | Behind sheets/modals |
+
+**Shadow Philosophy**: The bottom-sheet-over-map is the core spatial metaphor — the route list floats above a live map and you can drag it up/down. The only persistently shadowed control is the GO button, with a green-tinted glow that makes it the obvious thing to press. Everything else is flat with borders. On dark mode the GO glow stays (green reads on the deep blue-black); card separation uses the `#15171F` → `#1E212B` surface ramp.
+
+### Motion
+- **Route list ⇄ map drag**: the sheet tracks the finger 1:1; snap points at peek / half / full with `spring(response: 0.35, damping: 0.85)`
+- **GO start**: GO pill scales 0.98 then the screen cross-dissolves into GO trip mode (350ms); the progress line draws in from the top over 500ms
+- **GO-mode step transition**: the completed leg's line segment fills its mode color (250ms ease-out); the instruction text swaps with a 200ms vertical slide+fade; medium haptic + optional voice cue
+- **Departure tick**: minutes decrement with a 150ms number cross-fade; crossing the ≤3-min threshold animates the color to orange (200ms)
+- **Leg strip reveal**: on a fresh search, route cards stagger-in (each `opacity 0→1` + 8pt rise, 60ms apart); leg chips within a card pop in left-to-right (40ms apart, slight scale 0.9→1)
+- **Disruption banner**: slides down from the top of the result list in 250ms ease-out; pulses its orange border once to draw the eye
+- **Tab switch**: instant content swap; active icon does a subtle 0.9→1 scale (120ms)
+- **Pull to refresh departures**: custom transit-y loader; on release, minutes restream with the cross-fade
+- **Haptic feedback**: light tick on route select & tab change; medium impact on GO start and each GO-mode step; warning haptic when a disruption affects the active route
+
+## 7. 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
+
+## 8. Responsive Behavior
+
+### 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
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light): `#FFFFFF`
+- Canvas (dark): `#0C0E14`
+- Surface 1: `#F4F5F8` light / `#15171F` dark
+- Surface 2: `#E8EAF0` light / `#1E212B` dark
+- Divider: `#E3E5EC` light / `#282C38` dark
+- Text primary: `#10131A` light / `#ECEEF3` dark
+- Text secondary: `#5A6473` light / `#98A0AE` dark
+- **Citymapper Blue (accent)**: `#2B5BFF` (bright `#4D7BFF`, pressed `#1E45CC`)
+- **GO Green (GO button only)**: `#00C281`
+- Mode — Walk: `#00B894`
+- Mode — Bus: `#E8453C`
+- Mode — Tube/Metro: `#2B5BFF`
+- Mode — Rail: `#8E44D8`
+- Mode — Bike: `#00A8C5`
+- Mode — Cab: `#FFB400`
+- Disruption Orange: `#FF8A00`
+
+### Example Component Prompts
+- "Build a Citymapper route option card in SwiftUI: a `#F4F5F8` (dark `#15171F`) container, 1pt divider border, 16pt corner radius, 14pt/16pt padding. Header row: a left ETA group — `24` in 22pt weight 800 `#10131A` next to `min` in 13pt weight 600 `#5A6473` — and a right-aligned tag pill `Fastest` (10pt 800 uppercase, GO-green tint `rgba(0,194,129,0.18)`, `#00C281` text, 999pt radius). Below: a horizontal leg strip — mode chips, each an 8pt-radius pill in its mode color with a 13pt white glyph and a label (walk `#00B894` '4', tube `#2B5BFF` 'Victoria', walk `#00B894` '6'), separated by a `›` arrow in `#8A93A3`. If this is the best route, switch the card border to `#00C281`."
+
+- "Create the Citymapper GO button: a full-pill rounded rectangle 28pt corner radius, 54pt tall, full-width minus 16pt insets, background `#00C281`, containing a filled play triangle and the word 'GO' in 18pt weight 900 letter-spacing 0.4pt, with a green-tinted shadow `0 10px 22px -10px rgba(0,194,129,0.7)`. Pressed: scale 0.98 + brightness 0.95 + medium haptic. This control's shape and color are LOCKED — identical on every screen and in both light and dark themes."
+
+- "Render the Citymapper origin→destination card: a `#F4F5F8` (dark `#15171F`) container, 14pt radius, 1pt divider border, 12pt/14pt padding. Two 34pt rows: row 1 has a 10pt `#5A6473` gray 'from' dot then place text in 15pt weight 600; row 2 has a 10pt `#2B5BFF` blue 'to' dot then place text. Between the dots, a 2pt-wide `#E3E5EC` vertical line segment connecting them — reads like a transit-map stop pair."
+
+- "Build the Citymapper departures board: a `#1E212B` container, 14pt radius, `overflow: hidden`. Each row 13pt/16pt padding, 1pt `#282C38` bottom divider (none on last): leading a 34×24 line badge (mode-colored, e.g. tube `#2B5BFF`) with 12pt weight 900 white text ('VIC'), a flexible destination in 14pt weight 600 `#ECEEF3`, and trailing minutes in 16pt weight 800 — `#00C281` normally, but `#FF8A00` when ≤ 3 minutes. Tabular figures; minutes cross-fade as they decrement."
+
+- "Create the Citymapper GO trip-mode header: a near-full-bleed panel with a big current instruction in 26–32pt weight 800–900 `#10131A` ('Get off in 2 stops'), a sub-line in 16pt 400 `#5A6473` ('Tate Modern · 8 min'), and a vertical progress line on the left with stop dots and mode-colored segments — the current leg's segment in its mode color, pulsing. A floating 'End' control top-right. The GO-green theme dominates."
+
+- "Render a Citymapper disruption banner: a full-width inline strip in the route results, `#FF8A00` background at 18% (`rgba(255,138,0,0.18)`) with a 1pt `#FF8A00` border, 10pt radius, a ⚠ glyph in `#FF8A00`, and text 'Victoria line: minor delays' in 14pt weight 700. On appear, slide down 250ms ease-out and pulse the border once. Severe closures use Delay Red `#E8453C` instead of orange."
+
+### Iteration Guide
+1. Canvas is calm — white light / deep blue-black `#0C0E14` dark (NOT true black) — so mode colors and the map carry the energy
+2. Every transport mode has a loud, consistent color (walk `#00B894` / bus `#E8453C` / tube `#2B5BFF` / rail `#8E44D8` / bike `#00A8C5` / cab `#FFB400`) — theme-invariant, the brand's soul
+3. Routes are ALWAYS a leg strip of colored mode chips + `›` arrows — color first, words second
+4. The GO button is a fat green `#00C281` pill, shape/color-locked on every screen and in both themes — it is THE brand control
+5. Green means GO / live / on-time only — Citymapper Blue `#2B5BFF` is the brand accent (also the metro mode)
+6. O→D = gray "from" dot + blue "to" dot joined by a transit-map line segment
+7. Tag routes with *why* (Fastest / Cheapest / Easiest / Rain-safe)
+8. The departures board is live; minutes use tabular figures and turn orange ≤ 3 min
+9. Disruptions are inline orange (`#FF8A00`) banners in results — never hidden in a sub-screen
+10. ETAs and GO are the loudest type (800–900); real line colors override category mode colors when known