Google Maps Design System — Colours, Type and a Ready Prompt

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

7type steps

4radius steps

4pxspacing base

Google Maps, in one page

Google Maps' iOS app is a pure map-first interface — the earth is the canvas and the UI is a handful of floating shapes laid over it. Unlike most apps that treat the map as a feature, Maps treats the map as the entire product: every search result, every place card, every navigation instruction exists as a translucent sheet or rounded pill stationed over rendered geography. The result is a chrome-light surface where road vectors, park polygons, and water bodies do all the visual heavy lifting, and the UI chrome melts into whatever landscape is beneath it. This is why a Maps screenshot taken in Manhattan looks chromatically different from one taken in Yosemite — the app is tinted by the terrain.

The accent system is a disciplined deployment of Google's four-color identity. Google Blue (#4285F4) is the operating accent — it marks the route polyline, the "Your location" dot with its soft accuracy halo, the "Directions" floating action button, the active tab, and any pin placed on a "home" or "work" saved place. The three remaining Google logo colors each have a single semantic job: Red (#EA4335) is the default pin color for a dropped/searched place (the one most users recognize as "the Google Maps pin"), Green (#34A853) marks saved or favorited places, Yellow (#FBBC04) flags alerts, construction, and caution overlays. Orange (#FB8C00) is used for category pins (restaurants, gas stations, hotels). Beyond these, color appears only in map tiles — park green #C8E6C9, water blue #AADAFF, highway shield yellow #FDF6E3, neutral building fills #F0F0F0.

Typography is Google Sans for headings and Roboto for body — Google's unified two-font system across its app ecosystem. Google Sans carries geometric, open, slightly humanist shapes that feel neutral on any locale; Roboto is flatter, optimized for dense UI copy and address display. The hierarchy is conservative: place card titles at 20pt weight 500, addresses in 14pt Roboto weight 400, distances in tabular numerals so "1.2 mi" and "14.7 mi" stack cleanly in a list. Turn-by-turn navigation breaks the quiet rule — the turn card shoots to 36-48pt display type in Google Sans weight 700 so the next maneuver is legible at a glance behind the wheel.

Key Characteristics:

