# Design System Inspiration of Turo (iOS)

## 1. Visual Theme & Atmosphere

Turo's iOS app is **Airbnb-for-cars**, and like Airbnb, its design philosophy is that **the photo is the product**. Open any listing and the first thing you see is a full-bleed, edge-to-edge vehicle photo carousel — no card frame, no border, no chrome obscuring it. A 2023 Tesla Model 3 in a sunlit driveway, a Porsche 911 on a coastal road, a Jeep Wrangler at a trailhead: the imagery does the selling, and the entire UI is engineered to get out of its way. Turo is a peer-to-peer car-sharing marketplace — real people (hosts) listing their personal cars to real people (guests) — so trust signals (host profile, All-Star badge, trip count, response time, reviews) are woven through every screen with the same care a hotel app gives star ratings.

The brand is anchored by **Turo Purple** (`#593BFB`), a confident electric violet that is the single booking-action color — "Continue", "Book this car", the selected map pin, the active filter. It is Turo's "Spotify Green": when you see purple, it means *commit*. The counterweight is **Turo Teal** (`#5CE0B8`), a fresh mint that signals **trust and value** — the All-Star Host badge, savings callouts, "Free cancellation", instant-book lightning, the favorite heart. Purple drives the transaction; teal reassures you it's a good, safe one. Together they read as modern, optimistic, and a little premium — Turo is not a budget rental counter, it's a marketplace of interesting cars.

The signature interaction is the **listing detail → booking flow**: a tall photo hero with a paginated carousel, the car's year/make/model in heavy type, a star rating with trip count, a horizontal **specs strip** (fuel type, seats, transmission, doors), a prominent **host card** (avatar, name, All-Star badge, trips, response time), the trip dates/location, and — pinned to the bottom always — a **sticky price + Book bar** showing the daily rate and an estimated total with a single full-width purple CTA. The other signature surface is the **map + photo-card search**: results render as photo-led cards in a list that's twinned with a map of purple price pins, exactly like Airbnb's stays.

Typography is **Turo's brand sans** (a geometric humanist face) with **Manrope** as the open-source fallback for implementation — clean, slightly rounded, excellent at large display sizes for car names and prices. Hierarchy is photo-deferential: titles and prices are heavy (800), but body copy is calm and readable, never competing with the imagery. The dark theme (documented here as the primary catalog rendering) drops to a near-black `#0F0F12` specifically so full-bleed photography reads with maximum punch — the canvas disappears and the cars glow.

**Key Characteristics:**
- **The car photo is the product** — full-bleed, edge-to-edge photo carousel, no card frame on the hero
- **Listing detail → sticky Book bar** — the signature flow: photo hero → specs → host → pinned price + purple CTA
- **Turo Purple `#593BFB`** is the single booking-action color — "Continue", "Book", selected pin, active filter
- **Turo Teal `#5CE0B8`** is the trust/value accent — All-Star Host badge, savings, free cancellation, instant book
- **Host-centric trust** — avatar, All-Star badge, trip count, response time, reviews on every listing
- **Photo-card search twinned with a map** — list of photo-led cards + map of purple price pins (Airbnb-style)
- **Specs strip** — fuel / seats / transmission / doors as compact teal-iconed tiles
- **Near-black canvas (`#0F0F12`)** dark so photography pops; photos never dimmed, only chrome
- **Generously rounded surfaces** (10–14pt cards, 19px avatars) — modern, premium, friendly
- **Bottom tab bar** — Search / Trips / Favorites / Inbox / More — purple active tint

## 2. Color Palette & Roles

### Primary (Interactive)
- **Turo Purple** (`#593BFB`): THE booking-action color — primary CTA fill ("Continue", "Book this car"), selected map pin, active filter chip, active tab. The brand-defining accent.
- **Purple Bright** (`#7C5CFF`): Inline link / interactive text — lifts on the dark canvas for WCAG AA; also the lighter end of purple gradients.
- **Purple Pressed** (`#4A2FD6`): Pressed state of the primary CTA.

