At a glance
9tokens
9type steps
1radius steps
8pxspacing base
Shazam, in one page
Shazam's iOS app is a single-purpose instrument, and its design is ruthlessly devoted to that one purpose: press the button, name the song. The canvas is not a flat color but a deep radial gradient — Shazam Blue (#0088FF) blooming from a brighter #0050FF core out into a near-black space tint (#08090E) at the edges. The effect is a glowing well of blue with a single object at the center of gravity: the Shazam button. There is no feed, no tab bar, no navigation chrome competing for attention on the main screen. The entire interface is the gradient, the button, and the concentric pulse rings that radiate from it while listening.
The accent system is monochromatic blue with light text. Shazam Blue (#0088FF) is the brand, the button, the active state, and the link color; a deeper pressed blue (#006FE0) handles tap-down. Surfaces are not opaque panels but translucent glass — rgba(255,255,255,0.08) cards floating over the gradient, with rgba(255,255,255,0.12) hairline dividers. White (#FFFFFF) is primary text; a cool periwinkle (#B8C4FF) is secondary text, chosen because it harmonizes with the blue gradient rather than fighting it. The whole app feels like a piece of consumer hardware — a single glowing tap-target you point at the world.
Typography is Montserrat — a geometric sans with a confident, rounded warmth (SF Pro is the production fallback). Weights stay at 500 / 700. The type is sparse: there are no dense lists on the hero screen, so type appears in punchy, well-spaced moments — the "Tap to Shazam" prompt under the button, the result card's track title and artist, and the recent-shazams list in the bottom sheet. The most expressive typographic moment is the result reveal: the matched track's title animates in at 22-28pt bold over its album art, with an "Open in Apple Music" affordance directly beneath.
Key Characteristics:
- Radial blue gradient canvas (
#0050FF→#0088FFover#08090E) — a glowing well, not a flat color - A single giant central Shazam button with concentric pulse rings — the entire UI's center of gravity
- No tab bar — one hero screen plus a draggable bottom sheet for library/history
- Translucent glass surfaces (
rgba(255,255,255,0.08)) floating over the gradient - Pulsing tap-to-listen interaction — rings expand outward while the mic is open
- Result card: album art + title + artist + "Open in Apple Music"
- Recent-shazams list in the bottom sheet
- Montserrat typography (SF Pro fallback), weights 500/700
- Periwinkle secondary text (
#B8C4FF) tuned to the blue gradient
Do's and don'ts
Do
- Use the radial blue gradient (
#0050FFcore →#0088FF→#08090Eedge) as the hero canvas - Make the Shazam button the single, dominant, centered object — nothing competes with it
- Emit concentric pulse rings outward while listening — this is the signature interaction
- Use translucent glass surfaces (
rgba(255,255,255,0.08)) so the gradient reads through cards - Keep secondary text periwinkle (
#B8C4FF) — it harmonizes with the blue - Express depth through blue-tinted glow and glass, not gray shadows
- Use Montserrat (SF Pro fallback) at weights 500/700 only
- Trigger a heavy haptic on the Shazam tap, an error haptic on no-match
- Reveal history via an upward-draggable bottom sheet with detents
Don't
- Don't add a bottom tab bar — the single-purpose hero is the defining choice
- Don't use a flat solid color for the canvas — the radial gradient is the brand
- Don't make surfaces opaque — they must be translucent glass over the gradient
- Don't let any element rival the button for attention on the hero
- Don't use neutral-gray drop shadows — depth is glow and glass
- Don't use white-only secondary text — periwinkle (
#B8C4FF) is tuned to the gradient - Don't use thin or black font weights — Montserrat 500/700 only
- Don't animate the rings with bounce — they expand and fade linearly/ease-out
- Don't crowd the hero with banners, counts, or chrome
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 Shazam design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Shazam Blue: #0088ff
- Bright Core: #0050ff
- Blue Pressed: #006fe0
- Space Tint: #08090e
- Gradient Core: #0050ff
- Text Primary: #ffffff
- Text Secondary: #b8c4ff
- Apple Music Pink: #fa243c
- Error Red: #ff453a
Type:
- families: Montserrat, Production Fallback, Numerics
- scale: 11, 13, 14, 15, 16, 18, 20, 22, 28
- weights: 500, 700
Shape:
- radius: 24
Spacing: 8, 12, 14
Rules:
- Use the radial blue gradient (`#0050FF` core → `#0088FF` → `#08090E` edge) as the hero canvas
- Make the Shazam button the single, dominant, centered object — nothing competes with it
- Emit concentric pulse rings outward while listening — this is the signature interaction
- Use translucent glass surfaces (`rgba(255,255,255,0.08)`) so the gradient reads through cards
- Keep secondary text periwinkle (`#B8C4FF`) — it harmonizes with the blue
- Express depth through blue-tinted glow and glass, not gray shadows
Avoid:
- Don't add a bottom tab bar — the single-purpose hero is the defining choice
- Don't use a flat solid color for the canvas — the radial gradient is the brand
- Don't make surfaces opaque — they must be translucent glass over the gradient
- Don't let any element rival the button for attention on the hero
- Don't use neutral-gray drop shadows — depth is glow and glass
- Don't use white-only secondary text — periwinkle (`#B8C4FF`) is tuned to the gradient
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Shazam Blue (
#0088FF): The brand, the button core, active states, links, the "Open in Apple Music" affordance accent. - Bright Core (
#0050FF): The brighter center of the radial gradient, behind the button. - Blue Pressed (
#006FE0): Tap-down state for the Shazam button and blue controls.
Canvas & Gradient
- Space Tint (
#08090E): The near-black edge of the radial gradient (the "void" the blue blooms from). - Radial Canvas:
radial-gradient(circle at 50% 42%, #0088FF 0%, #0050FF 30%, #08090E 100%)— the signature hero background. - Gradient Core (
#0050FF): Bright center directly behind the button.
Surfaces (Translucent Glass)
- Surface Glass (
rgba(255,255,255,0.08)): Cards, the result card, sheet rows — floating over the gradient. - Surface Glass Strong (
rgba(255,255,255,0.14)): Pressed glass, the bottom-sheet background. - Divider (
rgba(255,255,255,0.12)): Hairline dividers between sheet rows.
Text
- Text Primary (
#FFFFFF): Track titles, the "Tap to Shazam" prompt, primary UI text. - Text Secondary (
#B8C4FF): Artist names, metadata, sheet subtitles — periwinkle, tuned to the blue. - Text Tertiary (
rgba(184,196,255,0.55)): Disabled state, very low-emphasis labels.
Semantic
- Pulse Ring (
rgba(255,255,255,0.22)→ fades to0): The concentric rings expanding from the listening button. - Apple Music Pink (
#FA243C): The Apple Music logo accent on the "Open in Apple Music" button (brand-accurate, used only there). - Listening Glow (
rgba(0,136,255,0.5)): The amplified glow around the button while the mic is open. - Error Red (
#FF453A): "No match found" / connectivity errors.
Light Mode
Shazam's iOS hero experience is dark by design — the radial blue gradient over a near-black space tint is the brand identity and the optimal stage for the glowing button. Result cards and sheets remain on the translucent-glass-over-gradient treatment regardless of system appearance.
Type scaleRead the full spec
Font Family
- Primary:
Montserrat— geometric sans with rounded warmth (Shazam's brand voice) - Production Fallback:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerics: Proportional figures (no dense tabular data on the hero — counts are rare)
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Result Title (Large) | Montserrat | 28pt | 700 | 1.15 | -0.3pt | Matched track title on full result reveal |
| Result Title | Montserrat | 22pt | 700 | 1.2 | -0.2pt | Track title on the result card |
| Section Header | Montserrat | 20pt | 700 | 1.2 | -0.2pt | "Your Shazams", sheet section title |
| Tap Prompt | Montserrat | 18pt | 700 | 1.2 | 0.2pt | "Tap to Shazam" under the button |
| Card Title | Montserrat | 16pt | 700 | 1.3 | 0pt | Recent-shazam row title |
| Artist / Subtitle | Montserrat | 14pt | 500 | 1.3 | 0pt | Artist name on result + rows |
| Body | Montserrat | 15pt | 500 | 1.45 | 0pt | Lyrics snippet, descriptions |
| Meta / Time | Montserrat | 13pt | 500 | 1.3 | 0pt | "2h ago", "Yesterday" |
| Label (UPPER) | Montserrat | 11pt | 700 | 1.2 | 1.0pt | "NOW PLAYING", section eyebrow |
| Button (Primary) | Montserrat | 16pt | 700 | 1.0 | 0.3pt | "Open in Apple Music", primary CTAs |
| Button (Secondary) | Montserrat | 14pt | 700 | 1.0 | 0.2pt | Glass secondary actions |
| Listening Label | Montserrat | 16pt | 700 | 1.2 | 0.2pt | "Listening for music…" while mic is open |
Principles
- Only two weights — 500 / 700: Medium for body/secondary, Bold for everything that matters
- Generous spacing, never dense: The hero has one or two type moments — they get room to breathe
- All-caps eyebrows with +1.0pt tracking for the technical "NOW PLAYING" voice
- Negative tracking only on large titles (-0.2 to -0.3pt); prompts use slightly positive tracking
- Dynamic Type respected on titles, artists, body; the tap prompt and listening label stay fixed (centered layout)
Components and layoutRead the full spec
Buttons
The Shazam Button (Primary, Signature)
- Shape: Circle, diameter 132pt (the dominant object on the hero screen)
- Background: a subtle white-to-glass radial —
radial-gradient(circle at 38% 32%, #FFFFFF 0%, #E8F0FF 60%, #CFE0FF 100%)with a thinrgba(255,255,255,0.4)ring - Glyph: the Shazam mark (a stylized "S" wave) in
#0088FF, ~52pt - Idle: a slow ~2.4s breathing pulse (scale 1.0 → 1.04 → 1.0)
- Pressed: scale 0.94, glyph tint
#006FE0, with.impactOccurred(.heavy)haptic - Listening: button stays put while concentric rings emit outward and a
rgba(0,136,255,0.5)glow amplifies
Open in Apple Music (Result CTA)
- Background:
#FFFFFF - Text:
#08090Ewith the Apple Music glyph in#FA243Cleading - Padding: 14pt vertical, 28pt horizontal
- Corner radius: 500pt (full pill)
- Font: Montserrat 16pt weight 700, +0.3pt tracking
- Pressed:
#E8F0FF, scale 0.97
Glass Secondary (Share / Add / Lyrics)
- Background:
rgba(255,255,255,0.08) - Text:
#FFFFFF - Border: 1pt
rgba(255,255,255,0.16) - Padding: 12pt vertical, 20pt horizontal
- Corner radius: 500pt
- Font: Montserrat 14pt weight 700
- Pressed: background
rgba(255,255,255,0.14)
Icon Actions (Share, More, Library, Settings)
- Size: 22pt glyph, 44pt hit area
- Default:
#FFFFFFat 85% opacity - Pressed:
#FFFFFFfull - Top-bar icons (settings, library) sit at 24pt over the gradient
Text Button ("See all", "View library")
- Font: Montserrat 14pt weight 700
- Color:
#B8C4FF - No underline, 44pt hit area
Cards & Containers
Result Card
- Surface:
rgba(255,255,255,0.08)glass, 20pt corner radius, 1ptrgba(255,255,255,0.14)border - Layout: 88pt × 88pt album art (12pt radius) leading → stacked title (22pt 700) + artist (14pt 500
#B8C4FF) - Below: a full-width "Open in Apple Music" pill + a row of glass secondary actions
- Appears via a spring rise from the button position
Recent-Shazam Row (Bottom Sheet)
- Height: 68pt
- Layout: 52pt × 52pt album art (10pt radius) → stacked title (16pt 700) + artist (14pt 500
#B8C4FF) → trailing time (13pt 500#B8C4FF) + 20pt chevron - Background: transparent over the sheet glass; pressed:
rgba(255,255,255,0.06) - Divider: 1pt
rgba(255,255,255,0.12)between rows
Bottom Sheet (Library / History)
- Background:
rgba(255,255,255,0.14)with a heavy backdrop blur (40) over the gradient - Top corner radius: 24pt; a 36pt × 4pt grab handle (
rgba(255,255,255,0.4)) centered at the top - Detents: peek (shows the grab handle + 1 row), half, full
- Drag up reveals "Your Shazams" — the chronological list of matched tracks
Now-Playing Mini Strip (when audio plays)
- Sits at the bottom above the sheet handle, full width, 56pt tall
- Surface:
rgba(255,255,255,0.10)glass - 40pt art (8pt radius) + title 14pt 700 + artist 12pt 500
#B8C4FF+ play/pause 20pt
Navigation
No Tab Bar (Signature Absence)
- Shazam's hero screen has *no* bottom tab bar — this is a deliberate, defining choice
- Navigation is: the hero button (center), a top-left settings/profile icon, a top-right library icon, and the upward-draggable bottom sheet for history
- This single-purpose layout is core to the brand — do not add tabs
Top Bar (over the gradient)
- Height: 44pt + safe area, fully transparent (the gradient shows through)
- Left: profile/settings icon (26pt,
#FFFFFF) - Right: library/history icon (26pt,
#FFFFFF) - No title — the button is the screen's subject
Result Screen Nav
- A back/close affordance (28pt
xmarkin a glass circle) top-left returns to the hero - The result screen retains the gradient with the card floating over it
Input Fields
Search (within the library sheet)
- Background:
rgba(255,255,255,0.10)glass - Height: 44pt
- Corner radius: 500pt (full pill)
- Leading SF Symbol
magnifyingglass, 18pt,#B8C4FF - Placeholder: "Search your Shazams", 16pt 500
#B8C4FF - Focus: 1pt
#0088FFborder, cursor#0088FF - Text in field:
#FFFFFF
Filter Chip (library)
- Background:
rgba(255,255,255,0.08)default /#0088FFselected - Text:
#FFFFFF(both states) - Padding: 8pt vertical, 18pt horizontal
- Corner radius: 500pt (full pill)
- Font: Montserrat 14pt weight 700
- Examples: "All", "Apple Music", "Concerts"
Distinctive Components
The Pulsing Tap-to-Listen Button + Concentric Rings
- The hero button is wrapped by 3 concentric rings
- Idle: rings are invisible; the button breathes (scale 1.0 → 1.04 → 1.0 over 2.4s)
- On tap (listening): rings emit outward continuously — each ring starts at the button radius, scales to ~2.6×, and fades opacity 0.22 → 0 over 1.8s, staggered by 0.6s so a new ring launches as the previous fades
- A
rgba(0,136,255,0.5)glow blooms around the button while the mic is open - The prompt text swaps "Tap to Shazam" → "Listening for music…"
- This expanding-ripple system is the single most recognizable Shazam interaction
Result Reveal Transition
- On match, the rings collapse, the button shrinks toward the top, and the result card springs up from the button's position (scale + opacity, 0.45s spring, damping 0.8)
- The matched album art is the visual anchor of the rise
Recent-Shazams Sheet Drag
- The bottom sheet uses native-feel detents; dragging up over the gradient reveals the chronological list
- Each row's album art is full-color (the only saturated content over the monochrome-blue stage)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Button 116pt; ring max scale 2.4× |
| iPhone 13/14/15 | 390pt | Standard button 132pt; ring max 2.6× |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the transparent top bar |
| iPhone 15/16 Pro Max | 430pt | Button 148pt; ring max 2.8×; result card art 100pt |
| iPad | 768pt+ | Button 180pt centered; result card max 560pt wide, centered |
Dynamic Type
- Result title, artist, sheet rows, body: full scale
- "Tap to Shazam" prompt + listening label: fixed (centered hero layout is geometry-sensitive)
- The Shazam glyph: fixed proportion of the button (never scales independently)
Orientation
- Hero (Shazam screen): portrait-locked — the centered radial composition is portrait-tuned
- Bottom sheet / library: portrait-locked
- Music video result (if shown): rotates to landscape
Touch Targets
- The Shazam button: 132pt — by far the largest tap target in any app; impossible to miss
- "Open in Apple Music" pill: full-width, 50pt+ tall
- Sheet rows: 68pt height, full-row tappable
- Top-bar icons: 26pt glyph, 44pt hit area
Safe Area Handling
- Top: transparent bar respects safe area; Dynamic Island floats over the gradient (no collision — nothing is there)
- Bottom: the sheet handle respects the home indicator; peek detent sits above it
- The gradient extends fully edge-to-edge under the status bar and home indicator
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-shazam {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #555555;
--heading-color: #555555;
--link-color: #0072d7;
--link-hover-color: #0057a4;
--border-color: #e0e0e0;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(85,85,85,0.06);
--card-hover-shadow: 0 6px 18px rgba(85,85,85,0.12);
--header-bg: #555555;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #737373;
--button-bg: #0088ff;
--button-text-color: #000000;
--button-hover-bg: #006dcc;
--button-border: none;
--button-border-radius: 24px;
--button-secondary-bg: #f5f5f5;
--button-secondary-text-color: #555555;
--button-secondary-hover-bg: #ebebeb;
--button-secondary-border: 1px solid #e0e0e0;
--prompt-bg: #f7f7f7;
--prompt-text-color: #555555;
--base-font: var(--font-montserrat);
--heading-font: var(--font-montserrat);
--card-border-radius: 24px;
}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/music/shazam/DESIGN.md· 21.0 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.