designmd-forge 1.2.0

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

@@ -0,0 +1,402 @@
+# Design System Inspiration of Life360 (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Life360's iOS app is a **map-first family safety app**, and almost everything about its design serves one job: let a parent open the app and instantly see where everyone is. The home screen is a full-bleed interactive map. There is no feed, no dashboard, no list to scroll first — you launch the app and you are looking at a map of your family, with each person represented by a circular photo pin dropped on their real location. The atmosphere is "reassuring control": a calm violet brand, warm member colors, soft rounded surfaces, and a deliberately un-alarming tone that only turns urgent (red) for genuine safety events.
+
+The spine of the app is the **family map**. A dark-styled map fills the screen; member pins (a circular avatar in a white ring with a downward pointer) sit on each person's location; tapping a pin or rising the bottom sheet reveals a member list with name, current place, "X min ago," and battery. A floating **Circle selector** pill sits at the top ("The Carters ▾") because Life360 organizes families into "Circles" — a household is one Circle, the kids' carpool might be another. A draggable **bottom member sheet** lists everyone with their status. This map + circle-selector + member-sheet trio is the entire core experience; Places, Driving, and Safety are secondary tabs that all refer back to it.
+
+The single most important design rule is **member identity color**. Every person in a Circle is assigned a fixed color (amber, teal, pink, blue, purple, etc.). That color is *the same everywhere that person appears*: their map pin ring, their avatar in the member sheet, their trail/breadcrumb line, their entry in driving reports, their detail screen header. A parent doesn't read names on a busy map — they recognize "the teal one is Jordan." This consistent per-member hue is to Life360 what the method-color is to a developer tool: the primary information channel.
+
+The brand color is **Life360 Purple** — a deep violet (`#582C83`) and its lighter UI tint (`#7E57C2`). It is the brand spine: the Circle selector, Place geofence circles, primary buttons, the active tab, the logo. It is *not* a member color and never used to represent a person. Safety semantics get two reserved colors: **Safe green** (`#34C759`) for "at a safe Place / arrived safely" and **SOS / Alert red** (`#FF6B6B`) for emergency, crash detection, and "left a Place" alerts. Red is rationed hard — the app's emotional design depends on red meaning *something is actually wrong*.
+
+The map itself is dark-styled at night: a deep base (`#1A2138`), muted desaturated roads (`#2C3654`), darkened parks (`#1B3A2E`) and water (`#16314A`). This keeps the colorful member pins as the brightest, most salient thing on screen — exactly where attention should go. The night canvas behind chrome is a violet-tinted near-black (`#161325`).
+
+Typography is a friendly, rounded-humanist sans (Life360's brand face is custom; **Plus Jakarta Sans** is the closest free analog) — approachable and legible, never corporate-cold. Hierarchy is simple: a bold 32pt Circle/screen title, member names at 18pt bold, place/status text at 13–15pt, body at 16pt. Weights stay in the 400–800 range with member names and CTAs bold to feel confident and reassuring.
+
+**Key Characteristics:**
+- Map-first home screen — full-bleed dark-styled map, no feed/list before it
+- Member identity color — each person has a fixed hue used on pin + avatar + trail + reports, everywhere
+- Circle selector pill — top-floating "The Carters ▾"; families are organized into Circles
+- Member pins — circular avatar in a 3pt white ring with a downward pointer, dropped on the map
+- Draggable member sheet — bottom sheet listing name + place + "X min ago" + battery
+- Life360 Purple (`#582C83`/`#7E57C2`) — brand spine (Circle UI, Places, CTAs), never a member color
+- Places & geofences — translucent purple circles on the map; arrive/leave alerts
+- Safety colors reserved — Safe green `#34C759`, SOS/Alert red `#FF6B6B`, rationed hard
+- Battery on every member row — green when healthy, red when low (a core safety signal)
+- Rounded, reassuring surfaces — large 22–28pt radii, soft shadows, calm violet night canvas
+
+## 2. Color Palette & Roles
+
+### Primary (Brand — never a member color)
+- **Life360 Purple** (`#582C83`): Core brand violet — logo, deep-fill accents, Place geofence stroke base.
+- **Purple Light** (`#7E57C2`): The UI working tint — Circle selector accent, primary buttons, active tab, geofence fill.
+- **Purple Bright** (`#8B5CF6`): Emphasis / highlighted selection, focused states.
+- **Purple Pressed** (`#4A2470`): Pressed state of purple CTAs.
+
+### Canvas & Surfaces (Dark — default)
+- **Night Canvas** (`#161325`): Violet-tinted near-black behind chrome/sheets.
+- **Surface 1** (`#1F1B33`): Cards, the Circle selector pill, popovers.
+- **Surface 2** (`#2A2542`): Pressed rows, secondary chips, icon-button fills.
+- **Sheet** (`#211D36`): The bottom member sheet and tab bar background.
+- **Divider** (`#332E4D`): Hairline separators.
+- **Border** (`#3D3759`): Pill/card borders, input borders.
+
+### Map Palette (dark-styled — keeps member pins salient)
+- **Map Base** (`#1A2138`): The map background.
+- **Map Road** (`#2C3654`): Roads (desaturated, recede).
+- **Map Park** (`#1B3A2E`): Parks / green space (darkened).
+- **Map Water** (`#16314A`): Water bodies (darkened).
+- **Map Label** (`#7E7A99`): Street/place labels on the map (low-emphasis).
+
+### Canvas & Surfaces (Light)
+- **Canvas White** (`#FFFFFF`): Light chrome/sheets.
+- **Surface Gray** (`#F5F3FA`): Cards, Circle pill.
+- **Map Base Light** (`#EDEFF5`): Day-styled map base.
+- **Divider Light** (`#E6E3F0`): Hairline separators.
+
+### Text
+- **Text Primary Dark** (`#ECEAF5`): Primary text & member names on dark.
+- **Text Secondary Dark** (`#A6A0C2`): Place text, "X min ago," metadata.
+- **Text Tertiary Dark** (`#6F6990`): Disabled, low-emphasis, inactive tab.
+- **Text Primary Light** (`#1C1830`): Primary text on light.
+- **Text Secondary Light** (`#6F6990`): Metadata on light.
+
+### Member Identity Colors (the semantic core)
+Assigned per person, fixed for that person everywhere (pin ring, avatar, trail, reports, detail header). A Circle cycles through these in join order.
+
+| Slot | Color | Use |
+|------|-------|-----|
+| Member Amber | `#F2A33C` | Member 1 identity |
+| Member Teal | `#2DD4BF` | Member 2 identity |
+| Member Pink | `#F472B6` | Member 3 identity |
+| Member Blue | `#60A5FA` | Member 4 identity |
+| Member Purple | `#7E57C2` | Member 5 identity (note: brand purple may be reserved — prefer a violet that reads distinct) |
+| Member Coral | `#FB7185` | Member 6 identity |
+| Member Lime | `#A3E635` | Member 7 identity |
+| Member Sky | `#38BDF8` | Member 8 identity |
+
+### Safety Semantic (reserved — rationed hard)
+- **Safe Green** (`#34C759`): At a safe Place, arrived safely, healthy battery, "all good."
+- **SOS / Alert Red** (`#FF6B6B`): Emergency SOS, Crash Detection, low battery, "left a Place" alert.
+- **Warning Amber** (`#FFB020`): Driving event (hard brake / speeding), attention-needed.
+- **Info Purple** (`#7E57C2`): Place arrival/neutral notifications (brand-tinted, non-urgent).
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Plus Jakarta Sans` (by Tokotype, SIL OFL) — the closest free analog to Life360's friendly rounded-humanist brand sans; warm, approachable, legible at small sizes on a map.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Not user-switchable**: a single brand face throughout.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Plus Jakarta Sans | 32pt | 800 | 1.15 | -0.5pt | Circle name / screen title |
+| Title | Plus Jakarta Sans | 26pt | 700 | 1.2 | -0.3pt | "Family Map", section headers |
+| Section | Plus Jakarta Sans | 22pt | 700 | 1.25 | -0.2pt | "Today's Driving", "Places" |
+| Member Name | Plus Jakarta Sans | 18pt | 700 | 1.3 | -0.1pt | Member sheet & detail header name |
+| Body | Plus Jakarta Sans | 16pt | 400 | 1.5 | 0pt | Notification copy, descriptions |
+| Row Title | Plus Jakarta Sans | 15pt | 600 | 1.35 | 0pt | "At Home · 2 min ago" |
+| Place / Status | Plus Jakarta Sans | 13pt | 600 | 1.3 | 0pt | "Driving · 28 mph", place subtitle |
+| Meta | Plus Jakarta Sans | 14pt | 400 | 1.4 | 0pt | "Last updated just now" |
+| Caption | Plus Jakarta Sans | 12pt | 600 | 1.3 | 0.4pt | "PLACE ALERT" eyebrow (uppercase) |
+| Pin Initial | Plus Jakarta Sans | 16pt | 700 | 1.0 | 0pt | Letter inside an avatar-less pin |
+| Tab Label | Plus Jakarta Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
+| Button | Plus Jakarta Sans | 15pt | 700 | 1.0 | 0pt | Primary CTAs |
+| SOS Label | Plus Jakarta Sans | 15pt | 800 | 1.0 | 0.5pt | The SOS button text |
+
+### Principles
+- **Friendly, not corporate**: the rounded-humanist face and bold member names keep the tone reassuring — this is an app a worried parent opens.
+- **Member names are always bold (700)**: the person is the subject; their name leads every row at weight 700 in their context.
+- **Status is concise & secondary**: place/speed/time in 13–15pt secondary color — informative, never shouting.
+- **Weights 400 / 600 / 700 / 800**: body 400, row/status 600, names/headings 700, display & SOS 800. No thin.
+- **Uppercase only for tiny eyebrows**: "PLACE ALERT", "SOS ACTIVATED" at 12pt +0.4pt tracking. Never uppercase body.
+- **Dynamic Type**: scale display/title/section/body/member-name; keep pin initials, tab labels, and map labels fixed (map-layout-sensitive).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Add a Place / Save / Invite)**
+- Shape: Pill, 28pt corner radius (fully rounded for tall buttons)
+- Background: `#7E57C2` (Purple Light)
+- Text: `#FFFFFF`, Plus Jakarta Sans 15pt weight 700
+- Padding: 14pt vertical, 26pt horizontal
+- Pressed: background `#4A2470` + scale 0.98
+- Disabled: background `#2A2542`, text `#6F6990`
+
+**Secondary Button (Check In / Cancel)**
+- Background: `#2A2542` dark / `#F5F3FA` light
+- Text: `#ECEAF5` dark / `#1C1830` light, weight 600
+- Border: 1pt `#3D3759`
+- Padding: 12pt vertical, 22pt horizontal, 24pt radius
+- Pressed: background `#1F1B33`
+
+**SOS Button (emergency)**
+- Background: `#FF6B6B` (Alert Red)
+- Text: `#FFFFFF`, Plus Jakarta Sans 15pt weight 800, +0.5pt tracking
+- Padding: 14pt vertical, 26pt horizontal, 28pt radius
+- Press behavior: press-and-hold with a radial fill progress ring; haptic ramp; releases an emergency flow
+- The ONLY large red surface in the app — reserved for genuine emergency
+
+**Text Button (Invite Members / link action)**
+- Background: none
+- Text: `#7E57C2`, Plus Jakarta Sans 14pt weight 700
+- No underline; subtle opacity dip on press
+
+**Icon Button (bell / map controls)**
+- 30pt circle, `#2A2542` fill, 15pt glyph `#ECEAF5`
+- Pressed: fill `#1F1B33`
+
+### Core Atoms
+
+**Member Pin (the atomic Life360 element)**
+- A circular avatar (member photo) inside a 3pt solid `#FFFFFF` ring, 46pt diameter
+- A downward triangular pointer (8pt) at the bottom anchoring it to the map point
+- The ring is white; the *avatar background* (when no photo) is the member's identity color with their initial in white 16pt 700
+- Soft drop shadow `rgba(0,0,0,0.5) 0 4px 12px` so it lifts off the dark map
+- Selected: ring grows to 4pt + a subtle member-color glow halo
+
+**Member Sheet Row**
+- Leading 42pt avatar circle in the member's identity color (initial or photo)
+- `m-info`: member name (18pt 700 `#ECEAF5`) + place/status line (13–15pt 600 `#A6A0C2`) with a small place/clock glyph
+- Trailing battery indicator: a 22×11pt battery glyph + percentage; green `#34C759` when healthy, red `#FF6B6B` when low (≤20%)
+- Full-row tap → that member's detail; row height ≥ 62pt
+
+**Circle Selector Pill**
+- Top-floating, `rgba(31,27,51,0.92)` with `backdrop-filter: blur(16px)`, 1pt `#3D3759`, 999pt radius
+- Circle name (15pt 700) + chevron ▾ (tap → Circle switcher sheet)
+- Trailing notification bell (30pt icon button), badge dot in `#FF6B6B` if unread alerts
+
+**Place / Geofence**
+- On the map: a translucent circle, fill `rgba(126,87,194,0.16)`, stroke 2pt `rgba(126,87,194,0.55)`
+- A small place tag pill near it: `#1F1B33`, 1pt `#3D3759`, 999pt, leading emoji (🏠 / 🏫 / 🏢) + place name 11pt 700
+
+**Status / Place Chip**
+- Pill, 7pt dot + label, 12.5pt 700
+- Safe: text `#34C759`, fill `rgba(52,199,89,0.14)`
+- Place (neutral): text `#7E57C2`, fill `rgba(126,87,194,0.16)`
+- Alert: text `#FF6B6B`, fill `rgba(255,107,107,0.14)`
+
+**Card / Sheet**
+- `#1F1B33`/`#211D36`, 16–22pt radius, soft shadow `rgba(0,0,0,0.4–0.5)`
+
+### Navigation
+
+**Bottom Tab Bar**
+- Height: 50pt + safe area
+- Background: `#211D36`, 0.5pt top border `#332E4D`
+- Tabs (4): Map, Places, Driving, Safety
+- Icon size: 21pt, 2pt stroke
+- Active: `#7E57C2` (Purple Light) / Inactive: `#6F6990`
+- Labels: Plus Jakarta Sans 10pt 600, always shown
+
+**Bottom Member Sheet (draggable)**
+- Detents: collapsed (peek showing ~2 rows), half, full
+- `#211D36`, 22pt top radius, 38×4pt grabber, `rgba(0,0,0,0.5) 0 -8px 30px` shadow
+- Drags with 1:1 finger tracking; snaps to nearest detent with spring damping 0.85
+
+**Member Detail (push)**
+- Header band tinted with the member's identity color (subtle gradient), large avatar, name (26pt 700)
+- Tabs: Location · History · Driving · Battery
+- Map snippet with their breadcrumb trail in their identity color
+
+### Input Fields
+
+**Search Place / Address Field**
+- Height: 44pt, `#1F1B33`, 1pt `#3D3759`, 24pt radius
+- Leading 16pt magnifier `#6F6990`, text 15pt `#ECEAF5`
+- Focus: border `#7E57C2` + 2pt `rgba(126,87,194,0.4)` ring
+- Placeholder "Search for a place" `#6F6990`
+
+**Place Name Field**
+- 44pt, `#1F1B33`, 1pt `#3D3759`, 16pt radius
+- Leading emoji picker chip (tap to pick 🏠/🏫/🏢/⭐)
+
+**Circle Invite Code Field**
+- Segmented 6-cell code input, each cell `#2A2542` 12pt radius; active cell border `#7E57C2`
+
+### Distinctive Components
+
+**Member Pin + Identity Color**
+- The atomic element and the brand's core idea: a person *is* their color on the map. See Core Atoms.
+
+**Family Map**
+- Dark-styled map (`#1A2138` base, muted roads/parks/water) so member pins are the brightest objects; pinch/pan; auto-frames all members.
+
+**Circle Switcher**
+- Sheet listing all the user's Circles (Household, Carpool, etc.), each with member avatar stack + member count; tap to switch the whole map context.
+
+**Place Geofence + Alerts**
+- Translucent purple circle on the map; arriving/leaving fires a notification ("Jordan arrived at School"); Safe-green for arrivals, Alert-red for unexpected departures.
+
+**Battery Status Row**
+- Every member row shows battery — a deliberate safety affordance (a dead phone = lost visibility). Green healthy, red ≤20%.
+
+**Driving Report Card**
+- Per-trip card: route mini-map with the member's identity-color trail, distance/duration, and event chips (Hard Brake amber, Speeding amber, Phone Usage). Weekly summary score.
+
+**SOS / Emergency Flow**
+- Press-and-hold SOS button with a radial fill + haptic ramp; on trigger, alerts Circle + (Premium) dispatch; full-screen red confirmation. The only place red dominates.
+
+**Breadcrumb Trail**
+- A member's recent path drawn as a line in *their* identity color with timestamped dots — instantly attributable without a legend.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40, 48
+- Member-sheet row padding: 10pt vertical / 18pt horizontal; row gap implicit via padding
+- Floating chrome inset from edges: 16pt
+- Section gap inside sheets: 20–24pt
+
+### Grid & Container
+- iPhone: the map is full-bleed (edge to edge, behind the status bar); all UI floats over it (Circle pill top, member sheet bottom)
+- iPad: optional split — map (left/main) + a persistent member list panel (right ~340pt)
+- Member sheet content is single-column rows; detail screens use a centered max-width
+
+### Whitespace Philosophy
+- **The map is the whitespace**: the dark map *is* the canvas; chrome floats over it and is kept minimal so the map breathes
+- **Color over labels**: member identity hues do navigational work — the eye finds a person by color, so the map needs few text labels
+- **Calm density**: the member sheet is information-rich (name + place + time + battery) but rows are tall and softly separated to stay reassuring, not busy
+- **Red is whitespace-protected**: nothing red appears unless it's a real safety event — its rarity is part of the layout's emotional logic
+
+### Border Radius Scale
+- Square (0pt): the full-bleed map
+- Standard (8pt): small inner chips, segmented cells
+- Card (12pt): nested cards, list cards
+- Comfortable (16pt): place fields, inner panels
+- Sheet (22pt): the bottom member sheet, large sheets
+- Pill / Button (28pt): primary & SOS buttons (tall pills)
+- Pill (500pt): chips, the Circle selector, place tags
+- Circle (50%): member pins, avatars, icon buttons
+
+## 6. Depth & Elevation
+
+Life360 uses real, soft elevation — chrome must visibly float above the map.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Map (Level 0) | The dark map itself, no shadow | Background canvas |
+| Pin (Level 1) | `rgba(0,0,0,0.5) 0 4px 12px` | Member pins, place tags lifting off the map |
+| Floating (Level 2) | `rgba(0,0,0,0.45) 0 6px 20px` + blur | Circle selector pill, map control buttons |
+| Sheet (Level 3) | `rgba(0,0,0,0.5) 0 -8px 30px` | Bottom member sheet, Circle switcher, modals |
+| Emergency Overlay | Full-screen `#FF6B6B`-tinted scrim | SOS activated confirmation |
+
+**Shadow Philosophy**: Unlike flat developer tools, Life360 *needs* depth — a member pin or the member sheet must read as "above the map," because the map is a literal spatial plane. Shadows are soft and dark (0.45–0.5 opacity, large blur) to register over the dark map without harsh edges. Floating chrome (Circle pill, controls) also uses a backdrop blur so the map shows through faintly, reinforcing "this hovers over your family's location." The map itself never casts or receives shadow — it is the ground.
+
+### Motion
+- **Pin movement**: when a member's location updates, their pin animates along the path (not teleport) over ~600ms ease-in-out; the pin does a subtle scale 1.0→1.08→1.0 "pulse" on update
+- **Map auto-frame**: on open or "recenter," the map eases (400ms) to fit all member pins with padding
+- **Member sheet drag**: 1:1 finger tracking; release snaps to nearest detent with `spring(response: 0.3, damping: 0.85)`
+- **Pin tap → focus**: tapping a pin eases the map to center it (350ms) and expands the sheet to that member; the pin ring grows + member-color glow
+- **Geofence entry**: the place circle does a soft 1-pulse ripple (scale 1.0→1.06, fade) when a member enters; arrival toast slides down
+- **SOS press**: press-and-hold draws a radial fill over ~1.5s with a haptic intensity ramp; release before complete cancels with a quick spring-back
+- **Tab switch**: cross-fade content 200ms; the map persists underneath when switching to/from Map
+- **Breadcrumb draw**: a trail animates in by drawing the polyline head-to-tail over ~500ms in the member's color
+- **Haptics**: soft impact on sheet detent snap; selection tick on pin tap; escalating haptic during SOS hold; warning haptic on a new Alert-red notification
+
+## 7. Do's and Don'ts
+
+### Do
+- Make the home screen a full-bleed dark-styled map — no feed/list before it
+- Give every member a fixed identity color and use it everywhere they appear (pin, avatar, trail, reports)
+- Use Life360 Purple (`#582C83`/`#7E57C2`) for brand/Circle/Places/CTAs — never to represent a person
+- Style the map dark (`#1A2138` base, muted roads/parks/water) so member pins are the brightest objects
+- Render member pins as a photo in a 3pt white ring with a downward pointer + soft shadow
+- Show battery on every member row — it is a core safety signal (green healthy / red low)
+- Reserve Safe green `#34C759` and SOS/Alert red `#FF6B6B` strictly for safety state — ration red hard
+- Draw Place geofences as translucent purple circles with a place-emoji tag
+- Float chrome over the map with soft dark shadows + backdrop blur
+- Animate pin movement along a path (never teleport) and auto-frame all members
+
+### Don't
+- Don't open to a feed, dashboard, or list — the map is the home screen
+- Don't reuse a member's color for another member, or use the brand purple as a member color
+- Don't let red appear for non-safety events — its rarity is the emotional design
+- Don't use a bright/day map style by default at night — colored pins must stay the most salient thing
+- Don't flatten the pins or sheet — Life360 needs real soft elevation (it's a spatial plane)
+- Don't drop the battery indicator from member rows — a dead phone is a safety event
+- Don't make the SOS button a normal tap — it's press-and-hold with a fill + haptic ramp
+- Don't label every pin with text — color is how members are identified; keep the map clean
+- Don't use cold/corporate type — the face is friendly rounded-humanist, names are bold and warm
+- Don't teleport pins on location update — animate along the path with a gentle pulse
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Member-sheet peek shows ~1.5 rows; Circle pill text truncates |
+| iPhone 13/14/15 | 390pt | Standard map + floating chrome |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; Circle pill sits below it |
+| iPhone 15/16 Pro Max | 430pt | Larger pins (50pt); sheet peek shows ~2.5 rows |
+| iPad (portrait) | 768pt | Map + bottom sheet, wider pins; place fields centered |
+| iPad (landscape) | 1024pt+ | Split: full-bleed map + persistent right member panel (~340pt) |
+
+### Dynamic Type
+- Display, Title, Section, Member Name, Body, Row Title: full scale
+- Pin initials, tab labels, map labels, place-tag text: FIXED (map-layout-sensitive)
+- Member-sheet rows grow row height to fit scaled name/status text
+
+### Orientation
+- Map and sheet support rotation; sheet detents recompute for landscape
+- iPad landscape uses the split map + member-panel layout
+- The map auto-reframes members on rotation
+
+### Touch Targets
+- Member pin: ≥46pt tap (the visible bubble)
+- Member sheet row: full-row tap, ≥62pt tall
+- Circle selector pill: ≥40pt tall, full-pill tap
+- Tab bar icons: 21pt glyph, 44pt hit
+- SOS button: ≥52pt tall, press-and-hold (not a quick tap)
+
+### Safe Area Handling
+- Top: the Circle selector pill sits below the safe area / Dynamic Island; the map extends behind it
+- Bottom: the member sheet and tab bar respect the home indicator; sheet detents are computed from the safe area
+- The map is full-bleed (extends under status bar and home indicator) — only chrome respects insets
+- Keyboard: place-search field lifts above the keyboard; the sheet expands to accommodate
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Night canvas (dark): `#161325` / light `#FFFFFF`
+- Surface 1 (cards/pill): `#1F1B33`
+- Sheet / tab bar: `#211D36`
+- Map base: `#1A2138` (road `#2C3654`, park `#1B3A2E`, water `#16314A`)
+- Divider / border: `#332E4D` / `#3D3759`
+- Text primary: `#ECEAF5` dark / `#1C1830` light
+- Text secondary: `#A6A0C2`
+- Brand — Life360 Purple `#582C83`, Purple Light `#7E57C2`, Bright `#8B5CF6`
+- Member colors: amber `#F2A33C`, teal `#2DD4BF`, pink `#F472B6`, blue `#60A5FA`, coral `#FB7185`
+- Safe green `#34C759` · SOS/Alert red `#FF6B6B` · Warning amber `#FFB020`
+
+### Example Component Prompts
+- "Build the Life360 member pin in SwiftUI: a 46pt circle with the member's photo (or their identity color + white initial in Plus Jakarta Sans 16pt w700), wrapped in a 3pt solid white ring, with a downward 8pt triangular pointer below it anchoring it to the map point. Soft shadow `rgba(0,0,0,0.5) 0 4px 12px`. On selection, grow the ring to 4pt and add a faint glow halo in the member's identity color. The identity color is fixed for that person everywhere they appear."
+
+- "Create the Life360 member sheet row: leading 42pt avatar circle filled with the member's identity color (initial or photo), then a column with the member name in Plus Jakarta Sans 18pt w700 `#ECEAF5` and a place/status line in 13–15pt w600 `#A6A0C2` with a small pin/clock glyph, then a trailing battery indicator (a 22×11pt battery glyph + percentage; green `#34C759` if >20%, red `#FF6B6B` if ≤20%). Row ≥62pt tall, full-row tap. Sheet background `#211D36`."
+
+- "Render the Life360 Circle selector pill: top-floating, `rgba(31,27,51,0.92)` with a 16pt backdrop blur, 1pt `#3D3759` border, 999pt radius, sitting below the safe area. Circle name in Plus Jakarta Sans 15pt w700 `#ECEAF5` + a ▾ chevron, and a trailing 30pt bell icon button (`#2A2542` fill) with a `#FF6B6B` badge dot if there are unread alerts."
+
+- "Style the Life360 family map dark: base `#1A2138`, roads `#2C3654`, parks `#1B3A2E`, water `#16314A`, labels `#7E7A99`. The point is to keep the colorful member pins the brightest, most salient objects on screen — never use a bright day style at night."
+
+- "Build a Life360 Place geofence on the map: a translucent circle, fill `rgba(126,87,194,0.16)`, 2pt stroke `rgba(126,87,194,0.55)`, with a small tag pill near it (`#1F1B33` fill, 1pt `#3D3759`, 999pt radius, leading place emoji 🏠/🏫/🏢 + place name in Plus Jakarta Sans 11pt w700). On member entry, do a soft single ripple pulse (scale 1.0→1.06, fade)."
+
+- "Create the Life360 SOS button: a `#FF6B6B` pill, white Plus Jakarta Sans 15pt w800 +0.5pt tracking, 14pt vertical / 26pt horizontal padding, 28pt radius. It is press-and-hold: on hold, draw a radial fill over ~1.5s with an escalating haptic ramp; release before complete springs back and cancels; completion launches the emergency flow. This is the only large red surface in the app."
+
+- "Render the Life360 primary button: `#7E57C2` background, white Plus Jakarta Sans 15pt w700, 14pt vertical / 26pt horizontal padding, 28pt pill radius. Pressed: `#4A2470` + scale 0.98. Purple is the brand spine — never use it to represent a member."
+
+### Iteration Guide
+1. The home screen is a full-bleed, dark-styled map — never a feed or list first
+2. Every member has a FIXED identity color used everywhere they appear (pin ring/avatar, trail, reports, detail) — color is how you find a person
+3. Life360 Purple (`#582C83`/`#7E57C2`) is the brand spine (Circle UI, Places, CTAs) and is NEVER a member color
+4. Member pins = photo in a 3pt white ring + downward pointer + soft shadow, sitting on the dark map
+5. Style the map dark (`#1A2138` base, muted roads/parks/water) so colored pins stay the most salient thing
+6. The draggable bottom member sheet shows name + place + "X min ago" + battery per member
+7. Battery is on every member row — a deliberate safety signal (green healthy / red ≤20%)
+8. Safe green `#34C759` and SOS/Alert red `#FF6B6B` are reserved for safety only — ration red hard
+9. Places are translucent purple geofence circles with a place-emoji tag; arrive/leave fires alerts
+10. Chrome floats over the map with soft dark shadows + backdrop blur; pins animate along paths, never teleport