### Secondary / Trust
- **Turo Teal** (`#5CE0B8`): Trust & value accent — All-Star Host badge, savings/discount callouts, "Free cancellation", instant-book lightning, favorite-saved heart, success.
- **Teal Deep** (`#1FB890`): Teal text on light backgrounds, pressed teal, success-state contrast.

### Canvas & Surfaces (Light Mode)
- **Canvas** (`#FFFFFF`): Primary light canvas.
- **Surface 1** (`#F6F5FA`): Grouped backdrop behind cards, subtle elevated surfaces.
- **Surface 2** (`#FFFFFF`): Card and sheet fills (lifted with a soft shadow above Surface 1).
- **Surface Pressed** (`#ECEAF4`): Pressed list rows.
- **Divider** (`#E6E4EF`): Hairline dividers.

### Canvas & Surfaces (Dark Mode)
- **Canvas** (`#0F0F12`): Primary dark canvas — near-black so photography pops; NOT a tinted gray.
- **Dark Surface 1** (`#1A1A1F`): Card and sheet fills.
- **Dark Surface 2** (`#25252C`): Raised tiles, spec tiles, segmented controls.
- **Dark Divider** (`#2D2D35`): Hairline dividers on dark.

### Text
- **Text Primary Light** (`#15131F`): Primary text on light — a deep ink, NOT pure black.
- **Text Secondary Light** (`#6B6878`): Metadata, captions.
- **Text Tertiary Light** (`#9C99AB`): Disabled, placeholder.
- **Text Primary Dark** (`#F2F1F6`): Primary text on the near-black canvas.
- **Text Secondary Dark** (`#A4A2B3`): Metadata on dark.
- **Text Tertiary Dark** (`#6F6D7E`): Disabled / inactive on dark.
- **Text On Purple** (`#FFFFFF`): Text on the purple CTA.
- **Text On Teal** (`#06231B`): Text on teal fills — deep green-black for AA contrast.

### Semantic

| Role | Light | Dark |
|------|-------|------|
| Success / Confirmed | `#1FB890` | `#5CE0B8` |
| Warning / Pending | `#E8920C` | `#F4A93A` |
| Error / Declined | `#E03A52` | `#F5536B` |
| Info | `#593BFB` | `#7C5CFF` |
| Star Rating | `#FFB400` | `#FFB400` |
| Savings / Discount | `#1FB890` | `#5CE0B8` |
| Price (primary) | `#15131F` | `#F2F1F6` |

### Semantic Notes
- **Purple is the transaction**: there is one primary purple CTA per screen — the booking action. Filter/selected states also use purple, but the Book bar's button is the loudest purple on screen.
- **Teal is the reassurance**: it never drives the main transaction; it confirms the choice is safe and good (All-Star, free cancellation, savings, success). It is also the favorite-saved heart.
- **Photos are sacred**: imagery is never tinted, dimmed, or overlaid with brand color blocks — gradients on photos are only for legibility scrims at the very top/bottom.
- **Star gold is reserved**: `#FFB400` only for the rating star — never a CTA or decoration.

## 3. Typography Rules

