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
24tokens
12type steps
4radius steps
14pxspacing base
Waze, in one page
Waze's iOS app is a community-driven driving game disguised as a navigation app. Where Apple Maps wants you to forget the UI exists and Google Maps wants you to find a place, Waze wants you to drive with friends — and every visual decision flows from that emotional brief. The map is loud, the icons are cartoony, the hazard reports are technicolor speech bubbles, and the brand voice is closer to a children's puzzle book than a serious mapping product. This is by design: Waze's superpower is its drivers, and the playful aesthetic makes contributing (reporting a police trap, a pothole, a crash) feel like a game, not a chore.
The accent is Waze Purple (#7E55BE) — the iconic violet of the Waze chat-bubble logomark, the navigation polyline, and the floating action button. Surrounding it is Waze Cyan (#33CCFF) — used on the location puck and informational glyphs, and on the second layer of the Waze logo. Together they create the signature electric cool-tone duo that no other map app uses. Pinned over the map: red #EF6A65 police reports, orange #F69833 traffic, yellow #F9C42E road closures, green #75C73E cleared hazards, each rendered as a chunky cartoon speech bubble with a small Wazer emoji avatar. The map cartography is more saturated than Apple's — bright cyan water, mint-green parks, warm white land.
Typography is Boing, Waze's proprietary rounded sans designed for both wayfinding legibility and brand warmth — the rounded terminals echo the cartoon speech bubbles. Boing has Regular, Bold, and Black weights, plus a Boing Mono for in-app distance/time display. Where Boing isn't available, the fallback is SF Pro Rounded — the rounded variant of SF Pro on iOS — chosen specifically because Waze leans into roundness as a brand attribute. The hierarchy is bold and big: 28pt-32pt street names in Boing Black, 18pt step instructions, tabular figures on every "0.4 mi" or "12 min" with a slight letter spacing for breathing room at glance-while-driving.
Key Characteristics:
- Waze Purple (
#7E55BE) as the primary brand — logo, polyline, FAB, primary CTAs - Waze Cyan (
#33CCFF) as the secondary brand — current-location puck, info glyphs, second logo color - Cartoon speech-bubble hazard reports — Red police, Orange traffic, Yellow closures, Green cleared, with rounded corners and a triangular tail pointing to the location
- Bright saturated cartography — cyan water, mint parks, warm white roads — louder than Apple Maps or Google Maps
- Boing typeface — rounded proprietary sans by Waze; SF Pro Rounded as iOS fallback
- Floating Wazer avatar — the user's emoji-style mood character on the map, "happy", "stuck in traffic", "lucky"
- Bottom-up reporting flow — tap the floating "+" report button, choose hazard type from a wheel of cartoon icons
- Big purple "Go" button when starting navigation — full-width bottom CTA at 56pt height
- Speed-limit tile and current-speed indicator — circular badges in the bottom-left during navigation, US-style speed-limit signage
- ETA shared with friends — banner asking to share with Beacon, social moments built into the trip flow
- Carpool integration — Waze Carpool branding lives inside the same chrome (less prominent post-2024)
Do's and don'ts
Do
- Use Waze Purple
#7E55BEas the brand primary — logo, polyline, FAB, "Go" button - Use Waze Cyan
#33CCFFas the secondary — current-location puck, info glyphs - Render hazard reports as chunky cartoon speech bubbles with rounded 14pt corners, full-saturation colors, white icons inside, and a triangular tail pointing to the hazard location
- Use Boing typography (or SF Pro Rounded as fallback) — roundness is the brand
- Use Boing Mono on every numeric — distance, time, speed, ETA
- Make the map LOUD — cyan water, mint parks, warm white roads
- Render the current-location puck as a cyan arrow (NOT a dot) with a chunky 3pt white outline
- Show the speed-limit + current-speed tile in the bottom-left during navigation, US-style sign format
- Use the tinted purple shadow on the FAB
rgba(126,85,190,0.40) 0 6px 16px— reinforces brand - Animate hazard speech bubbles with a "pop" — scale 0 → 1.15 → 1.0 spring
- Use the chevron ant-trail animation on the route polyline
- Keep the report wheel a literal cartoon dial with 8 wedges — it's playful by design
Don't
- Don't use a plain blue location dot — Waze's puck is a CYAN ARROW, not a circular dot
- Don't render hazard reports as small SF Symbol pins — they're chunky cartoon speech bubbles with tails
- Don't tone down the cartography — bright cyan water and mint parks are the signature; making them subtle defeats the brand
- Don't replace Boing with a sharp grotesque (Helvetica, Inter without rounding) — the warmth comes from roundness
- Don't make the "Go" button anything other than full-pill 56pt-tall Waze Purple
- Don't omit Boing Mono on numerics — variable widths break the at-a-glance read
- Don't use a generic black drop shadow on the FAB — the tinted purple shadow is signature
- Don't use Waze Purple at less than 100% saturation for primary actions — the deep violet is the brand
- Don't show police hazard reports without the rounded cartoon shape — the cartoon-ness is what makes contributing fun
- Don't position the FAB on the left — it lives bottom-right
- Don't use the dot pulse from Apple Maps — Waze's pulse is a 60pt cyan outer ring at 0.15 opacity, expanding to 1.5x
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 Waze design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Waze Purple: #7e55be
- Waze Cyan: #33ccff
- Waze Purple Deep: #5b3c9a
- Waze Purple Tint: #e8def5
- Cyan Deep: #0099e5
- Police Red: #ef6a65
- Traffic Orange: #f69833
- Closure Yellow: #f9c42e
- Cleared Green: #75c73e
- Hazard Brown: #8b6f47
Type:
- families: Boing, Boing Mono, Quicksand, Nunito
- scale: 10, 11, 12, 13, 14, 15, 17, 22, 24
- weights: 400, 500, 700
Shape:
- radius: 14, 16, 24, 28
- elevation: Shadow: `rgba(0,0,0,0.20) 0 4px 12px` | Shadow: `rgba(126,85,190,0.40) 0 6px 16px` — tinted purple shadow | Shadow: `rgba(0,0,0,0.30) 0 3px 8px` for visibility over saturated cartography
Spacing: 14, 16, 24
Rules:
- Use Waze Purple `#7E55BE` as the brand primary — logo, polyline, FAB, "Go" button
- Use Waze Cyan `#33CCFF` as the secondary — current-location puck, info glyphs
- Render hazard reports as chunky cartoon speech bubbles with rounded 14pt corners, full-saturation colors, white icons inside, and a triangular tail pointing to…
- Use Boing typography (or SF Pro Rounded as fallback) — roundness is the brand
- Use Boing Mono on every numeric — distance, time, speed, ETA
- Make the map LOUD — cyan water, mint parks, warm white roads
Avoid:
- Don't use a plain blue location dot — Waze's puck is a CYAN ARROW, not a circular dot
- Don't render hazard reports as small SF Symbol pins — they're chunky cartoon speech bubbles with tails
- Don't tone down the cartography — bright cyan water and mint parks are the signature; making them subtle defeats the brand
- Don't replace Boing with a sharp grotesque (Helvetica, Inter without rounding) — the warmth comes from roundness
- Don't make the "Go" button anything other than full-pill 56pt-tall Waze Purple
- Don't omit Boing Mono on numerics — variable widths break the at-a-glance read
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary Brand
- Waze Purple (
#7E55BE): The brand violet — logomark gradient stop, navigation polyline, FAB background, primary CTAs ("Go", "Start"), selected-state on category chips. - Waze Purple Deep (
#5B3C9A): Pressed state on FAB and primary buttons. - Waze Purple Tint (
#E8DEF5): Selected row backgrounds, info banner fills. - Waze Cyan (
#33CCFF): The cool counterpart — current-location puck, info icon fills, the lighter half of the gradient logo. - Cyan Deep (
#0099E5): Pressed state on cyan buttons, cyan glyphs.
Hazard Report Colors (The Cartoon System)
- Police Red (
#EF6A65): Police reports (speed traps, checkpoints) — chunky speech bubble. - Traffic Orange (
#F69833): Traffic jams, congestion alerts. - Closure Yellow (
#F9C42E): Road closures, construction. - Cleared Green (
#75C73E): Recently cleared hazards (with timer), gas-station deals. - Hazard Brown (
#8B6F47): Potholes, debris, hazard-on-shoulder. - Camera Gray (
#6B6B6B): Speed cameras, red-light cameras.
Map Cartography
- Map Cream (
#FFFCF2): Warm white land surface (slightly cooler than Apple Maps). - Map Water (
#9BDEEF): Bright cyan water — louder and cooler than Apple's water blue. - Map Park (
#C5E89B): Mint green parks. - Map Road Major (
#FFFFFF): Major roads, white with a soft outline. - Map Road Minor (
#F5F0E5): Minor roads. - Map Highway (
#FFD970): Highway fill, slightly more saturated than Apple's. - Map Building (
#E8E2D1): Building footprints. - Map Label (
#3D3D3D): Map label text — slate gray.
Canvas, Surfaces & Dividers
- Card Canvas (
#FFFFFF): Place card, sheets, bottom panels. - Surface Gray (
#F5F5F7): Search field, section backgrounds. - Surface Gray 2 (
#EAEAEC): Pressed states. - Divider (
#D6D6D9): Hairlines.
Text
- Ink (
#1A1A1A): Primary text — Waze's slightly warm near-black. - Secondary (
#6B6B6B): Subtitles, addresses, ETA secondary info. - Tertiary (
#A0A0A0): Placeholder, disabled. - Inverse White (
#FFFFFF): Text on Waze Purple and other saturated backgrounds.
Semantic
- Success Green (
#34C759): "On your way" confirmations. - Warning Amber (
#F9C42E): Speed warning, slow traffic ahead. - Error Red (
#EF6A65): "Route blocked", form errors. - Info Cyan (
#33CCFF): Tips, info banners.
Dark Mode (Night Driving Mode)
Waze's dark mode is engineered for night driving — a true near-black map with the same loud accent colors maintained for at-a-glance legibility.
- Dark Map Land (
#1E2026): Cool charcoal over land. - Dark Map Water (
#0F3D5E): Deep teal-navy water. - Dark Map Park (
#1F3A1F): Dark forest. - Dark Card Surface (
#262932): Sheets, panels. - Dark Surface 2 (
#3A3D47): Pressed states. - Dark Divider (
#4A4D58): Hairlines. - Dark Text Primary (
#FFFFFF). - Dark Text Secondary (
#B8BAC5). - Waze Purple (Dark) (
#9F76DA): Brightened for dark legibility. - Waze Cyan (Dark) (
#5DD9FF).
Type scaleRead the full spec
Font Family
- Primary:
Boing— proprietary rounded sans by Waze, with Regular, Bold, and Black weights, plus aBoing Monofor tabular numerics - Fallback stack:
'Boing', -apple-system-rounded, 'SF Pro Rounded', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Quicksand', sans-serif - Web/marketing Google Fonts substitute:
Quicksand(open-source rounded sans, closest to Boing's warmth) orNunitofor a more neutral fallback - iOS native fallback:
SF Pro Rounded— explicitly the rounded variant, available via.systemRoundeddesign parameter on iOS 13+ - Tabular figures: Mandatory on distances ("0.4 mi"), times ("12 min"), ETAs ("6:14 PM"), speeds ("65 mph")
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Hero Street Name | Boing | 32pt | 900 (Black) | 1.1 | -0.4pt | "Market Street" on next-turn card |
| Next Turn Distance | Boing Mono | 28pt | 700 (Bold) | 1.1 | 0pt tnum | "0.4 mi" |
| Step Title | Boing | 22pt | 700 | 1.2 | -0.2pt | "Turn right onto Market St" |
| Step Subtitle | Boing | 17pt | 400 | 1.3 | 0pt | "in 0.4 mi" |
| ETA Bottom Time | Boing Mono | 24pt | 700 | 1.1 | 0pt tnum | "12 min" |
| ETA Distance | Boing Mono | 17pt | 500 | 1.2 | 0pt tnum | "5.2 mi · 6:14 PM" |
| Place Card Title | Boing | 26pt | 700 | 1.15 | -0.3pt | "Tartine Bakery" |
| Place Card Subtitle | Boing | 15pt | 400 | 1.3 | 0pt | "Bakery · French · $$" |
| Search Placeholder | Boing | 17pt | 400 | 1.3 | 0pt | "Where to?" |
| Section Header | Boing | 13pt | 700 | 1.2 | 0.6pt UPPERCASE | "RECENT", "FAVORITES" |
| List Row Title | Boing | 17pt | 500 | 1.3 | 0pt | Recent destination |
| List Row Subtitle | Boing | 13pt | 400 | 1.2 | 0pt | Address |
| Speed Limit Number | Boing Mono | 22pt | 900 (Black) | 1.0 | 0pt tnum | "35" in the speed-limit circle |
| Current Speed | Boing Mono | 32pt | 700 | 1.0 | 0pt tnum | "42" big number, mph small |
| Hazard Speech Title | Boing | 14pt | 700 | 1.1 | 0pt | "Police" / "Traffic" |
| Hazard Speech Time | Boing | 11pt | 400 | 1.1 | 0pt | "5 min ago" |
| Button Primary | Boing | 17pt | 700 | 1.0 | 0pt | "Go", "Start", "Report" |
| Caption | Boing | 12pt | 400 | 1.3 | 0pt | Photo credits, fine print |
| Tab Label | Boing | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
Principles
- Roundness is the brand: Boing has rounded terminals on every glyph — the typography mirrors the cartoon speech bubbles and the rounded buttons. SF Pro Rounded is the only correct fallback.
- Boing Mono for ALL numerics — distances, times, speeds, ETAs. Variable widths break the navigation glance pattern.
- Black (900) reserved for hero moments — street names on next-turn cards, the speed-limit number. Almost everything else is Bold (700) or Regular (400).
- Tight tracking at display sizes (-0.4pt at 32pt), 0 at body.
- Big and bold for driving glance: street names are 32pt Black because the user reads them at 60 mph; subtle, light type is not appropriate
- UPPERCASE section headers with 0.6pt tracking — the same iOS rhythm as other apps, but in Boing Bold (700)
- Dynamic Type honored on the place card and search results; FIXED on the next-turn card, ETA bar, speed-limit number, hazard speech bubbles (all layout- and glance-critical)
Components and layoutRead the full spec
The Cartoon Hazard Speech Bubble (The Signature)
The single most recognizable component in Waze. A chunky rounded rectangle that points to the hazard location like a speech bubble.
- Container shape: rounded rectangle with a triangular tail
- Corner radius: 14pt
- Width: variable — minimum 88pt, expands for content
- Height: 56pt (single-line) or 68pt (with timestamp)
- Padding: 8pt vertical, 12pt horizontal
- Background: solid hazard color at full saturation (e.g., Police Red
#EF6A65) - Tail: 12pt × 8pt isoceles triangle pointing down from the bottom-center, same color as the container
- Icon: 24pt cartoon-style glyph in white, leading position (e.g., police hat, exclamation, cone, snowflake)
- Title: Boing 14pt Bold white, e.g., "Police"
- Timestamp (if shown): Boing 11pt Regular white at 80% opacity, e.g., "5 min ago"
- Shadow:
rgba(0,0,0,0.20) 0 4px 12px - Hover/Tap state: scale 1.0 → 1.08 over 200ms, with a subtle white inner glow
Police Speech Bubble: Background #EF6A65, icon = police hat with a small badge glyph (custom or shield.fill) Traffic Speech Bubble: Background #F69833, icon = traffic cone or stopped-car Closure Speech Bubble: Background #F9C42E, icon = no-entry circle or barrier Cleared Speech Bubble: Background #75C73E, icon = checkmark + small timer Pothole Speech Bubble: Background #8B6F47, icon = ground crack Camera Speech Bubble: Background #6B6B6B, icon = camera
Floating Action Button (Report)
- Diameter: 56pt
- Position: bottom-right, 16pt inset, 16pt above the bottom ETA bar
- Background:
#7E55BEWaze Purple - Glyph: a stylized white exclamation point or speech-bubble icon at 24pt
- Shadow:
rgba(126,85,190,0.40) 0 6px 16px— tinted purple shadow - Pressed: background
#5B3C9A, scale 0.94 - Tap: opens the report wheel — a circular arrangement of 6-8 hazard icons that the user picks
- Haptic:
.impactOccurred(.medium)
Report Wheel (Hazard Picker)
The cartoon dial that appears when the user taps the FAB.
- Position: full-screen modal sheet from bottom
- Background:
#FFFFFFat the wheel area, semi-transparent purplergba(126,85,190,0.85)scrim over the rest of the screen - Wheel: 280pt diameter circle, centered horizontally, 80pt from bottom
- Slices: 8 wedges, each containing a cartoon hazard icon (police, traffic, closure, pothole, camera, hazard, gas, cleared)
- Slice icons: 44pt × 44pt centered in each wedge
- Slice colors: each wedge is the hazard color at 20% saturation; tap saturates to full
- Center: 56pt circle with a white "X" close button
- Animation: wheel spins in from a small circle, 350ms spring
- Tap on slice: slice expands, then a confirmation card appears
Current-Location Puck (Waze Style)
Waze's puck is distinct from Apple's — it's the iconic blue arrow shape.
- Shape: a chunky arrow/cone pointing in the heading direction, NOT a circular dot
- Color:
#33CCFFWaze Cyan filled body with a 3pt white outline - Size: 32pt wide × 36pt tall
- Rotation: rotates with heading
- Shadow:
rgba(0,0,0,0.30) 0 3px 8pxfor visibility over saturated cartography - Pulse: a subtle 60pt cyan outer ring at 0.15 opacity, expanding to 1.5x over 2 seconds infinite
Wazer Avatar (Floating User Emoji)
A unique-to-Waze element: the user's chosen mood character appears on the map as a small emoji-style cartoon avatar.
- Position: floats alongside the location puck, 8pt up-and-right inset
- Size: 24pt × 24pt
- Shape: a circle with the Wazer mood emoji inside (Happy, Stuck, Lucky, Tired, etc.)
- Border: 2pt white ring
- Pop animation: when chosen, scales 0 → 1.2 → 1.0 with a 400ms spring
The Next-Turn Card (Top of Screen During Navigation)
The hero component while driving.
- Position: top of screen below safe area, full-width
- Height: 100pt
- Background: solid
#7E55BEWaze Purple - Layout: leading 64pt × 64pt direction-arrow icon (white, custom Waze direction glyph) + main content + trailing exit-route button
- Direction arrow: rotated to match the turn (right, left, slight, sharp)
- Distance row: Boing Mono 28pt Bold white tabular, e.g., "0.4 mi"
- Street name: Boing 22pt Bold white, e.g., "Market Street", 2-line truncate
- Sub-instruction: Boing 14pt Regular white at 80% opacity, e.g., "then turn left in 0.6 mi"
- Corner radius: 0pt on top (extends into safe area), 16pt on bottom corners
- Tap: opens the full directions list
ETA Bottom Bar
- Position: sticky bottom, full-width
- Height: 80pt + safe area
- Background:
#FFFFFF - Layout: left side ETA info + center route alternative pill + right side "Stop" button
- ETA time: Boing Mono 24pt Bold
#1A1A1Atabular, e.g., "12 min" - Distance + arrival: Boing Mono 17pt Medium
#6B6B6Btabular, "5.2 mi · 6:14 PM" - Alternative route pill (when offered): a centered green
#75C73Epill with "Save 3 min" — tap to switch routes - Stop button: outlined red
#EF6A65pill at right with white background, "End"
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Next-turn card compresses; report wheel sized down to 240pt |
| iPhone 13/14/15 | 390pt | Standard layout — full-size report wheel, 100pt next-turn card |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in next-turn card with custom inset |
| iPhone 15/16 Pro Max | 430pt | Slightly larger speed-limit tile and FAB |
| iPad Mini | 744pt | Search card becomes a 360pt left sidebar; map fills the rest |
| iPad Pro 11"+ | 834pt+ | Persistent sidebar + map + right-side details pane |
Dynamic Type
- Place card title, body, list rows: full scale
- Next-turn card, ETA numbers, speed-limit, hazard speech bubble text: FIXED (glance- and layout-critical)
- Map labels: zoom-controlled, fixed at user's preferred Dynamic Type within limits
Orientation
- Portrait: default
- Landscape: next-turn card stays at top but compresses to 64pt height; speed tile moves to top-right
- iPad: persistent sidebar across orientations
Touch Targets
- FAB: 56pt
- "Go" button: 56pt height, 200pt+ width
- Hazard speech bubble: full bubble is tappable for confirmation/dismissal
- Speed tile: tap opens speed settings
- Map controls: 44pt each
- Wazer avatar: tap opens mood picker, 32pt hit area on 24pt glyph
Safe Area Handling
- Top: next-turn card extends into safe area with 16pt content padding from the safe area top
- Bottom: ETA bar respects safe area; FAB sits 16pt above ETA bar's safe-area inset
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-waze {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1a1a1a;
--heading-color: #1a1a1a;
--link-color: #007ca6;
--link-hover-color: #005673;
--border-color: #d6d6d6;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(26,26,26,0.06);
--card-hover-shadow: 0 6px 18px rgba(26,26,26,0.12);
--header-bg: #1a1a1a;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #6a6a6a;
--button-bg: #33ccff;
--button-text-color: #000000;
--button-hover-bg: #00bfff;
--button-border: none;
--button-border-radius: 24px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #1a1a1a;
--button-secondary-hover-bg: #e4e4e4;
--button-secondary-border: 1px solid #d6d6d6;
--prompt-bg: #f4f4f4;
--prompt-text-color: #1a1a1a;
--base-font: var(--font-mono);
--heading-font: var(--font-helvetica);
--card-border-radius: 24px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- perplexity 77.4%
- plenty of fish 77.1%
- kintetsu 76.7%
- lemon8 75.9%
- nubank 75.5%
Where this came from
- Source document
ios/design-md/travel/waze/DESIGN.md· 28.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.