Shazam DESIGN.md

1. Visual Theme & Atmosphere

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 → #0088FF over #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

2. Color Palette & Roles

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 to 0): 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.

3. Typography Rules

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

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)

4. Component Stylings

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 thin rgba(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: #08090E with the Apple Music glyph in #FA243C leading
• 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: #FFFFFF at 85% opacity
• Pressed: #FFFFFF full
• 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, 1pt rgba(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 xmark in 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 #0088FF border, cursor #0088FF
• Text in field: #FFFFFF

Filter Chip (library)

• Background: rgba(255,255,255,0.08) default / #0088FF selected
• 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)

Auto-Shazam / Background Pulse (Concept)

• When Auto-Shazam is on, a subtle persistent ring breathes at the top of the screen as an always-listening indicator (low-key, rgba(255,255,255,0.16))

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 16, 20, 24, 28, 32, 40, 56, 72
• Hero: the button is vertically centered (slightly above middle, ~42% from top); prompt 24pt below it
• Sheet rows: 16pt horizontal padding, 8pt vertical internal

Grid & Container

• The hero has no grid — it is a single centered focal composition
• The bottom sheet uses a single-column list, full width with 16pt margins
• Library grid (optional view): 2-column, 12pt gap

Whitespace Philosophy

• Maximal negative space on the hero: one button, one prompt, vast glowing emptiness — the emptiness is the design
• The sheet is dense by contrast: history rows pack tightly once revealed, intentionally distinct from the airy hero
• Nothing competes with the button: no chrome, no tabs, no banners on the main screen

Border Radius Scale

• Soft (10-12pt): album art on rows and the result card
• Comfortable (20pt): the result card
• Sheet (24pt): the bottom sheet top corners
• Full Pill (500pt): all buttons, chips, search, the secondary glass actions
• Circle (50%): the Shazam button, the pulse rings, avatars, icon hit targets

6. Depth & Elevation

Shadow Philosophy: Shazam does not use neutral gray shadows — depth is expressed through glow and glass. The button casts a blue-tinted shadow that ties it to the gradient rather than separating it from a flat surface; while listening, that shadow becomes an animated glow. Cards are not opaque-with-shadow but translucent glass with a faint white border, so the gradient reads through them. The only conventional dark shadow is under the bottom sheet, lifting it off the void.

Motion

• Idle breathing: button scale 1.0 → 1.04 → 1.0, 2.4s ease-in-out, infinite
• Concentric ring emission (signature): each ring scales 1.0 → 2.6×, opacity 0.22 → 0 over 1.8s, new ring every 0.6s while listening
• Tap: button scale 0.94 spring (damping 0.8), .impactOccurred(.heavy) haptic, glow blooms
• Result reveal: rings collapse, button shrinks up, card springs in (scale + opacity, 0.45s, damping 0.8)
• Sheet drag: native detent physics, rubber-band at the top
• No match: a single soft horizontal shake of the button + .notificationOccurred(.error) haptic

7. Do's and Don'ts

Do

• 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
• 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

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Gradient core: #0050FF
• Gradient mid (Shazam Blue): #0088FF
• Gradient edge (space tint): #08090E
• Blue pressed: #006FE0
• Surface glass: rgba(255,255,255,0.08)
• Surface glass strong: rgba(255,255,255,0.14)
• Divider: rgba(255,255,255,0.12)
• Text primary: #FFFFFF
• Text secondary (periwinkle): #B8C4FF
• Apple Music accent: #FA243C
• Error red: #FF453A

Example Component Prompts

• "Create the SwiftUI Shazam hero screen: full-bleed radial gradient background — radial-gradient at 50% 42% from #0088FF (0%) to #0050FF (30%) to #08090E (100%). Centered 132pt circular Shazam button with a white-to-#CFE0FF radial fill and the Shazam glyph in #0088FF. 'Tap to Shazam' in Montserrat 18pt weight 700 #FFFFFF, 24pt below. No tab bar. A blue-tinted shadow rgba(0,80,255,0.45) 0 16px 48px under the button."
• "Build the Shazam listening state: 3 concentric rings emitting from the 132pt button — each ring scales from 1.0 to 2.6× and fades opacity 0.22 → 0 over 1.8s, a new ring launching every 0.6s. A rgba(0,136,255,0.5) 60pt-blur glow blooms around the button. Prompt text reads 'Listening for music…' in Montserrat 16pt weight 700 #FFFFFF."
• "Design the Shazam result card: a rgba(255,255,255,0.08) glass card, 20pt corner radius, 1pt rgba(255,255,255,0.14) border, floating over the blue gradient. 88×88pt album art (12pt radius) leading, title 22pt weight 700 #FFFFFF + artist 14pt weight 500 #B8C4FF. Below: a full-width white 'Open in Apple Music' pill (16pt 700, Apple Music glyph in #FA243C) and a row of glass secondary actions. Card springs up from the button position (0.45s spring, damping 0.8)."
• "Create a Shazam recent-shazam row in the bottom sheet: 68pt height, 52×52pt album art (10pt radius), title 16pt weight 700 #FFFFFF + artist 14pt weight 500 #B8C4FF, trailing time '2h ago' 13pt weight 500 #B8C4FF + 20pt chevron. Pressed background rgba(255,255,255,0.06); 1pt rgba(255,255,255,0.12) divider."
• "Build the Shazam bottom sheet: rgba(255,255,255,0.14) background with a 40-radius backdrop blur over the gradient, 24pt top corner radius, a 36×4pt rgba(255,255,255,0.4) grab handle centered at the top. Detents: peek / half / full. Reveals 'Your Shazams' — the chronological list of matched tracks."

Iteration Guide

1. The canvas is a radial blue gradient (#0050FF core → #0088FF → #08090E), not a flat color
2. The Shazam button is the single dominant centered object — nothing competes with it; there is NO tab bar
3. Concentric pulse rings emitting outward while listening is the signature interaction — emit, scale 2.6×, fade
4. Surfaces are translucent glass (rgba(255,255,255,0.08)) so the gradient reads through
5. Secondary text is periwinkle (#B8C4FF), tuned to the blue — never plain white-gray
6. Depth is blue-tinted glow + glass, never neutral-gray shadows
7. Typography: Montserrat (SF Pro fallback), weights 500/700 only, airy spacing on the hero
8. Heavy haptic on tap; error haptic + soft shake on no-match; result springs up from the button