### Font Family
- **Brand Font**: Turo's brand sans (a geometric humanist face used across product and marketing) — clean, slightly rounded terminals, strong at large display sizes for car names and prices.
- **Implementation Fallback**: `Manrope` (by Mikhail Sharanda, SIL OFL) — closest free geometric-humanist sans with a 200–800 range and tight, modern numerals; use for clones.
- **System Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- **Numerals**: tabular lining figures for prices, totals, trip counts, and ratings so layout never shifts.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display | Manrope | 32pt | 800 | 1.15 | -0.4pt | "Find your drive", search hero |
| Price Hero | Manrope | 26pt | 800 | 1.1 | -0.3pt | "$83 / day" in the Book bar |
| Car Title | Manrope | 23pt | 800 | 1.2 | -0.3pt | "Tesla Model 3 · 2023" on the listing |
| Section Header | Manrope | 18pt | 700 | 1.3 | -0.1pt | "Meet your host", "Trip details" |
| Body | Manrope | 16pt | 400 | 1.5 | 0pt | Description, policies, value props |
| Body Emphasis | Manrope | 16pt | 600 | 1.5 | 0pt | Inline emphasis |
| Card Title | Manrope | 15pt | 600 | 1.35 | 0pt | Search-card car title, host name |
| Price (card) | Manrope | 14pt | 800 | 1.2 | 0pt | "$214 / day" on a search card |
| Meta | Manrope | 14pt | 400 | 1.4 | 0pt | "214 trips · Joined 2019" |
| Eyebrow / Badge | Manrope | 13pt | 700 | 1.2 | 0.5pt | "ALL-STAR HOST" — uppercase, tracked |
| Caption | Manrope | 12pt | 500 | 1.3 | 0pt | "$249 est. total · 3 days" |
| Button | Manrope | 16pt | 800 | 1.0 | 0.1pt | Primary/secondary button labels |
| Tab Label | Manrope | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Rating Number | Manrope | 13pt | 700 | 1.0 | 0pt | "4.97" beside the star |

### Principles
- **Photo-deferential hierarchy**: type is confident but never competes with the car photo — the image is always the loudest element above the fold; type leads once you scroll past the hero
- **Prices are heavy**: daily rate, estimated total, and savings are 800 weight with tabular numerals so they read instantly and never jitter
- **Trust copy is calm**: host details, policies, and reviews are 400–600 weight, readable, never shouty — trust is conveyed by clarity, not emphasis
- **Tracked uppercase badges**: All-Star Host, Instant Book, and similar badges are 13pt 700 uppercase with +0.5pt tracking
- **Dynamic Type**: titles, body, card titles, prices scale; tab labels, badge eyebrows, and the rating number stay fixed (layout-critical)

## 4. Component Stylings

### Buttons

**Primary Button (Continue / Book this car)**
- Shape: rounded rectangle, 10pt corner radius, full-width in the Book bar
- Background: `#593BFB` (Turo Purple) — the booking-action color
- Text: `#FFFFFF` Manrope 16pt weight 800
- Height: 52pt (44pt in the compact Book bar)
- Pressed: background `#4A2FD6` + scale 0.98
- Disabled: `#593BFB` at 40% opacity, text at 55%

**Teal Button (Book instantly / accept)**
- Background: `#5CE0B8` (Turo Teal)
- Text: `#06231B` Manrope 16pt weight 800
- Height: 52pt, 10pt corner radius
- Used for instant-book and host-accept actions where teal's "trusted/fast" meaning applies

**Ghost / Outline Button (Message host)**
- Background: transparent
- Border: 1.5pt `#7C5CFF`
- Text: `#7C5CFF` Manrope 14pt weight 700
- Height: 44pt, 10pt corner radius
- Pressed: background `#7C5CFF` at 8% opacity

**Text Button (See all 32 photos)**
- Manrope 14pt weight 700, color `#7C5CFF`
- No underline; pressed: 60% opacity

### Photo Hero (the signature atom)
- Full-bleed, edge-to-edge, ~260pt tall on the listing detail (no card frame, no inset)
- Paginated carousel: page dots at the bottom-center; active dot is an 18pt-wide pill `#FFFFFF`, inactive 6pt `rgba(255,255,255,0.45)`
- Top overlay controls: back, share, favorite — each a 38pt circular `rgba(15,15,18,0.55)` blurred button with white 2.2pt-stroke icon
- Optional legibility scrim: a subtle top gradient only behind the status bar / controls — never over the car body
- Favorite heart: outline white when unsaved, filled `#5CE0B8` (Turo Teal) when saved

### Specs Strip
- A horizontal row of 3–4 compact tiles directly under the title
- Each tile: 12pt corner radius, `Surface 1` fill, 1pt divider border
- Leading icon 18pt stroke `#5CE0B8` (Turo Teal)
- Value 13pt weight 700 primary ("Electric", "5 seats", "Auto"); label 10pt secondary ("Fuel", "Capacity", "Transmission")