Map is the hero — full-bleed to every edge, UI floats as translucent sheets and pills
Google Blue (#4285F4) as the operating accent — route line, location dot, Directions FAB
Four-color pin system: Red (default), Green (saved), Blue (home/work), Orange (category)
Floating top search bar ("Search here") with voice-mic and profile avatar
Bottom sheet drawer with drag-to-expand detents — search results, place details, transit
Category chip row (Restaurants / Hotels / Coffee / Things to do) beneath the search bar
Blue "Your location" dot with translucent accuracy circle and heading cone
Blue route polyline (5pt) with darker blue casing for legibility on any map color
Turn-by-turn immersive mode: giant blue arrow, top turn card, bottom ETA, speed chip
Dark mode uses #202124 canvas with the map's dark-tile palette

Do's and don'ts

Do

Keep the map at 60%+ of viewport on every primary screen — it's the product
Use Google Blue (#4285F4) for the route polyline, location dot, and Directions FAB
Float the top search bar as a pill with 16pt margins and a soft shadow
Render the bottom sheet with 16pt top corners, visible grabber, three detents
Use the four-color pin system: Red default, Green saved, Blue home/work, Orange category
Use Google Sans for titles and CTAs, Roboto for body and metadata (tabular numerals on data)
Display traffic as colored overlay on the route: red heavy, orange slow, green clear
Trigger medium haptic on pin drop and "Start navigation"; light haptic on tab change
Show the accuracy circle around the location dot — it's the trust signal
Use #202124 canvas in dark mode with the dark-map tile palette

Don't

Don't color the map itself with brand colors — the map uses its own tile palette
Don't round map pins heavily — the tear-drop shape with 3pt white inner dot is the silhouette
Don't drop pin shadows — use a ground-hugging ellipse for on-world feel
Don't animate the map aggressively — camera moves are 0.3-0.6s ease, never snap
Don't stack more than 3 floating map controls trailing edge — it clutters the map
Don't use red (#EA4335) for generic UI actions — it reads as a pin or destructive
Don't override tabular numerals for distances — columns must align
Don't hide the bottom sheet when a route is active — the ETA card must remain visible
Don't center-align body text in place cards — Maps content is left-aligned (LTR)
Don't introduce new accent colors — the four Google logo colors each have a job already

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 Google Maps design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- Google Blue: #4285f4
- Google Red: #ea4335
- Google Yellow: #fbbc04
- Google Green: #34a853
- Category Orange: #fb8c00
- Blue Primary: #4285f4
- Blue Pressed: #1a73e8
- Blue Dark: #174ea6
- Canvas White: #ffffff
- Surface Muted: #f1f3f4

Type:
- families: Google Sans, Roboto, Fallback Stack, Numerals
- scale: 11, 13, 14, 16, 20, 28, 36
- weights: 400, 500, 700

Shape:
- radius: 16, 18, 22, 24
- elevation: Shadow: `rgba(0,0,0,0.2) 0 4px 12px` | Background: `#FFFFFF` with shadow `rgba(0,0,0,0.15) 0 2px 6px` | Shadow: `rgba(0,0,0,0.08) 0 1px 3px`

Spacing: 4, 8

Rules:
- Keep the map at 60%+ of viewport on every primary screen — it's the product
- Use Google Blue (`#4285F4`) for the route polyline, location dot, and Directions FAB
- Float the top search bar as a pill with 16pt margins and a soft shadow
- Render the bottom sheet with 16pt top corners, visible grabber, three detents
- Use the four-color pin system: Red default, Green saved, Blue home/work, Orange category
- Use Google Sans for titles and CTAs, Roboto for body and metadata (tabular numerals on data)

Avoid:
- Don't color the map itself with brand colors — the map uses its own tile palette
- Don't round map pins heavily — the tear-drop shape with 3pt white inner dot is the silhouette
- Don't drop pin shadows — use a ground-hugging ellipse for on-world feel
- Don't animate the map aggressively — camera moves are 0.3-0.6s ease, never snap
- Don't stack more than 3 floating map controls trailing edge — it clutters the map
- Don't use red (`#EA4335`) for generic UI actions — it reads as a pin or destructive

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Primary (Google Logo Colors)

Google Blue (#4285F4): Primary UI accent, route polyline, "Your location" dot, Directions FAB, active tab indicator, home/work pin.
Google Red (#EA4335): Default pin color for searched/dropped places, the iconic Maps pin.
Google Yellow (#FBBC04): Alerts, construction icons, speed trap overlays, caution chips.
Google Green (#34A853): Saved/favorited place pins, "on-time" transit, success states.
Category Orange (#FB8C00): Category pins (restaurants, gas stations, hotels) and related chips.

Blue Ramp (Operating Accent)

Blue Primary (#4285F4): Route, FAB, location dot.
Blue Pressed (#1A73E8): Pressed state on primary CTAs.
Blue Dark (#174EA6): Route polyline casing outline, navigation-mode chrome.
Blue Halo (rgba(66,133,244,0.18)): Accuracy circle around "Your location" dot, selection pill backgrounds.

Canvas & Text (Light Mode)

Canvas White (#FFFFFF): Bottom sheet surface, search bar fill, card backgrounds below the map.
Surface Muted (#F1F3F4): Category chip fill, disabled fill, sectional backgrounds.
Divider (#DADCE0): Hairline dividers between list rows and tabs.
Text Primary (#202124): Place titles, primary UI text.
Text Secondary (#5F6368): Addresses, metadata, secondary labels.
Text Tertiary (#80868B): Low-emphasis labels, disabled text.

Map Tile Palette (Light)

Road White (#FFFFFF): Street surface.
Highway Yellow (#FDF6E3): Major highways, freeways — the signature faint-yellow strip.
Water Blue (#AADAFF): Lakes, rivers, ocean.
Park Green (#C8E6C9): Parks, green spaces.
Building Fill (#F0F0F0): Building footprints at zoom, with #E0E0E0 outline.
Land Neutral (#F5F5F5): Default land tint between roads.

Dark Mode

Dark Canvas (#202124): Canvas below the map, sheet backgrounds.
Dark Surface 1 (#2D2E31): Elevated surface, search bar fill in dark.
Dark Surface 2 (#3C4043): Higher elevation, modal sheets.
Dark Divider (#3C4043): Hairline dividers in dark mode.
Dark Text Primary (#E8EAED).
Dark Text Secondary (#9AA0A6).
Dark Map Land (#242F3E), Roads (#38414E), Water (#17263C), Parks (#023E58).

Semantic

Traffic Red (#D50000): Heavy traffic segment overlay on route.
Traffic Orange (#FB8C00): Slow traffic segment overlay.
Traffic Green (#0F9D58): Clear traffic segment overlay.
Alert Yellow (#FBBC04): Construction, caution triangles.
Transit Pink (#E63946): Metro/subway line colors are city-specific; the default catch is a warm red.

Type scaleRead the full spec

Font Family

Headings / Display: Google Sans (geometric, slightly humanist — used for place titles, turn directions, tab headers)
Body / UI: Roboto (dense, optimized for UI — used for addresses, list metadata, body copy)
Fallback Stack: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif
Numerals: Roboto tabular figures for distances, ETA, speed
CJK / Non-Latin: Noto Sans family siblings fall back for every script Google ships

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Navigation Turn	Google Sans	36pt	700	1.1	-0.4pt	"Turn right onto Main St" in driving mode
Screen Title	Google Sans	28pt	500	1.15	-0.3pt	"Your places", "Settings" hero
Place Title (Card)	Google Sans	20pt	500	1.2	-0.2pt	Place sheet hero title
Section Header	Google Sans	16pt	500	1.25	-0.1pt	"Photos", "Reviews", "About"
Row Title	Roboto	16pt	500	1.3	0pt	Search result row title
Body	Roboto	14pt	400	1.4	0pt	Place description, review text
Address	Roboto	14pt	400	1.35	0pt	Street address line, monospaced digits
Meta / Distance	Roboto	13pt	400	1.3	0pt	"1.2 mi · 4 min · Open now"
Rating	Roboto	14pt	500	1.2	0pt	"4.5 ★ (2,345)" — bold rating, lighter count
Category Chip	Google Sans	14pt	500	1.0	0pt	"Restaurants", "Coffee"
Button (Primary)	Google Sans	16pt	500	1.0	0pt	"Directions", "Save"
Button (Secondary)	Google Sans	14pt	500	1.0	0pt	"Call", "Share", "Start"
Tab Label	Google Sans	11pt	500	1.0	0.2pt	Tab bar labels
ETA / Speed	Roboto	16pt	500	1.0	0pt	Navigation ETA, speed chip
Distance Pill	Roboto	13pt	500	1.0	0pt	Map distance labels at route apex

Principles

Two-font system: Google Sans for headlines and CTAs, Roboto for everything dense and data-driven. Never swap them.
Weights concentrated at 400 / 500 / 700: Regular, Medium, Bold. 500 is the workhorse weight; 700 is reserved for nav turn cards and emphasis.
Tabular numerals always: distances, ratings, ETAs, speeds use Roboto's tabular figure set so columns align.
Rating star uses Google Yellow: #FBBC04 (not orange) — consistent with Google product rating stars.
Turn card type is the only display moment: 36-48pt, Google Sans 700, reserved for in-navigation mode.
No italics: emphasis through weight only.

Components and layoutRead the full spec

Buttons

Primary FAB (Directions)

Shape: Circle, 56pt diameter, pinned 16pt from trailing/bottom edges over the map
Background: #4285F4
Icon: SF Symbol arrow.triangle.turn.up.right.diamond.fill (or custom Google Directions glyph) at 24pt in #FFFFFF
Shadow: rgba(0,0,0,0.2) 0 4px 12px
Pressed: scale 0.95, background #1A73E8, medium haptic
Used for: Directions entry from any place sheet

Primary Pill CTA ("Start", "Save")

Background: #4285F4
Text: #FFFFFF, Google Sans 16pt weight 500
Height: 44pt
Padding: 0 24pt
Corner radius: 22pt (full pill)
Pressed: #1A73E8, scale 0.98, light haptic
Used for: "Start" navigation, "Save" place, "Add stop"

Secondary Outline Button ("Call", "Share")

Background: transparent
Border: 1pt solid #DADCE0
Text: #4285F4, Google Sans 14pt weight 500
Height: 36pt
Corner radius: 18pt
Leading icon: 18pt, Google Blue
Pressed: background #F1F3F4

Icon-Only Map Control (Recenter, Layers, Compass)

Size: 40pt circle
Background: #FFFFFF with shadow rgba(0,0,0,0.15) 0 2px 6px
Icon: 20pt, #5F6368, rounded-join geometric glyph
Pressed: #F1F3F4 fill
Position: floats over the map, trailing side, stacks vertically above the Directions FAB

Category Chip (Restaurants / Hotels / Coffee)

Background: #FFFFFF with 1pt #DADCE0 hairline border
Text: #202124, Google Sans 14pt weight 500
Padding: 8pt vertical, 14pt horizontal
Corner radius: 18pt (pill)
Leading icon: 16pt colored glyph matching category (fork+knife in orange, etc.)
Active (tapped): background #E8F0FE + border #4285F4 + text #1967D2
Shadow: rgba(0,0,0,0.08) 0 1px 3px

Cards & Containers

Place Card (Bottom Sheet Hero)

Sits at the top of the bottom-sheet place details screen
Leading: photo thumbnail 72×72pt with 12pt corner radius
Place title: Google Sans 20pt w500 #202124 (2-line clamp)
Rating line: "4.5" in Roboto 14pt w500 #202124 + 4.5 ★ glyphs in #FBBC04 + "(2,345)" in Roboto 14pt w400 #5F6368
Category line: "Italian restaurant · $$ · 1.2 mi"
Open-now pill: #34A853 "Open now" + Roboto 13pt " · Closes 10 PM" in #5F6368
Action row beneath: Directions (blue pill FAB) | Save | Share | Call
Separator: 1pt #DADCE0 hairline below action row

Search Result Row

Height: 72pt
Leading: 48×48pt category-colored circle with 20pt white glyph (e.g., orange fork for restaurant)
Title: Roboto 16pt w500 #202124
Subtitle: Roboto 13pt w400 #5F6368 — "1.2 mi · 123 Main St"
Trailing: small 28pt "Directions" icon button (blue) if not currently navigating
Pressed: background #F1F3F4

Bottom Sheet Drawer

Position: anchored to bottom, 3 detents (collapsed 140pt, medium 380pt, expanded near-full)
Background: #FFFFFF light / #2D2E31 dark
Corner radius: 16pt top corners, 0pt bottom
Grabber: 32×4pt #DADCE0 pill centered 8pt from top
Shadow: rgba(0,0,0,0.12) 0 -4px 20px
Scroll behavior: sheet-inner scrolling kicks in at expanded detent

Route Card (Directions Sheet)

Modes row (Drive / Transit / Walk / Bike / Rideshare): segmented control with blue underline under active
Primary route: "25 min (18.4 mi)" Google Sans 20pt w500 + "Fastest route, usual traffic" Roboto 13pt w400 #5F6368
Alternative routes listed below in lighter gray polyline (map overlay) with "+3 min" delta chip
"Start" CTA: blue pill 44pt full-width bottom of card

Navigation

Top Floating Search Bar

Position: floats 8pt below top safe area, 16pt horizontal margins
Height: 48pt
Background: #FFFFFF
Corner radius: 24pt (full pill)
Shadow: rgba(0,0,0,0.15) 0 2px 8px
Layout: leading 28pt profile avatar (circular) | center placeholder "Search here" (Google Sans 16pt w400 #5F6368) | trailing 24pt voice-mic icon (Google Blue when listening)
Tap: expands to full-screen search with keyboard and recent searches below

Bottom Tab Bar

Height: 56pt + safe area
Background: #FFFFFF with 0.5pt top border #DADCE0, .regularMaterial blur
Tabs: Explore, Go (commute), Saved, Contribute, Updates
Icon size: 24pt, 2pt stroke, geometric
Active color: #4285F4 (filled variant with colored fill)
Inactive: #5F6368 (outline variant)
Labels: Google Sans 11pt w500, always shown
Haptic on tab change: light

Navigation Mode Top Turn Card

Position: anchored at top, below safe area, full-width minus 16pt margin
Background: #4285F4
Corner radius: 16pt
Layout: leading giant 48pt turn arrow white | turn instruction "Turn right onto Main St" in Google Sans 22pt w700 white | distance "in 0.3 mi" Roboto 14pt w400 white 70%
Shadow: rgba(0,0,0,0.2) 0 4px 16px
Next turn preview below: smaller 32pt turn arrow + "Then left onto Oak Ave" in 14pt

Navigation Mode Bottom ETA Card

Position: anchored to bottom, full-width above safe area
Background: #FFFFFF (light) / #2D2E31 (dark)
Corner radius: 16pt top corners
Content: ETA "4:32 PM" Google Sans 22pt w500 + "18 min · 12 mi" Roboto 14pt w400 #5F6368 + traffic color bar
End-trip exit pill: #EA4335 "Exit" button 36pt trailing

Input Fields

Search Input (Expanded)

Responsive behaviourRead the full spec

Device Sizes

Device	Width	Key Changes
iPhone SE (3rd gen)	375pt	Category chip row fits 4 visible, bottom sheet collapsed 120pt
iPhone 13/14/15	390pt	Standard 5 visible chips, 140pt collapsed sheet
iPhone 15/16 Pro	393pt	Dynamic Island pushes search bar 8pt lower
iPhone 15/16 Pro Max	430pt	6 visible chips, turn card scales to 180pt tall in nav mode
iPad	768pt+	Map full-bleed; sheet becomes a 420pt floating panel anchored leading side

Dynamic Type

Place titles, addresses, row titles: full scale
Navigation turn instruction: scales to 48pt max
Distance/ETA labels: fixed size (layout-sensitive)
Speed chip: fixed size
Tab labels: scale up to 13pt, then truncate

Orientation

Explore / Saved / Updates: portrait-locked
Navigation mode: rotates to landscape — turn card moves to top, ETA to bottom-right, map expands horizontally
Street View: rotates freely — 360° horizontal pan works best with device orientation

Touch Targets

Directions FAB: 56pt (hero action)
Top search bar: 48pt tall, full-row tappable
Category chips: 36pt tall with 44pt effective hit
Map pins: 40pt hit area despite 32pt visual
Map controls: 40pt visible, 44pt hit
Tab bar icons: 24pt icon inside 44pt hit

Safe Area Handling

Top: search bar floats 8pt below safe area top
Bottom: sheet extends to home indicator; content padded 24pt above indicator
Dynamic Island: search bar sits 8pt below the island bottom edge
Sides: map edge-to-edge; floating controls 16pt inset

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-google-maps {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #202124;
  --heading-color: #202124;
  --link-color: #ab6000;
  --link-hover-color: #784300;
  --border-color: #d7d7d8;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(32,33,36,0.06);
  --card-hover-shadow: 0 6px 18px rgba(32,33,36,0.12);
  --header-bg: #202124;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #6e6f71;
  --button-bg: #fb8c00;
  --button-text-color: #000000;
  --button-hover-bg: #c87000;
  --button-border: none;
  --button-border-radius: 22px;
  --button-secondary-bg: #f2f2f2;
  --button-secondary-text-color: #202124;
  --button-secondary-hover-bg: #e4e4e5;
  --button-secondary-border: 1px solid #d7d7d8;
  --prompt-bg: #f4f4f4;
  --prompt-text-color: #202124;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-roboto);
  --card-border-radius: 22px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

kashiyama 83.2%
gmail 82.4%
snapchat 81.7%
spotify 78.6%
google calendar 75.5%

Where this came from

Source document: ios/design-md/travel/google-maps/DESIGN.md · 26.9 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.