designmd-forge 1.2.0

package/dist/data/designs/ios-google-maps.md

@@ -0,0 +1,451 @@
+# Design System Inspiration of Google Maps (iOS)
+
+## 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
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Navigation Turn | Google Sans | 36pt | 700 | 1.1 | -0.4pt | "Turn right onto Main St" in driving mode |
+| Screen Title | Google Sans | 28pt | 500 | 1.15 | -0.3pt | "Your places", "Settings" hero |
+| Place Title (Card) | Google Sans | 20pt | 500 | 1.2 | -0.2pt | Place sheet hero title |
+| Section Header | Google Sans | 16pt | 500 | 1.25 | -0.1pt | "Photos", "Reviews", "About" |
+| Row Title | Roboto | 16pt | 500 | 1.3 | 0pt | Search result row title |
+| Body | Roboto | 14pt | 400 | 1.4 | 0pt | Place description, review text |
+| Address | Roboto | 14pt | 400 | 1.35 | 0pt | Street address line, monospaced digits |
+| Meta / Distance | Roboto | 13pt | 400 | 1.3 | 0pt | "1.2 mi · 4 min · Open now" |
+| Rating | Roboto | 14pt | 500 | 1.2 | 0pt | "4.5 ★ (2,345)" — bold rating, lighter count |
+| Category Chip | Google Sans | 14pt | 500 | 1.0 | 0pt | "Restaurants", "Coffee" |
+| Button (Primary) | Google Sans | 16pt | 500 | 1.0 | 0pt | "Directions", "Save" |
+| Button (Secondary) | Google Sans | 14pt | 500 | 1.0 | 0pt | "Call", "Share", "Start" |
+| Tab Label | Google Sans | 11pt | 500 | 1.0 | 0.2pt | Tab bar labels |
+| ETA / Speed | Roboto | 16pt | 500 | 1.0 | 0pt | Navigation ETA, speed chip |
+| Distance Pill | Roboto | 13pt | 500 | 1.0 | 0pt | Map distance labels at route apex |
+
+### 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
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Map tiles, map pins (rely on ground shadow) |
+| Hairline (Level 1) | 1pt `#DADCE0` border | Category chips (default), segmented controls |
+| Floating Pill (Level 2) | `rgba(0,0,0,0.15) 0 2px 8px` | Top search bar, distance labels on map |
+| Floating Control (Level 3) | `rgba(0,0,0,0.15) 0 2px 6px` | Map control buttons (recenter, layers, compass) |
+| FAB (Level 4) | `rgba(0,0,0,0.2) 0 4px 12px` | Directions FAB |
+| Bottom Sheet (Level 5) | `rgba(0,0,0,0.12) 0 -4px 20px` | Bottom drawer for search results and place detail |
+| Turn Card (Level 6) | `rgba(0,0,0,0.2) 0 4px 16px` | Navigation top turn card on blue |
+| Dim Overlay | `rgba(0,0,0,0.5)` | Behind modal sheets (route alternatives) |
+
+**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
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Category chip row fits 4 visible, bottom sheet collapsed 120pt |
+| iPhone 13/14/15 | 390pt | Standard 5 visible chips, 140pt collapsed sheet |
+| iPhone 15/16 Pro | 393pt | Dynamic Island pushes search bar 8pt lower |
+| iPhone 15/16 Pro Max | 430pt | 6 visible chips, turn card scales to 180pt tall in nav mode |
+| iPad | 768pt+ | Map full-bleed; sheet becomes a 420pt floating panel anchored leading side |
+
+### 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