### Host Card (the trust atom)
- Row card: 14pt corner radius, `Surface 1`, 1pt divider border, full-width
- Leading 46pt circular avatar (photo or purple→teal gradient with initials)
- Name 15pt weight 700 + inline All-Star badge
- All-Star badge: pill, `rgba(92,224,184,0.16)` fill, `#5CE0B8` text + leading star, 10pt weight 800 uppercase
- Sub 12pt secondary: "214 trips · Joined 2019 · Responds in ~10 min"
- Trailing chevron `›` tertiary — taps through to the full host profile

### Sticky Price + Book Bar (the conversion atom)
- Pinned to the bottom, always visible on the listing
- Background: blurred `rgba(15,15,18,0.96)` panel (light: `rgba(255,255,255,0.96)`), 0.5pt top divider
- Left: daily rate "$83" 20pt weight 800 + "/ day" 13pt secondary; below, "$249 est. total · 3 days" 11pt `#5CE0B8` underlined (tap → price breakdown sheet)
- Right: full-width-ish purple "Continue" CTA, 10pt radius, 14pt weight 800
- This bar never scrolls away — it is the conversion anchor

### Search / Listing Cards
- Photo-led card, 14pt corner radius, `Surface 2`, 1pt divider border
- Photo on top (~110pt), favorite heart top-right (white outline / teal filled)
- Body: car title 13pt weight 700; rating row "4.99 (87) · 156 trips" 11pt secondary with a 11pt gold star; price "$214 / day" 14pt weight 800
- Twinned with a map of price pins in the search experience

### Map Price Pins
- Pill, 500pt radius, soft shadow
- Default: `#593BFB` (purple) fill, white text
- Visited: `Surface 2` fill, secondary text, 1pt divider border
- Selected: `#FFFFFF` fill, `#593BFB` text — the inverse, drawing the eye to the focused car

### Navigation

**Bottom Tab Bar**
- Height: 68pt total (50pt + safe area)
- Background: `#FFFFFF` light / `#0F0F12` dark, 0.5pt top divider, blur on scroll
- Tabs (5): Search, Trips, Favorites, Inbox, More
- Icon 22pt; active fill, inactive stroke
- Active color: `#593BFB` (Turo Purple) — icon + label tint, no pill
- Inactive: `#9C99AB` light / `#6F6D7E` dark
- Labels: Manrope 10pt weight 600, always shown

**Top Bar (over photo hero)**
- Transparent over the photo; back/share/favorite are floating circular blurred buttons
- On a non-photo screen: solid canvas, title 23–32pt 800, back chevron leading

**Filter Bar (search)**
- Horizontal scroll of pill chips below the search field
- Default chip: `Surface 2`, 1pt divider, label 13pt 600
- Active chip: `#593BFB` fill, white text

### Input Fields

**Search Field (Where to? · When?)**
- Height: 52pt
- Background: `#FFFFFF` light (1pt `#E6E4EF`) / `#25252C` dark
- Corner radius: 12pt
- Leading 18pt search icon secondary; "Where to? · Add dates" placeholder 16pt 500 secondary
- Focus: 2pt `#593BFB` border

**Date / Trip Picker**
- Calendar grid; selected endpoints `#593BFB` filled circle white text; in-between days `#593BFB` at 12% tint
- Today: 1.5pt `#5CE0B8` ring

### Distinctive Components

**Photo Carousel with Page Dots**
- Swipeable full-bleed photos; the pill-style active dot is the signature pagination affordance

**All-Star Host Badge**
- Turo's trust hallmark — a teal star pill on the host card and search cards; the brand's "verified/excellent" signal

**Instant Book Lightning**
- A teal lightning glyph + "Book instantly" — cars bookable without host approval; teal because it's the fast, trusted path

**Trip Card (Trips tab)**
- Upcoming/past trips as photo cards with status pill: Confirmed (teal), Pending (amber), Completed (secondary)

**Price Breakdown Sheet**
- Bottom sheet from the "est. total" link: line items (daily rate × days, trip fee, young-driver fee, taxes) with a bold total — purple "Continue" pinned

