---
title: "Deezer design system"
variant: extended
source: https://www.deezer.com/us/
captured_at: 2026-10-12
theme: dark
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/deezer-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Deezer · Design System

> Bold music culture, framed in ink and violet

**Theme:** dark · **Industry:** entertainment · **Source:** https://www.deezer.com/us/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Deezer pairs expansive light and dark section bands with oversized, condensed display headlines and vivid violet calls to action. The homepage moves from a centered brand promise into plans, feature previews, global community content, FAQs, and a dense multi-column footer.

## North star

Use oversized brand headlines and broad light/dark bands as the structure; keep violet for clear, purposeful actions.

## Overview

The page alternates a near-black canvas (#0f0d13) with crisp off-white (#fdfcfe) bands, making section changes legible without relying on decorative framing. Vivid violet (#a238ff) is reserved for signup and action emphasis; muted gray supports secondary copy, while borders are restrained. Headlines use Deezer Brand at very large scale, often bold and uppercase, creating a compact, poster-like voice against generous empty space. Inter carries navigation, body copy, and controls in a more neutral, readable register. Layout shifts between centered single-column statements, paired offer cards, and a three-column feature showcase; curved transitions soften the dark-to-light changes. Artwork and app imagery bring saturated color to otherwise flat panels, but remain contained within their feature contexts. Cards stay simple, with modest radii and little apparent elevation. The result is a spacious promotional rhythm punctuated by dense FAQ and footer navigation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#0f0d13` | `--color-deep-ink` | brand | Primary dark canvas for the offer, feature, FAQ, and footer sections; also used for dark text on light sections. |
| Gallery White | `#fdfcfe` | `--color-gallery-white` | surface | Light hero and community-section canvas, plus high-contrast text on dark bands and cards. |
| Soft Ash | `#a9a6aa` | `--color-soft-ash` | neutral | Muted supporting copy, especially footer links and secondary text. |
| Signal Violet | `#a238ff` | `--color-signal-violet` | accent | Primary signup and promotional CTA fill; brand mark accents also echo this hue. |
| Quiet Graphite | `#555257` | `--color-quiet-graphite` | semantic | Subtle outlines and hairline separators around navigation, controls, and footer elements. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Headline and star-rating ink visible on light surfaces; not a dominant page canvas color. |
| Card Charcoal | `#29282d` | `--color-card-charcoal` | surface | Dark plan-card surface set against the near-black pricing section. |

### Semantic aliases

`--color-canvas` → `#0f0d13` (Deep Ink) · `--color-surface` → `#fdfcfe` (Gallery White) · `--color-surface-2` → `#29282d` (Card Charcoal) · `--color-text` → `#fdfcfe` (Gallery White) · `--color-text-muted` → `#a9a6aa` (Soft Ash) · `--color-text-subtle` → `#0f0d13` (Deep Ink) · `--color-border` → `#555257` (Quiet Graphite) · `--color-accent` → `#a238ff` (Signal Violet) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fdfcfe` | `#0f0d13` | 18.88:1 | AAA |
| `#fdfcfe` | `#29282d` | 14.3:1 | AAA |
| `#a9a6aa` | `#0f0d13` | 8.02:1 | AAA |
| `#a9a6aa` | `#fdfcfe` | 2.35:1 | fail |
| `#a9a6aa` | `#29282d` | 6.08:1 | AA |
| `#0f0d13` | `#fdfcfe` | 18.88:1 | AAA |
| `#0f0d13` | `#29282d` | 1.32:1 | fail |
| `#a238ff` | `#0f0d13` | 4.18:1 | AA-large |
| `#a238ff` | `#fdfcfe` | 4.52:1 | AA |
| `#a238ff` | `#29282d` | 3.17:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 700, 400 | Navigation, body copy, captions, links, and buttons. | Inter |
| Deezer Brand | `--font-display` | webfont | 700, 800 | Display and heading typography throughout hero and promotional sections. | Barlow Condensed |

- **Inter:** Use medium body and link weights, bold controls, and restrained tracking; maintain clear reading hierarchy.
- **Deezer Brand:** Heavy display weights, tight line stacking, occasional uppercase; very large headlines create a poster-like impact.

### Type scale — Perfect Fifth (ratio ≈ 1.543, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 140px | 800 | 0.9 | 0 | uppercase | Deezer Brand | Oversized uppercase hero or campaign-style display statements. |
| h1 | 120px | 700 | 1 | 0.002em | — | Deezer Brand | Primary hero headline and dominant page-level title. |
| h2 | 56px | 700 | normal | 0.004em | — | Deezer Brand | Major section headings, often centered or left-aligned. |
| h3 | 46px | 700 | 1.04 | 0.005em | uppercase | Deezer Brand | Strong feature or subsection headings, sometimes uppercase. |
| h4 | 35px | 700 | 1.2 | 0 | — | Deezer Brand | Plan names and smaller promotional card headings. |
| body | 16px | 500 | 1.5 | 0 | — | Inter | Main explanatory copy, plan details, and feature descriptions. |
| caption | 14px | 500 | 1.79 | 0 | — | Inter | Supporting notes, ratings context, and footer detail. |
| button | 16px | 700 | normal | 0 | — | Inter | Signup, plan selection, and other primary actions. |
| nav | 16px | 700 | normal | 0 | — | Inter | Header navigation and prominent menu labels. |
| link | 16px | 500 | 1.5 | 0 | — | Inter | Inline actions and informational links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 7, 8, 9, 10, 14, 15, 16, 24, 25, 28, 32, 56, 112, 140 px.
- Section rhythm 140px · element gap 14px · card padding 24px · max content width 880px.

A centered navigation bar sits above a broad, light hero; content then moves through full-width dark and light bands. The measured page max width is 880px, with spacious section separation and compact local groupings. Centered single-column sections alternate with two-column plan cards and a three-column feature grid. Large headlines establish alignment, while curved section edges add movement. The footer becomes a denser five-column link layout.

## Shape & elevation

- Radius: button `12px` · card `8px` · media `12px` · xs `3px` · sm `8px` · md `12px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: contrast comes from alternating canvas colors rather than shadows. Cards use restrained corner rounding, and the dark plan card is separated by its charcoal fill. Borders are thin and low-contrast, mainly useful for navigation controls and footer divisions; avoid floating, heavily layered panels.

## Imagery

The page favors app-interface previews, small user or music-related illustrations, and feature artwork over conventional photography. Feature cards show vivid, colorful phone screens against the dark section canvas; community illustrations appear on the light bands. Keep imagery contained and purposeful, with clean edges and no added effects that compete with the surrounding headline.

## Components

### Top navigation

Dark horizontal header with Deezer mark at left, compact navigation links, an outlined login control, and a violet signup action.

### Hero statement

Centered light-canvas hero with massive stacked brand headline, short supporting line, violet signup button, and five-star proof point.

### Plan cards

Two side-by-side offer cards on the dark band: a light Premium card and charcoal Free card, each with concise benefits and a clear action.

### Feature showcase

Three-column feature presentation with bold section heading and colorful app-screen previews in softly rounded cards.

### FAQ accordion

Centered title above a narrow stack of question rows, supporting answers, and subtle separators on the dark background.

### Footer link columns

Dark footer with app-store badges, several compact navigation columns, social icons, centered brand mark, and legal detail.

### Measured component styles

- **Primary button** (“Sign up for free”): background #a238ff · text #ffffff · border 1px solid · radius 12px · padding 8px 32px · 700 16px Inter
- **Secondary button** (“Discover all our plans”): background #ffffff · text #191922 · border 1px solid · radius 12px · padding 8px 32px · 700 16px Inter
- **Link**: transparent background · text #fdfcfe · radius 0px · padding 0px · 500 16px Inter
- **Card** (“DEEZER FREE STREAM FOR FREE with ads Sig”): background #29282d · text #fdfcfe · radius 8px · padding 24px · 400 16px Inter
- **Navigation item** (“Plans Features Music”): transparent background · text #fdfcfe · radius 0px · padding 0px · 400 16px Inter

## Do

- Alternate broad light and dark section bands.
- Use Deezer-style heavy display lettering for key headlines.
- Reserve violet for primary actions and brand accents.
- Keep hero messaging centered with generous surrounding space.
- Use Inter for readable controls and supporting copy.
- Let colorful product artwork sit within simple, contained frames.

## Don't

- Do not add gradients absent from the measured page.
- Do not use violet as a large page background.
- Do not crowd the hero with multiple competing messages.
- Do not add pronounced drop shadows or floating-card effects.
- Do not make all sections the same background color.
- Do not use decorative imagery that overwhelms the typography.

## Agent prompt

Build a new Deezer-style page with a strong editorial music identity. Use Deep Ink (#0f0d13) and Gallery White (#fdfcfe) as alternating full-width section canvases, and Signal Violet (#a238ff) sparingly for primary actions. Set display headlines in a heavy condensed brand-like face, with Inter for navigation, body copy, and controls. Create a centered hero with a dramatic stacked headline, then vary the page rhythm with simple cards, feature previews, and clear section transitions. Keep the measured content width around the supplied 880px maximum and preserve generous section spacing. Use muted gray for secondary text and restrained graphite borders; avoid gradients, decorative shadows, and unnecessary ornament. Keep imagery colorful but contained within its section and subordinate to the headline hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered, single-column light hero beneath the dark navigation bar. | Primary signup action, Star-rating social proof | Oversized stacked headline, Violet CTA, Centered alignment |
| 2 | pricing | Centered title above two side-by-side offer cards on a dark band. | Compare free and paid plans, Plan-specific signup actions | Light and charcoal cards, Violet action button, Curved band transition |
| 3 | feature-split | Centered single-column message with decorative sound-wave artwork. | Explore catalog link | Large centered headline, Fine violet line illustration |
| 4 | feature-grid | Left-aligned heading above three evenly arranged feature previews. | Scan feature options, Explore interactive tools | Three-column cards, Colorful app-screen artwork, Dark background |
| 5 | stats | Centered light section with a compact headline, supporting copy, and illustration row. | Show international availability | Centered copy, Small character illustrations |
| 6 | stats | Single-row brand statement aligned across the light canvas. | Reinforce community scale | Large bold text, Violet Deezer mark |
| 7 | gallery | Single-column visual strip on the light background. | Visual proof of supported services | Floating album and service artwork |
| 8 | cta | Centered content on a broad light band, with artwork above the headline. | Start signup, Transfer existing music | Two stacked actions, Centered headline, Curved section edge |
| 9 | feature-split | Two-column dark section with text and action on one side, illustration on the other. | Explain detector value, Scan playlists | Contrasting illustration, Violet action button, Open dark canvas |
| 10 | faq | Centered heading above a narrow vertical list of questions and answers. | Expand question answers, Address plan and product concerns | Accordion rows, Subtle separators, Muted explanatory copy |
| 11 | footer | Dark footer with app badges, five compact link columns, and a bottom brand row. | Navigate site categories, Download mobile apps, Access legal links | Multi-column link lists, Social icons, Brand and copyright row |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/deezer-com