Life360 DESIGN.md

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.

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

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.

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

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