**Host Profile**
- Full-screen: large avatar, All-Star badge, joined date, trips, response rate/time, reviews list, their other cars in a photo-card rail

**Specs / Features Grid**
- Below the specs strip: a grid of feature chips (Apple CarPlay, All-wheel drive, Pet friendly, etc.) with small teal-tinted icons

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
- Screen horizontal inset: 20pt (the photo hero is the exception — full-bleed, 0 inset)
- Card internal padding: 12–16pt
- Gap between stacked sections: 18–20pt
- The photo hero gets the most vertical real estate above the fold; the Book bar is always pinned

### Grid & Container
- iPhone: single column, 20pt insets, full-bleed photo hero, pinned Book bar
- iPad / large: search shows a 2-up — photo-card list beside a live map; listing detail caps content at ~640pt with the photo hero still full-bleed
- The primary CTA lives in the pinned bottom bar, never inline mid-scroll

### Whitespace Philosophy
- **Let the car breathe**: the photo hero is uncropped by chrome; controls float, they don't frame
- **Calm around trust**: host card and policies get generous padding so trust signals read clearly, never crowded
- **Photo-card rhythm**: search results are evenly spaced photo cards with consistent corner radius — scannable like Airbnb stays
- **The Book bar is sacred space**: always reserved at the bottom; content scrolls under it, never over it

### Border Radius Scale
- Square (0pt): the full-bleed photo hero (edge-to-edge)
- Subtle (4pt): tiny chips, ticks
- Standard (8pt): small controls
- Button (10pt): primary/secondary buttons, the Book CTA
- Field (12pt): inputs, spec tiles
- Card (14pt): search cards, host card, trip cards
- Comfortable (20pt): bottom sheets, modals
- Pill (500pt): filter chips, badges, map pins, status pills
- Circle (50%): avatars, floating photo-hero controls

## 6. Depth & Elevation

Turo uses soft, restrained elevation — the photo carries the depth, UI stays calm.

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Canvas, inline text, the photo hero itself |
| Card (Level 1) | `rgba(20,18,40,0.08) 0 2px 10px` light / 1pt `#2D2D35` border dark | Search cards, host card, spec tiles |
| Pinned Bar (Level 2) | Top divider + backdrop blur (`rgba(15,15,18,0.96)`) | The sticky price + Book bar |
| Floating Control (Level 2) | `rgba(0,0,0,0.35) 0 2px 8px` + blur | Photo-hero back/share/favorite buttons |
| Sheet (Level 3) | `rgba(15,15,18,0.5) 0 -8px 28px` | Price breakdown, filters, date picker sheets |
| Modal Overlay | `rgba(15,15,18,0.55)` scrim | Behind modals and sheets |

**Shadow Philosophy**: the car photo provides the visual richness; UI elevation is deliberately quiet so nothing competes with the imagery. Floating photo-hero controls get a soft dark blur so they're tappable over any photo. The Book bar uses a backdrop blur (not a hard shadow) so it reads as a glass shelf over the content. On dark, cards switch to a 1pt divider border since shadows read poorly on near-black.

### Motion
- **Photo carousel swipe**: 1:1 finger tracking; page dot morphs (active grows to an 18pt pill) over 200ms ease-out; soft paging haptic at each boundary
- **Favorite tap**: heart scales `1.0 → 1.25 → 1.0` over 280ms with a teal fill cross-fade + light haptic
- **Book bar CTA press**: scale `1.0 → 0.98` 120ms + Purple → Pressed Purple
- **Listing open**: shared-element-style transition — the search card photo expands into the full-bleed hero over 320ms ease-out
- **Map pin select**: pin scales `1.0 → 1.12` and recolors to the white selected state over 150ms; the matching card scrolls into view
- **Filter chip toggle**: fill cross-fades to purple over 150ms
- **Sheet present**: bottom sheet rises 320ms ease-out + scrim fade; "est. total" → breakdown sheet
- **Tab change**: instant icon/label tint to Purple; no pill slide (there is no pill)
- **Page push**: native iOS push, 300ms horizontal slide
- **Haptics**: light on favorite, CTA press, and filter toggle; soft paging tick on carousel; success on booking confirmed

