A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
22tokens
10type steps
1radius steps
12pxspacing base
Turo, in one page
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
#593BFBis the single booking-action color — "Continue", "Book", selected pin, active filter - Turo Teal
#5CE0B8is 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
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
#0F0F12keeps 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
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Turo design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Turo Purple: #593bfb
- Turo Teal: #5ce0b8
- Purple Bright: #7c5cff
- Purple Pressed: #4a2fd6
- Teal Deep: #1fb890
- Canvas: #ffffff
- Surface 1: #f6f5fa
- Surface 2: #ffffff
- Surface Pressed: #eceaf4
- Divider: #e6e4ef
Type:
- families: Brand Font, Manrope, Implementation Fallback, System Fallback Stack
- scale: 10, 12, 13, 14, 15, 16, 18, 23, 26
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 12
- elevation: Pill, 500pt radius, soft shadow
Spacing: 12
Rules:
- 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)
Avoid:
- 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
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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:
#FFB400only for the rating star — never a CTA or decoration.
Type scaleRead the full spec
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)
Components and layoutRead the full spec
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:
#FFFFFFManrope 16pt weight 800 - Height: 52pt (44pt in the compact Book bar)
- Pressed: background
#4A2FD6+ scale 0.98 - Disabled:
#593BFBat 40% opacity, text at 55%
Teal Button (Book instantly / accept)
- Background:
#5CE0B8(Turo Teal) - Text:
#06231BManrope 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:
#7C5CFFManrope 14pt weight 700 - Height: 44pt, 10pt corner radius
- Pressed: background
#7C5CFFat 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 6ptrgba(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 1fill, 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,#5CE0B8text + 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
#5CE0B8underlined (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 2fill, secondary text, 1pt divider border - Selected:
#FFFFFFfill,#593BFBtext — the inverse, drawing the eye to the focused car
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-turo {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0f0f12;
--heading-color: #0f0f12;
--link-color: #6c48ff;
--link-hover-color: #4315ff;
--border-color: #d4d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(15,15,18,0.06);
--card-hover-shadow: 0 6px 18px rgba(15,15,18,0.12);
--header-bg: #0f0f12;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #636365;
--button-bg: #7c5cff;
--button-text-color: #000000;
--button-hover-bg: #5329ff;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #0f0f12;
--button-secondary-hover-bg: #e2e2e3;
--button-secondary-border: 1px solid #d4d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0f0f12;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 12px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/travel/turo/DESIGN.md· 26.2 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.