Google Maps DESIGN.md

1. Visual Theme & Atmosphere

Google Maps' iOS app is a pure map-first interface — the earth is the canvas and the UI is a handful of floating shapes laid over it. Unlike most apps that treat the map as a feature, Maps treats the map as the entire product: every search result, every place card, every navigation instruction exists as a translucent sheet or rounded pill stationed over rendered geography. The result is a chrome-light surface where road vectors, park polygons, and water bodies do all the visual heavy lifting, and the UI chrome melts into whatever landscape is beneath it. This is why a Maps screenshot taken in Manhattan looks chromatically different from one taken in Yosemite — the app is tinted by the terrain.

The accent system is a disciplined deployment of Google's four-color identity. Google Blue (#4285F4) is the operating accent — it marks the route polyline, the "Your location" dot with its soft accuracy halo, the "Directions" floating action button, the active tab, and any pin placed on a "home" or "work" saved place. The three remaining Google logo colors each have a single semantic job: Red (#EA4335) is the default pin color for a dropped/searched place (the one most users recognize as "the Google Maps pin"), Green (#34A853) marks saved or favorited places, Yellow (#FBBC04) flags alerts, construction, and caution overlays. Orange (#FB8C00) is used for category pins (restaurants, gas stations, hotels). Beyond these, color appears only in map tiles — park green #C8E6C9, water blue #AADAFF, highway shield yellow #FDF6E3, neutral building fills #F0F0F0.

Typography is Google Sans for headings and Roboto for body — Google's unified two-font system across its app ecosystem. Google Sans carries geometric, open, slightly humanist shapes that feel neutral on any locale; Roboto is flatter, optimized for dense UI copy and address display. The hierarchy is conservative: place card titles at 20pt weight 500, addresses in 14pt Roboto weight 400, distances in tabular numerals so "1.2 mi" and "14.7 mi" stack cleanly in a list. Turn-by-turn navigation breaks the quiet rule — the turn card shoots to 36-48pt display type in Google Sans weight 700 so the next maneuver is legible at a glance behind the wheel.

Key Characteristics:

• Map is the hero — full-bleed to every edge, UI floats as translucent sheets and pills
• Google Blue (#4285F4) as the operating accent — route line, location dot, Directions FAB
• Four-color pin system: Red (default), Green (saved), Blue (home/work), Orange (category)
• Floating top search bar ("Search here") with voice-mic and profile avatar
• Bottom sheet drawer with drag-to-expand detents — search results, place details, transit
• Category chip row (Restaurants / Hotels / Coffee / Things to do) beneath the search bar
• Blue "Your location" dot with translucent accuracy circle and heading cone
• Blue route polyline (5pt) with darker blue casing for legibility on any map color
• Turn-by-turn immersive mode: giant blue arrow, top turn card, bottom ETA, speed chip
• Dark mode uses #202124 canvas with the map's dark-tile palette

2. Color Palette & Roles

Primary (Google Logo Colors)

• Google Blue (#4285F4): Primary UI accent, route polyline, "Your location" dot, Directions FAB, active tab indicator, home/work pin.
• Google Red (#EA4335): Default pin color for searched/dropped places, the iconic Maps pin.
• Google Yellow (#FBBC04): Alerts, construction icons, speed trap overlays, caution chips.
• Google Green (#34A853): Saved/favorited place pins, "on-time" transit, success states.
• Category Orange (#FB8C00): Category pins (restaurants, gas stations, hotels) and related chips.

Blue Ramp (Operating Accent)

• Blue Primary (#4285F4): Route, FAB, location dot.
• Blue Pressed (#1A73E8): Pressed state on primary CTAs.
• Blue Dark (#174EA6): Route polyline casing outline, navigation-mode chrome.
• Blue Halo (rgba(66,133,244,0.18)): Accuracy circle around "Your location" dot, selection pill backgrounds.

Canvas & Text (Light Mode)

• Canvas White (#FFFFFF): Bottom sheet surface, search bar fill, card backgrounds below the map.
• Surface Muted (#F1F3F4): Category chip fill, disabled fill, sectional backgrounds.
• Divider (#DADCE0): Hairline dividers between list rows and tabs.
• Text Primary (#202124): Place titles, primary UI text.
• Text Secondary (#5F6368): Addresses, metadata, secondary labels.
• Text Tertiary (#80868B): Low-emphasis labels, disabled text.

Map Tile Palette (Light)

• Road White (#FFFFFF): Street surface.
• Highway Yellow (#FDF6E3): Major highways, freeways — the signature faint-yellow strip.
• Water Blue (#AADAFF): Lakes, rivers, ocean.
• Park Green (#C8E6C9): Parks, green spaces.
• Building Fill (#F0F0F0): Building footprints at zoom, with #E0E0E0 outline.
• Land Neutral (#F5F5F5): Default land tint between roads.

Dark Mode

• Dark Canvas (#202124): Canvas below the map, sheet backgrounds.
• Dark Surface 1 (#2D2E31): Elevated surface, search bar fill in dark.
• Dark Surface 2 (#3C4043): Higher elevation, modal sheets.
• Dark Divider (#3C4043): Hairline dividers in dark mode.
• Dark Text Primary (#E8EAED).
• Dark Text Secondary (#9AA0A6).
• Dark Map Land (#242F3E), Roads (#38414E), Water (#17263C), Parks (#023E58).

Semantic

• Traffic Red (#D50000): Heavy traffic segment overlay on route.
• Traffic Orange (#FB8C00): Slow traffic segment overlay.
• Traffic Green (#0F9D58): Clear traffic segment overlay.
• Alert Yellow (#FBBC04): Construction, caution triangles.
• Transit Pink (#E63946): Metro/subway line colors are city-specific; the default catch is a warm red.

3. Typography Rules

Font Family

• Headings / Display: Google Sans (geometric, slightly humanist — used for place titles, turn directions, tab headers)
• Body / UI: Roboto (dense, optimized for UI — used for addresses, list metadata, body copy)
• Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif
• Numerals: Roboto tabular figures for distances, ETA, speed
• CJK / Non-Latin: Noto Sans family siblings fall back for every script Google ships

Hierarchy

Principles

• Two-font system: Google Sans for headlines and CTAs, Roboto for everything dense and data-driven. Never swap them.
• Weights concentrated at 400 / 500 / 700: Regular, Medium, Bold. 500 is the workhorse weight; 700 is reserved for nav turn cards and emphasis.
• Tabular numerals always: distances, ratings, ETAs, speeds use Roboto's tabular figure set so columns align.
• Rating star uses Google Yellow: #FBBC04 (not orange) — consistent with Google product rating stars.
• Turn card type is the only display moment: 36-48pt, Google Sans 700, reserved for in-navigation mode.
• No italics: emphasis through weight only.

4. Component Stylings

Buttons

Primary FAB (Directions)

• Shape: Circle, 56pt diameter, pinned 16pt from trailing/bottom edges over the map
• Background: #4285F4
• Icon: SF Symbol arrow.triangle.turn.up.right.diamond.fill (or custom Google Directions glyph) at 24pt in #FFFFFF
• Shadow: rgba(0,0,0,0.2) 0 4px 12px
• Pressed: scale 0.95, background #1A73E8, medium haptic
• Used for: Directions entry from any place sheet

Primary Pill CTA ("Start", "Save")

• Background: #4285F4
• Text: #FFFFFF, Google Sans 16pt weight 500
• Height: 44pt
• Padding: 0 24pt
• Corner radius: 22pt (full pill)
• Pressed: #1A73E8, scale 0.98, light haptic
• Used for: "Start" navigation, "Save" place, "Add stop"

Secondary Outline Button ("Call", "Share")

• Background: transparent
• Border: 1pt solid #DADCE0
• Text: #4285F4, Google Sans 14pt weight 500
• Height: 36pt
• Corner radius: 18pt
• Leading icon: 18pt, Google Blue
• Pressed: background #F1F3F4

Icon-Only Map Control (Recenter, Layers, Compass)

• Size: 40pt circle
• Background: #FFFFFF with shadow rgba(0,0,0,0.15) 0 2px 6px
• Icon: 20pt, #5F6368, rounded-join geometric glyph
• Pressed: #F1F3F4 fill
• Position: floats over the map, trailing side, stacks vertically above the Directions FAB

Category Chip (Restaurants / Hotels / Coffee)

• Background: #FFFFFF with 1pt #DADCE0 hairline border
• Text: #202124, Google Sans 14pt weight 500
• Padding: 8pt vertical, 14pt horizontal
• Corner radius: 18pt (pill)
• Leading icon: 16pt colored glyph matching category (fork+knife in orange, etc.)
• Active (tapped): background #E8F0FE + border #4285F4 + text #1967D2
• Shadow: rgba(0,0,0,0.08) 0 1px 3px

Cards & Containers

Place Card (Bottom Sheet Hero)

• Sits at the top of the bottom-sheet place details screen
• Leading: photo thumbnail 72×72pt with 12pt corner radius
• Place title: Google Sans 20pt w500 #202124 (2-line clamp)
• Rating line: "4.5" in Roboto 14pt w500 #202124 + 4.5 ★ glyphs in #FBBC04 + "(2,345)" in Roboto 14pt w400 #5F6368
• Category line: "Italian restaurant · $$ · 1.2 mi"
• Open-now pill: #34A853 "Open now" + Roboto 13pt " · Closes 10 PM" in #5F6368
• Action row beneath: Directions (blue pill FAB) | Save | Share | Call
• Separator: 1pt #DADCE0 hairline below action row

Search Result Row

• Height: 72pt
• Leading: 48×48pt category-colored circle with 20pt white glyph (e.g., orange fork for restaurant)
• Title: Roboto 16pt w500 #202124
• Subtitle: Roboto 13pt w400 #5F6368 — "1.2 mi · 123 Main St"
• Trailing: small 28pt "Directions" icon button (blue) if not currently navigating
• Pressed: background #F1F3F4

Bottom Sheet Drawer

• Position: anchored to bottom, 3 detents (collapsed 140pt, medium 380pt, expanded near-full)
• Background: #FFFFFF light / #2D2E31 dark
• Corner radius: 16pt top corners, 0pt bottom
• Grabber: 32×4pt #DADCE0 pill centered 8pt from top
• Shadow: rgba(0,0,0,0.12) 0 -4px 20px
• Scroll behavior: sheet-inner scrolling kicks in at expanded detent

Route Card (Directions Sheet)

• Modes row (Drive / Transit / Walk / Bike / Rideshare): segmented control with blue underline under active
• Primary route: "25 min (18.4 mi)" Google Sans 20pt w500 + "Fastest route, usual traffic" Roboto 13pt w400 #5F6368
• Alternative routes listed below in lighter gray polyline (map overlay) with "+3 min" delta chip
• "Start" CTA: blue pill 44pt full-width bottom of card

Navigation

Top Floating Search Bar

• Position: floats 8pt below top safe area, 16pt horizontal margins
• Height: 48pt
• Background: #FFFFFF
• Corner radius: 24pt (full pill)
• Shadow: rgba(0,0,0,0.15) 0 2px 8px
• Layout: leading 28pt profile avatar (circular) | center placeholder "Search here" (Google Sans 16pt w400 #5F6368) | trailing 24pt voice-mic icon (Google Blue when listening)
• Tap: expands to full-screen search with keyboard and recent searches below

Bottom Tab Bar

• Height: 56pt + safe area
• Background: #FFFFFF with 0.5pt top border #DADCE0, .regularMaterial blur
• Tabs: Explore, Go (commute), Saved, Contribute, Updates
• Icon size: 24pt, 2pt stroke, geometric
• Active color: #4285F4 (filled variant with colored fill)
• Inactive: #5F6368 (outline variant)
• Labels: Google Sans 11pt w500, always shown
• Haptic on tab change: light

Navigation Mode Top Turn Card

• Position: anchored at top, below safe area, full-width minus 16pt margin
• Background: #4285F4
• Corner radius: 16pt
• Layout: leading giant 48pt turn arrow white | turn instruction "Turn right onto Main St" in Google Sans 22pt w700 white | distance "in 0.3 mi" Roboto 14pt w400 white 70%
• Shadow: rgba(0,0,0,0.2) 0 4px 16px
• Next turn preview below: smaller 32pt turn arrow + "Then left onto Oak Ave" in 14pt

Navigation Mode Bottom ETA Card

• Position: anchored to bottom, full-width above safe area
• Background: #FFFFFF (light) / #2D2E31 (dark)
• Corner radius: 16pt top corners
• Content: ETA "4:32 PM" Google Sans 22pt w500 + "18 min · 12 mi" Roboto 14pt w400 #5F6368 + traffic color bar
• End-trip exit pill: #EA4335 "Exit" button 36pt trailing

Input Fields

Search Input (Expanded)

• Background: #FFFFFF with 1pt #DADCE0 bottom border inside a scroll container
• Height: 56pt
• Leading: 20pt back chevron #5F6368
• Placeholder: "Search Google Maps", Google Sans 16pt w400 #5F6368
• Trailing: 20pt voice-mic + 20pt clear (X) when text present
• Text color: #202124

Saved Place Row

• Height: 56pt
• Leading: 40pt colored icon circle (Home = blue house, Work = blue briefcase, custom = green bookmark)
• Title: Roboto 16pt w500 #202124
• Subtitle: Roboto 13pt w400 #5F6368 address
• Trailing: 16pt chevron #80868B

Distinctive Components

Location Dot

• Inner dot: 12pt solid #4285F4
• White stroke ring: 3pt white around the blue dot
• Accuracy circle: 60-200pt radius (depends on GPS accuracy), rgba(66,133,244,0.18) fill with rgba(66,133,244,0.4) 1pt outline
• Heading cone (when compass active): 40pt translucent blue triangle wedge emanating outward from the dot
• Gentle pulse: scale 1.0 → 1.15 → 1.0 over 1.8s infinite (subtle, not attention-grabbing)

Map Pin (Dropped Place)

• Red Default: 32×40pt tear-drop shape, #EA4335 fill with 3pt white inner circle, bottom-point anchored at coordinate
• Green Saved: same shape, #34A853 fill
• Blue Home/Work: same shape with building/house glyph in white
• Orange Category: same shape with category glyph (fork, gas, bed) in white
• Drop animation: 0.35s spring with bounce, shadow grows with the pin
• Ground shadow: rgba(0,0,0,0.25) 0 4px 6px, 28×8pt ellipse below

Route Polyline

• Width: 5pt
• Color: #4285F4 fill
• Casing: 1.5pt #174EA6 outline
• Endcaps: rounded
• Traveled portion during navigation: 40% opacity
• Traffic overlay: red/orange/green segments drawn on top at 3pt width

Distance Label

• Appears at route apex midpoint during search
• Pill: white background with 1pt #DADCE0 border
• Text: "18 mi" in Roboto 13pt w500 #202124
• Padding: 4pt vertical, 10pt horizontal
• Shadow: rgba(0,0,0,0.1) 0 1px 3px

Pegman / Street View Chip

• Draggable orange-yellow Pegman figure bottom-right
• Background: #FB8C00
• Size: 40pt circle with miniature person silhouette
• Triggered by drag: blue highlights appear on streets with Street View coverage

Category Chip Row

• Horizontal scroll directly below top search bar
• 10 chips: Restaurants, Coffee, Gas, Hotels, Groceries, Shopping, Things to do, More
• Gap: 8pt between chips
• Scrolls to the right with the last chip peek-visible

Speed Chip (Navigation)

• Bottom-left corner in nav mode
• 56pt circle
• Background: #FFFFFF light / #3C4043 dark
• Current MPH number in Roboto 22pt w500
• "mph" label in Roboto 11pt w400 #5F6368
• Turns red with white text when over limit

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 32, 40, 56, 72
• Map-relative margins: 16pt from screen edges for floating controls and search bar
• Sheet internal: 16pt horizontal, 20pt top (below grabber), 24pt bottom above safe area
• Gaps inside place sheet: 16pt between sections, 12pt between action buttons

Grid & Container

• Map: full viewport, edge-to-edge, underneath Dynamic Island and status bar
• Floating search bar: 16pt horizontal margin, pill shape
• Category chip row: starts 16pt below search bar, peek-edge right side
• Bottom sheet: full-width, attached bottom, floats with 16pt top radius
• Map controls: stacked trailing edge, 16pt from edge, offset above current sheet detent

Whitespace Philosophy

• Map is king: 60-85% of viewport, always. The UI exists to yield to geography.
• Pills and sheets don't touch: 16pt between any two floating elements to preserve map breathability.
• Place cards breathe: 16pt padding inside, 24pt between sections.
• Turn cards are dense by necessity: navigation mode's UI is denser to fit every detail needed at speed.

Border Radius Scale

• Square (0pt): Map tiles (they are the geometry itself)
• Soft (8pt): Inline badges, small status pills
• Standard (12pt): Place thumbnails, photo tiles, inner card surfaces
• Comfortable (16pt): Bottom sheet top, turn cards, ETA card
• Pill (18-24pt): Chips, secondary buttons, primary pill CTAs
• Full Pill (full): Top floating search bar, category chips
• Circle (50%): FAB, location dot, avatar, map controls

6. Depth & Elevation

Shadow Philosophy: Because every piece of UI sits on top of a textured, colored map, shadows need to separate "UI plane" from "map plane" without overpowering the geography. A 15% black shadow at 8pt blur reads cleanly against both park-green and ocean-blue tiles. The FAB's shadow is the most aggressive (20% / 12pt) because the button is the primary action and must lift cleanly above any terrain. Map pins get a ground-hugging ellipse shadow instead of a drop — this is what makes them feel dropped into the world rather than placed on a canvas.

Motion

• Pin drop: 0.35s spring with overshoot 1.1 → 1.0, shadow scales up with pin, medium haptic
• Search bar expand to full screen: 0.28s ease-out, pill morphs into full-width search panel with list fade-in
• Bottom sheet detent change: 0.35s spring, damping 0.85 — snaps cleanly between collapsed/medium/expanded
• FAB press: scale 0.95 → 1.0 spring (damping 0.7), paired with .impactOccurred(.medium) haptic
• Route draw on start: polyline traces from origin to destination over 600ms ease-out, then camera pans to follow
• Location dot pulse: continuous 1.8s ease-in-out scale 1.0 → 1.15 → 1.0
• Turn card swap: slides up from below, previous card fades to 0, 300ms ease-in-out, light haptic on arrival at each turn
• Camera flyTo on recenter: 0.6s ease-in-out, no haptic (soft action)
• Traffic overlay fade-in: 400ms ease-out as traffic data loads
• Dark mode cross-fade: map tiles cross-fade over 1.2s on system theme toggle

7. Do's and Don'ts

Do

• Keep the map at 60%+ of viewport on every primary screen — it's the product
• Use Google Blue (#4285F4) for the route polyline, location dot, and Directions FAB
• Float the top search bar as a pill with 16pt margins and a soft shadow
• Render the bottom sheet with 16pt top corners, visible grabber, three detents
• Use the four-color pin system: Red default, Green saved, Blue home/work, Orange category
• Use Google Sans for titles and CTAs, Roboto for body and metadata (tabular numerals on data)
• Display traffic as colored overlay on the route: red heavy, orange slow, green clear
• Trigger medium haptic on pin drop and "Start navigation"; light haptic on tab change
• Show the accuracy circle around the location dot — it's the trust signal
• Use #202124 canvas in dark mode with the dark-map tile palette

Don't

• Don't color the map itself with brand colors — the map uses its own tile palette
• Don't round map pins heavily — the tear-drop shape with 3pt white inner dot is the silhouette
• Don't drop pin shadows — use a ground-hugging ellipse for on-world feel
• Don't animate the map aggressively — camera moves are 0.3-0.6s ease, never snap
• Don't stack more than 3 floating map controls trailing edge — it clutters the map
• Don't use red (#EA4335) for generic UI actions — it reads as a pin or destructive
• Don't override tabular numerals for distances — columns must align
• Don't hide the bottom sheet when a route is active — the ETA card must remain visible
• Don't center-align body text in place cards — Maps content is left-aligned (LTR)
• Don't introduce new accent colors — the four Google logo colors each have a job already

8. Responsive Behavior

Device Sizes

Dynamic Type

• Place titles, addresses, row titles: full scale
• Navigation turn instruction: scales to 48pt max
• Distance/ETA labels: fixed size (layout-sensitive)
• Speed chip: fixed size
• Tab labels: scale up to 13pt, then truncate

Orientation

• Explore / Saved / Updates: portrait-locked
• Navigation mode: rotates to landscape — turn card moves to top, ETA to bottom-right, map expands horizontally
• Street View: rotates freely — 360° horizontal pan works best with device orientation

Touch Targets

• Directions FAB: 56pt (hero action)
• Top search bar: 48pt tall, full-row tappable
• Category chips: 36pt tall with 44pt effective hit
• Map pins: 40pt hit area despite 32pt visual
• Map controls: 40pt visible, 44pt hit
• Tab bar icons: 24pt icon inside 44pt hit

Safe Area Handling

• Top: search bar floats 8pt below safe area top
• Bottom: sheet extends to home indicator; content padded 24pt above indicator
• Dynamic Island: search bar sits 8pt below the island bottom edge
• Sides: map edge-to-edge; floating controls 16pt inset

9. Agent Prompt Guide

Quick Color Reference

• Canvas (light): #FFFFFF
• Canvas (dark): #202124
• Surface muted: #F1F3F4
• Divider: #DADCE0
• Text primary: #202124
• Text secondary: #5F6368
• Google Blue (route, FAB, location): #4285F4
• Blue pressed: #1A73E8
• Pin Red (default): #EA4335
• Pin Green (saved): #34A853
• Pin Orange (category): #FB8C00
• Rating Yellow: #FBBC04
• Map road: #FFFFFF
• Map highway: #FDF6E3
• Map water: #AADAFF
• Map park: #C8E6C9
• Map building: #F0F0F0

Example Component Prompts

• "Create a SwiftUI Google Maps top search bar: floats 8pt below safe area with 16pt horizontal margins, 48pt tall pill (full corner radius), #FFFFFF background, rgba(0,0,0,0.15) 0 2px 8px shadow. Leading 28pt circular profile avatar, center placeholder 'Search here' in Google Sans 16pt w400 #5F6368, trailing 24pt microphone icon in #5F6368. Tap expands to full-screen search."
• "Build the Directions FAB: 56pt circle floating 16pt from trailing/bottom edges over the map, #4285F4 background, 24pt white directional arrow SF Symbol arrow.triangle.turn.up.right.diamond.fill. Shadow rgba(0,0,0,0.2) 0 4px 12px. Pressed: scale 0.95, background #1A73E8, medium haptic."
• "Design the Your Location dot: 12pt solid #4285F4 inner dot with 3pt white stroke ring, translucent rgba(66,133,244,0.18) accuracy circle 120pt radius around it with 1pt rgba(66,133,244,0.4) outline, 40pt heading cone triangle emanating outward from the dot when compass is active. Gentle pulse 1.0 → 1.15 → 1.0 over 1.8s."
• "Create a place bottom sheet: anchored to bottom, 3 detents (140pt / 380pt / near-full), 16pt top corner radius, #FFFFFF background, rgba(0,0,0,0.12) 0 -4px 20px shadow. 32×4pt #DADCE0 grabber centered 8pt from top. Inside: 72pt photo thumbnail leading, place title 'Blue Bottle Coffee' in Google Sans 20pt w500, rating '4.5' + 4.5 gold stars in #FBBC04 + '(2,345)' in Roboto 14pt, category 'Coffee shop · $$ · 1.2 mi', green 'Open now' pill. Action row: blue 44pt Directions pill + Save + Share + Call."
• "Build the navigation turn card: anchored at top below safe area with 16pt margins, #4285F4 background, 16pt corner radius, shadow rgba(0,0,0,0.2) 0 4px 16px. Leading 48pt white turn arrow glyph, turn instruction 'Turn right onto Main St' in Google Sans 22pt w700 white, distance 'in 0.3 mi' in Roboto 14pt w400 white 70% opacity below. Smaller next-turn preview '32pt arrow + Then left onto Oak Ave' at 14pt below."
• "Design a category chip row: horizontal scroll directly below the search bar with 16pt leading inset and 8pt between chips. Each chip: 36pt tall pill with #FFFFFF background, 1pt #DADCE0 border, 16pt colored category glyph leading, 'Restaurants' label in Google Sans 14pt w500 #202124, 14pt horizontal padding. Active state: background #E8F0FE, border #4285F4, text #1967D2."

Iteration Guide

1. The map owns 60%+ of the viewport on every primary screen — UI is layered, never stacked below
2. Google Blue (#4285F4) is the operating accent — route, location dot, Directions FAB
3. Four pin colors, four jobs: Red default, Green saved, Blue home/work, Orange category
4. Google Sans for titles, Roboto for body and metadata; Roboto tabular numerals for all data
5. Bottom sheet has 16pt top corners with a visible 32×4pt #DADCE0 grabber — the drag-to-expand contract
6. Float the search bar as a pill with a soft shadow; keep 16pt margins to the screen edges
7. Turn cards in nav mode use #4285F4 background and 22pt bold white text — the only display moment
8. Location dot's accuracy halo is the trust signal — always render it with rgba(66,133,244,0.18) fill
9. Dark mode uses #202124 canvas (not pure black) to match the dark map tile palette