## 7. Do's and Don'ts

### Do
- Make the car photo the hero — full-bleed, edge-to-edge, no card frame on the listing
- Use Turo Purple (`#593BFB`) as the single booking-action color (Continue, Book, selected pin, active filter)
- Use Turo Teal (`#5CE0B8`) for trust & value — All-Star Host, savings, free cancellation, instant book, favorite-saved
- Pin a sticky price + Book bar to the bottom of the listing — it is the conversion anchor
- Surface host trust on every listing: avatar, All-Star badge, trips, response time, reviews
- Twin search results with a map of purple price pins (Airbnb-style)
- Use a near-black canvas (`#0F0F12`) in dark mode so photography pops
- Keep prices heavy (800) with tabular numerals so they never jitter
- Use the pill-style active page dot as the carousel pagination affordance
- Round cards and surfaces generously (10–14pt); float photo-hero controls as circular blurred buttons
- Keep trust copy calm and clear — clarity conveys trust, not shouting

### Don't
- Don't put a card frame, border, or inset around the listing photo hero — it is full-bleed
- Don't tint, dim, or color-block over car photos — scrims are only thin legibility gradients at top/bottom
- Don't use teal for the main booking CTA — purple is the transaction; teal is the reassurance
- Don't use purple for trust badges — All-Star and savings are teal
- Don't let the Book bar scroll away — it is always pinned and always visible
- Don't use a tinted gray for the dark canvas — near-black `#0F0F12` keeps photos punchy
- Don't use star gold (`#FFB400`) for anything but the rating star
- Don't crowd the host card — trust signals need breathing room
- Don't add a tab-bar pill/indicator — active is a purple tint only
- Don't let prices jitter — always tabular lining numerals
- Don't bury the daily rate — it lives in the persistent Book bar with the est. total link

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Photo hero ~220pt; specs strip scrolls if 4 tiles; Book bar compact |
| iPhone 13/14/15 | 390pt | Standard layout; photo hero ~260pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; floating controls clear the island |
| iPhone 15/16 Pro Max | 430pt | Photo hero ~300pt; larger host avatar |
| iPad (portrait) | 768pt | Search 2-up: photo-card list + live map; listing content max ~640pt, hero full-bleed |
| iPad (landscape) | 1024pt+ | Persistent map + card grid; listing detail in a wide column with a side rail of host's other cars |

### Dynamic Type
- Scales: display, car title, section headers, body, card titles, prices
- Fixed (layout-critical): tab labels, badge eyebrows, rating number, page-dot region
- Photo hero never scales (image-driven)

### Orientation
- iPhone: portrait-primary; photo hero supports landscape full-screen gallery view
- iPad: full rotation; map/card split reflows; gallery viewer is full-screen swipeable

### Touch Targets
- Primary/Book CTA: 52pt (44pt compact)
- Tab icons: 22pt glyph, 48pt+ hit area
- Floating photo-hero controls: 38pt visible, 44pt hit
- Search/host card: full-card tappable, ≥ 64pt
- Map pins: 44pt minimum hit

### Safe Area Handling
- Top: floating photo-hero controls respect the Dynamic Island/notch
- Bottom: the Book bar sits above the home indicator; content scrolls under both
- Photo gallery viewer: full-bleed, swipe gestures respect safe-area edges

## 9. Agent Prompt Guide

### Quick Color Reference
- Booking action (Turo Purple): `#593BFB` (pressed `#4A2FD6`, bright/link `#7C5CFF`)
- Trust / value (Turo Teal): `#5CE0B8` (deep `#1FB890`)
- Canvas (light): `#FFFFFF` · surface 1 `#F6F5FA` · surface 2 `#FFFFFF`
- Canvas (dark): `#0F0F12` · surface 1 `#1A1A1F` · surface 2 `#25252C`
- Divider: `#E6E4EF` light / `#2D2D35` dark
- Text primary: `#15131F` light / `#F2F1F6` dark
- Text secondary: `#6B6878` light / `#A4A2B3` dark
- Text on purple: `#FFFFFF` · text on teal: `#06231B`
- Star rating: `#FFB400` · success/savings: `#1FB890` light / `#5CE0B8` dark

