At a glance
17tokens
11type steps
4radius steps
7pxspacing base
Deezer, in one page
Deezer's iOS app is a dark-native music player whose entire identity rests on one move: a violet-tinted near-black canvas (#0F0D13) across which a single purple→pink gradient (#A238FF → #FF0092) is rationed like a precious resource. The app never goes pure black and never offers a true light theme — the slight violet warmth in the background means the brand gradient feels native to the same color world rather than pasted on top. Open the app and you land on a "Home for you" feed of mixes and editorial cards, but the screen everything builds toward is Flow Now Playing: a full-bleed living-gradient artwork tile with the equalizer waveform embedded directly inside it, a 68pt circular gradient play button, a gradient scrubber, and song metadata in heavy Inter weights.
The signature affordance is Flow — Deezer's personalized infinite mix. It is not a playlist; it is a generative stream represented by an animated living-gradient cover (purples bleeding into magenta-pink) badged with a small lightning "FLOW" pill. The second signature is the embedded equalizer: instead of a static album image, Flow's artwork carries a row of luminous white bars that rise and fall with the music, so the artwork itself *is* the visualizer. The third is the gradient-as-scarcity rule: chrome (chevrons, secondary transport, tab labels, dividers) stays strictly monochrome #A29CB0, so the only colored thing on screen is the part that *is the music* — the play button, the scrubber fill, the Flow badge, and the now-playing equalizer marker on song rows.
The color system is intentionally tiny. There is one canvas, two raised surfaces, one divider, two text levels, and exactly one accent expressed as a gradient (with its two endpoint hues, purple #A238FF and pink #FF0092, usable solo for icons and small fills). Album and Flow artwork remains full-color and luminous — content is allowed to be vivid; UI chrome is not. There is no orange, no green-except-success, no secondary brand palette. This restraint is the whole point: when 95% of the screen is desaturated near-black, the gradient reads instantly as "alive."
Typography uses Deezer Sans (the brand's proprietary geometric sans) with Inter as the faithful fallback — both are clean, slightly geometric, and carry weight beautifully. Hierarchy is heavy and confident: screen titles at 32pt weight 800, the now-playing track title at 26pt weight 800, sections at 22pt weight 700, body at 16pt weight 400. Overlines (the "FLOW · YOUR MIX" context label) are 12pt weight 700 uppercase with wide tracking. The type system leans into bold display weights because the canvas is so dark and quiet that text needs presence to anchor the layout.
Key Characteristics:
- Violet-tinted near-black canvas (
#0F0D13) — dark-native, no true light theme, never pure black - Purple→pink gradient (
#A238FF→#FF0092) rationed as a scarce accent — only on "alive" elements - Flow — personalized infinite mix with a living-gradient cover + lightning "FLOW" badge
- Embedded equalizer — luminous white bars *inside* the Flow artwork; the art is the visualizer
- 68pt circular gradient play button — the single largest, brightest object on Now Playing
- Gradient scrubber — track fill is the brand gradient; rest of UI is monochrome
- Now-playing-aware song rows — the playing track turns pink
#FF0092with a mini equalizer - Heavy display typography — Deezer Sans / Inter at weights 700–800 for titles
- Pill geometry — primary buttons and the Flow badge are fully rounded (999pt)
- Monochrome chrome — chevrons, secondary transport, tab icons all
#A29CB0 - Bottom tab strip: Home / Search / Music / Profile, with purple active tint
- Full-color artwork, desaturated UI — content is vivid, chrome is quiet
Do's and don'ts
Do
- Use the violet-tinted near-black
#0F0D13as the canvas — never pure#000000 - Treat the purple→pink gradient as scarce — only the play button, scrubber fill, FLOW badge, and now-playing equalizer
- Embed the equalizer *inside* the Flow artwork — the art is the visualizer
- Make the circular play button the single largest, brightest object on Now Playing (68pt, gradient, pink glow)
- Recolor the now-playing song row to pink
#FF0092and swap its trailing icon for a live equalizer - Keep all chrome (chevrons, secondary transport, tab icons) monochrome
#A29CB0 - Use heavy display weights (700–800) for titles — the dark canvas needs bold anchors
- Use pill geometry (999pt) for buttons, chips, and the FLOW badge
- Cast *colored* glows (violet under artwork, pink under play) — never gray drop shadows
- Use tabular numerals for every timestamp and scrubber readout
- Let album/Flow artwork stay full-color and luminous — content is vivid
Don't
- Don't use pure black
#000000— the violet tint is the brand's warmth - Don't spray the gradient across cards, headers, or backgrounds — it must stay scarce
- Don't render a separate visualizer panel — the equalizer belongs inside the artwork
- Don't color secondary transport controls — shuffle/prev/next/repeat stay
#A29CB0 - Don't ship a real light theme — Deezer is dark-native; light is OS-forced fallback only
- Don't use gray Material drop shadows on the dark canvas — use colored glows or fill steps
- Don't use thin/light font weights for titles — minimum 600, headings 700–800
- Don't put borders on cards — distinguish surfaces by fill (
#19161F/#221E2B) - Don't tint the now-playing row purple — the "playing" state color is pink
#FF0092 - Don't animate the equalizer while paused — bars freeze when playback stops
- Don't introduce a second accent hue (orange/teal/etc.) — the gradient is the only brand color
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 Deezer design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Deezer Purple: #a238ff
- Deezer Pink: #ff0092
- Purple Deep: #7c28c4
- Pink Pressed: #d60079
- Canvas: #0f0d13
- Surface 1: #19161f
- Surface 2: #221e2b
- Divider: #2a2633
- Overlay Scrim: #0f0d13
- Text Primary: #ffffff
Type:
- families: Deezer Sans, Inter, Faithful Fallback, System Fallback Stack
- scale: 10, 11, 12, 13, 14, 15, 16, 18, 22
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 2, 3, 12, 16
- elevation: Shadow: `0 12px 28px -8px rgba(255,0,146,0.6)` — colored glow, not gray | Pressed: scale 0.94, 80ms; shadow tightens | Shadow: `0 24px 48px -20px rgba(162,56,255,0.55)` — colored ambient lift
Spacing: 7, 10, 12, 13, 14, 28
Rules:
- Use the violet-tinted near-black `#0F0D13` as the canvas — never pure `#000000`
- Treat the purple→pink gradient as scarce — only the play button, scrubber fill, FLOW badge, and now-playing equalizer
- Embed the equalizer *inside* the Flow artwork — the art is the visualizer
- Make the circular play button the single largest, brightest object on Now Playing (68pt, gradient, pink glow)
- Recolor the now-playing song row to pink `#FF0092` and swap its trailing icon for a live equalizer
- Keep all chrome (chevrons, secondary transport, tab icons) monochrome `#A29CB0`
Avoid:
- Don't use pure black `#000000` — the violet tint is the brand's warmth
- Don't spray the gradient across cards, headers, or backgrounds — it must stay scarce
- Don't render a separate visualizer panel — the equalizer belongs inside the artwork
- Don't color secondary transport controls — shuffle/prev/next/repeat stay `#A29CB0`
- Don't ship a real light theme — Deezer is dark-native; light is OS-forced fallback only
- Don't use gray Material drop shadows on the dark canvas — use colored glows or fill steps
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Deezer Purple (
#A238FF): Gradient start; solo accent for active tab, links, small icon fills. - Deezer Pink (
#FF0092): Gradient end; the "now playing" / favorited state color and equalizer color. - Flow Gradient:
linear-gradient(135deg, #A238FF → #FF0092)— the play button, scrubber fill, Flow badge. - Purple Deep (
#7C28C4): Pressed state for purple fills; deep tone inside artwork gradients. - Pink Pressed (
#D60079): Pressed state for pink fills.
Canvas & Surfaces (Dark — primary, the only real theme)
- Canvas (
#0F0D13): Primary app background — violet-tinted near-black, NOT pure black. - Surface 1 (
#19161F): Cards, sheets, raised rows, mini-player bar. - Surface 2 (
#221E2B): Hovered/pressed rows, inactive scrubber track, chips. - Divider (
#2A2633): Hairline separators between rows and sections. - Overlay Scrim (
#0F0D13D9): 85% canvas behind modals and the expanded player.
Canvas & Surfaces (Light — fallback only; Deezer ships dark-first)
A light theme is not part of the real product; if a host OS forces light, invert minimally:
| Role | Dark Mode (primary) | Light Mode (fallback) |
|---|---|---|
| Canvas | #0F0D13 | #FFFFFF |
| Surface 1 | #19161F | #F4F2F7 |
| Surface 2 | #221E2B | #EAE7F0 |
| Divider | #2A2633 | #E3E0EA |
| Text Primary | #FFFFFF | #15121C |
| Text Secondary | #A29CB0 | #6E6880 |
Text
- Text Primary (
#FFFFFF): Track titles, screen titles, primary metadata on dark. - Text Secondary (
#A29CB0): Artist names, sub-labels, inactive icons, captions. - Text Tertiary (
#6E6880): Disabled, very low-emphasis timestamps. - Text On Gradient (
#FFFFFF): Always white — used on the play button and primary CTA.
Artwork Gradient Tones (full-color, content layer)
The Flow / mix cover gradients use richer mid-tones than the UI accent:
| Role | Color |
|---|---|
| Art Violet | #A238FF |
| Art Magenta Mid | #C71F8E |
| Art Pink | #FF0092 |
| Art Deep Plum | #7C28C4 |
| Art Highlight | #FFFFFF38 (22% white radial bloom) |
Semantic
- Success Green (
#1ED760): Download-complete, "added to favorites" toast confirm. - Error Red (
#FF4D5E): Failed download, offline error, destructive confirm. - Warning Amber (
#FFB02E): Low-bitrate / data-saver warning banners. - Equalizer Pink (
#FF0092): Now-playing animated bars on rows and in artwork (white inside art on gradient).
Type scaleRead the full spec
Font Family
- Primary:
Deezer Sans— Deezer's proprietary geometric humanist sans, clean and confident at display weights. - Faithful Fallback:
Inter(by Rasmus Andersson, SIL OFL) — near-identical geometric humanist proportions; the recommended substitute when Deezer Sans is unavailable. - System Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Tabular figures for all timestamps and scrubber times (
font-variant-numeric: tabular-nums).
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Screen Title | Deezer Sans | 32pt | 800 | 1.15 | -0.6pt | "Flow", "Home", page hero titles |
| Now Playing Title | Deezer Sans | 26pt | 800 | 1.2 | -0.4pt | Track title on Now Playing screen |
| Section Header | Deezer Sans | 22pt | 700 | 1.25 | -0.2pt | "Made for you", "Your top mixes" |
| Subhead | Deezer Sans | 18pt | 700 | 1.3 | -0.1pt | Card group titles, sheet headers |
| Body | Inter | 16pt | 400 | 1.5 | 0pt | Descriptions, paragraph copy |
| Row Title | Deezer Sans | 15pt | 600 | 1.3 | 0pt | Song/playlist row primary line |
| Now Playing Artist | Inter | 15pt | 500 | 1.35 | 0pt | Artist · album sub-line |
| Meta | Inter | 14pt | 400 | 1.4 | 0pt | Artist names, secondary sub-labels |
| Overline | Deezer Sans | 12pt | 700 | 1.0 | 0.4pt | "FLOW · YOUR MIX" context label, UPPERCASE |
| Scrubber Time | Inter | 11pt | 500 | 1.0 | 0pt | Elapsed / remaining, tabular |
| Tab Label | Deezer Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Button | Deezer Sans | 16pt | 700 | 1.0 | 0pt | Primary / pill buttons |
| Chip | Deezer Sans | 13pt | 700 | 1.0 | 0.2pt | Genre/mood chips, FLOW badge |
Principles
- Heavy by default: Titles live at 700–800. On a near-black canvas, bold weights are how hierarchy reads — never use thin/light for headings.
- Display vs reading split: Deezer Sans for titles, rows, chips, buttons (brand voice); Inter at 400/500 for body and metadata (reading rhythm).
- Tracked uppercase overlines: The context label above artwork ("FLOW · YOUR MIX") is the one place wide letter-spacing appears — it frames the hero.
- Tabular numerals everywhere time appears: Scrubber, durations, track counts — so digits don't jitter while playing.
- Dynamic Type: Titles, body, row text scale; tab labels, scrubber time, overlines, the FLOW badge stay fixed (layout-sensitive).
Components and layoutRead the full spec
Buttons
Primary Gradient Button (Play Flow / Subscribe)
- Shape: Full pill, corner radius 999pt
- Background:
linear-gradient(90deg, #A238FF → #FF0092) - Text:
#FFFFFF, Deezer Sans 16pt weight 700, optional leading ▶ glyph - Padding: 14pt vertical, 30pt horizontal
- Pressed:
filter: brightness(0.92)+ scale 0.98 - Disabled: gradient at 35% opacity, text
#FFFFFFat 50%
Solid Purple Button (Shuffle / secondary action)
- Background:
#A238FF(solid, no gradient) - Text:
#FFFFFF, Deezer Sans 15pt weight 700 - Corner radius: 999pt
- Padding: 13pt vertical, 26pt horizontal
- Pressed: background
#7C28C4+ scale 0.98
Outline Button (Follow / Add)
- Background: transparent
- Border: 1.5pt
#FFFFFFat 40% opacity (rgba(255,255,255,0.4)) - Text:
#FFFFFF, Deezer Sans 14pt weight 600 - Corner radius: 999pt
- Padding: 12pt vertical, 22pt horizontal
- Pressed: border + text to 70% opacity, background
#FFFFFFat 6%
Text Button (See all / Skip)
- Text:
#A238FF, Deezer Sans 14pt weight 700 - No background, no underline
- Pressed: opacity 0.7
Circular Play Button (Now Playing — signature)
- Size: 68pt diameter
- Background:
linear-gradient(135deg, #A238FF → #FF0092) - Glyph: ▶ / ❚❚ in
#FFFFFF, 26pt, optically centered (+2pt right nudge for ▶) - Shadow:
0 12px 28px -8px rgba(255,0,146,0.6)— colored glow, not gray - Pressed: scale 0.94, 80ms; shadow tightens
Core Atoms
Living-Gradient Artwork Tile (Flow cover)
- Aspect ratio: 1:1, corner radius 16pt
- Fill:
linear-gradient(135deg, #A238FF 0%, #C71F8E 45%, #FF0092 100%)+ a soft white radial bloom top-right (rgba(255,255,255,0.22)) and a deep-plum radial bottom-left (rgba(124,40,196,0.55)) - Shadow:
0 24px 48px -20px rgba(162,56,255,0.55)— colored ambient lift - Optionally animates: gradient stops drift on a 12s loop while Flow plays
FLOW Badge
- Position: top-left of artwork, 16pt inset
- Background:
rgba(15,13,19,0.55)withbackdrop-filter: blur(8px) - Content: lightning glyph (white, 14pt) + "FLOW" in Deezer Sans 12pt weight 800, white, 0.4pt tracking
- Corner radius: 999pt; padding 7pt vertical, 13pt right / 11pt left
Embedded Equalizer (inside artwork)
- Row of 10–14 bars pinned to the bottom of the artwork
- Bar color:
rgba(255,255,255,0.62); width flexes to fill; corner radius 3pt (top only) - Heights animate independently (music-reactive); static design uses a varied 34–92% height set
- Bottom inset 22pt, side inset 18pt, 4pt gap between bars
Gradient Scrubber
- Track: 4pt height,
#221E2B, corner radius 2pt - Fill:
linear-gradient(90deg, #A238FF → #FF0092), width = progress - Knob: 13pt white circle,
box-shadow: 0 2px 6px rgba(0,0,0,0.5); grows to 17pt while dragging - Times: Inter 11pt weight 500
#A29CB0, tabular; elapsed left, remaining right (with leading-)
Song Row (now-playing aware)
- Height: 64pt; 44pt artwork thumb (6pt radius) + title/sub stack + trailing action
- Default: title
#FFFFFF15pt w600, sub#A29CB013pt; trailing ⋯ in#A29CB0 - Now playing: title turns
#FF0092; trailing replaced by 4-bar mini equalizer in#FF0092 - Pressed: row background
#221E2B
Navigation
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
rgba(15,13,19,0.94)withbackdrop-filter: saturate(180%) blur(20px), 0.5pt top border#2A2633 - Tabs (4): Home, Search, Music, Profile
- Icon size: 22pt; active fills solid, inactive is stroked
- Active color:
#A238FF(purple) icon + label - Inactive color:
#6E6880 - Labels: Deezer Sans 10pt weight 600, always shown
Now Playing Top Bar
- Leading: down-chevron (collapse player), 22pt
#FFFFFF - Center: two-line context — overline "FLOW · YOUR MIX" (12pt w700
#A29CB0uppercase) over title "Made for you" (13pt w700#FFFFFF) - Trailing: ⋯ overflow menu, 22pt
#FFFFFF
Mini Player (collapsed)
- Height: 56pt, sits above the tab bar, background
#19161F - Leading 40pt artwork thumb, title + artist stack, trailing play/pause + favorite
- A 2pt gradient progress line pinned to the very top edge of the bar
Input Fields
Search Bar
- Height: 44pt, background
#19161F, corner radius 12pt, no border - Leading magnifier 18pt
#A29CB0; placeholder "Artists, tracks, podcasts…" 15pt#A29CB0 - Focus: 1.5pt
#A238FFborder; clears to a recent-searches list - Voice icon trailing,
#A29CB0
Genre / Mood Chip
- Height: 34pt, corner radius 999pt
- Default: background
#221E2B, text#FFFFFFDeezer Sans 13pt w700 - Selected: background gradient
#A238FF → #FF0092, text#FFFFFF
Distinctive Components
Flow Now Playing (signature screen)
- Full-bleed
#0F0D13canvas; top bar → living-gradient artwork (with FLOW badge + embedded equalizer) → track title (26pt w800) + favorite heart (pink) → gradient scrubber + tabular times → transport row (shuffle/prev/PLAY/next/repeat) where only the 68pt circular play button is gradient and every other control is monochrome
Embedded Equalizer
- The visualizer is not a separate panel — it lives inside the artwork as white bars, making the cover itself reactive. Mirrored as a 4-bar pink marker on the currently-playing song row.
Living-Gradient Flow Cover
- Generative purple→magenta→pink gradient with white bloom; animates on a slow loop while Flow plays; the visual signature of "personalized infinite mix."
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Artwork tile shrinks to fit; transport row spacing tightens to 12pt |
| iPhone 13/14/15 | 390pt | Standard layout, 24pt insets |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; top bar respects it |
| iPhone 15/16 Pro Max | 430pt | Larger artwork; play button stays 68pt (fixed, iconic) |
| iPad (portrait) | 768pt | Content max-width 720pt centered; artwork capped 480pt |
| iPad (landscape) | 1024pt+ | Two-pane: library list left, Now Playing right; artwork max 520pt |
Dynamic Type
- Screen titles, now-playing title, section headers, body, row text: full scale
- Tab labels, scrubber time, overlines, FLOW badge, chip text: FIXED (layout-sensitive)
- Equalizer and artwork are graphic, unaffected by type scale
Orientation
- iPhone Now Playing is portrait-locked (vertical stack)
- iPad supports landscape split (library + player side-by-side)
- Artwork tile maintains 1:1 aspect in all orientations
Touch Targets
- Circular play button: 68pt (well above minimum)
- Secondary transport (prev/next/shuffle/repeat): 44pt hit, 26/22pt glyph
- Scrubber knob: 13pt visual, 44pt vertical hit slop
- Tab bar items: 22pt glyph, 48pt hit
- Song row: full 64pt row tappable; trailing ⋯ has 44pt hit
Safe Area Handling
- Top: Now Playing top bar respects safe area + Dynamic Island
- Bottom: tab bar and mini player respect home indicator
- Scrim and expanded player extend edge-to-edge under status/home areas
- Sides: 24pt content inset on all devices
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-deezer {--page-bg: #0f0d13;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #ac4cff;
--link-hover-color: #9419ff;
--border-color: #3a393d;
--card-bg: #0f0d13;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #222026;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #0f0d13;
--footer-text-color: #abaaac;
--button-bg: #a238ff;
--button-text-color: #ffffff;
--button-hover-bg: #8a05ff;
--button-border: none;
--button-border-radius: 12px;
--button-secondary-bg: #1d1c21;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #2c2a2f;
--button-secondary-border: 1px solid #3a393d;
--prompt-bg: #1b191f;
--prompt-text-color: #ffffff;
--base-font: var(--font-helvetica);
--heading-font: var(--font-inter);
--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/music/deezer/DESIGN.md· 25.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.