### Example Component Prompts
- "Build the Turo listing photo hero in SwiftUI: full-bleed, edge-to-edge, 260pt tall, NO card frame or inset. A paginated photo carousel with page dots bottom-center — active dot an 18pt-wide white pill, inactive 6pt `rgba(255,255,255,0.45)`. Top overlay: back / share / favorite as 38pt circular `rgba(15,15,18,0.55)` blurred buttons with white 2.2pt-stroke icons. Favorite heart fills `#5CE0B8` when saved. No color overlay on the photo — only a subtle top legibility gradient behind the controls."

- "Create the Turo host card: 14pt corner radius, `#1A1A1F` fill, 1pt `#2D2D35` border, full-width. Leading 46pt circular avatar (purple→teal gradient with initials fallback). Name 'Marcus J.' 15pt w700 + inline All-Star badge: pill `rgba(92,224,184,0.16)` fill, `#5CE0B8` text, leading star, 10pt w800 uppercase. Sub '214 trips · Joined 2019 · Responds in ~10 min' 12pt secondary. Trailing chevron tertiary."

- "Build the Turo sticky price + Book bar: pinned to the bottom, always visible, blurred `rgba(15,15,18,0.96)` panel, 0.5pt top `#2D2D35` divider. Left: '$83' 20pt w800 + '/ day' 13pt secondary; below, '$249 est. total · 3 days' 11pt `#5CE0B8` underlined (tap → breakdown sheet). Right: purple 'Continue' CTA, `#593BFB`, 10pt radius, 16pt w800 white. The bar never scrolls away."

- "Render the Turo specs strip: a horizontal row of 3 tiles under the car title. Each tile 12pt radius `#1A1A1F` with 1pt `#2D2D35` border, centered: 18pt stroke icon `#5CE0B8`, value 13pt w700 ('Electric'), label 10pt secondary ('Fuel'). Tiles: Fuel, Capacity, Transmission."

- "Build the Turo search card: photo-led, 14pt radius `#25252C`, 1pt `#2D2D35` border. Photo top ~110pt with favorite heart top-right (white outline default, `#5CE0B8` filled saved). Body: car title 13pt w700; rating '4.99 (87) · 156 trips' 11pt secondary with an 11pt `#FFB400` star; price '$214 / day' 14pt w800 primary. Twin with a map of `#593BFB` price pins; selected pin inverts to white fill / `#593BFB` text."

- "Build the Turo bottom tab bar: 5 tabs Search / Trips / Favorites / Inbox / More, height 68pt, `#0F0F12` bg, 0.5pt `#2D2D35` top divider. Active tint `#593BFB` (icon + label), inactive `#6F6D7E`. NO pill/indicator — color tint only. Labels Manrope 10pt w600 always visible."

### Iteration Guide
1. The car photo is the product — full-bleed, edge-to-edge hero with NO card frame; controls float, never frame
2. Turo Purple `#593BFB` is the single booking-action color — Continue, Book, selected pin, active filter; one loud purple CTA per screen
3. Turo Teal `#5CE0B8` is trust & value only — All-Star Host, savings, free cancellation, instant book, favorite-saved; never the main CTA
4. The sticky price + Book bar is pinned to the bottom always — it is the conversion anchor; content scrolls under it
5. Host trust is on every listing — avatar, All-Star badge, trips, response time, reviews; calm copy conveys trust
6. Dark canvas is near-black `#0F0F12` so photography pops; photos are never tinted or dimmed, only chrome
7. Prices are heavy (800) with tabular numerals — daily rate, est. total, savings never jitter
8. Search twins photo-led cards with a map of purple price pins (Airbnb-style); selected pin inverts to white
9. Surfaces are generously rounded (10–14pt); photo-hero controls are circular blurred floating buttons
10. Star gold `#FFB400` is the rating star only — never a CTA or decoration; teal carries success/savings