<!-- MIT licensed. Copyright and license: https://opendesignmd.com/licenses/ -->

# How deezer.com is designed

## Overview

deezer.com presents a mix of light and dark surfaces in the captured pages. The system is anchored by `#000000`, `#fdfcfe`, and `#0f0d13`, with typography led by **Inter**, **Deezer Brand**, and **Deezer Product**. The guide below names reusable design roles only where the captured evidence supports them.

The reference set uses representative captured pages. It is a design reference, not a claim about the site's private source code or a complete responsive specification.

## Design tokens

The token names are practical labels for the recorded values. They are not claims about the source site's variable names.

### Colors

| token | value | observed use |
| --- | --- | --- |
| color.text | `#000000` | text on page content |
| color.text | `#fdfcfe` | text on page content |
| color.text | `#0f0d13` | text on page content |
| color.text | `#ffffff` | text on page content |
| color.text | `#656367` | text on page content in the main |
| color.border | `#a238ff` | border on page content |
| color.text | `#6f6d71` | text on page content |
| color.surface | `#f5f2f8` | surface on page content |
| color.border | `#c7c5cb` | border on page content |
| color.shadow | `#2d2d32` | shadow on page content in the main |
| color.surface | `#121216` | surface on page content |
| color.text | `#a9a6aa` | text on page content |

### Typography

| token | font family | size | weight | line height | letter spacing | observed use |
| --- | --- | --- | --- | --- | --- | --- |
| type.body-16px | **Inter** | 16px | 400 | normal | normal | `<div>` in the button, `<button>` in the button, `<div>`, `<div>` in the nav, and `<ul>` |
| type.body-14px | **Inter** | 14px | 400 | 20px | normal | `<div>` and `<p>` |
| type.body-16px | **Inter** | 16px | 400 | 21.328px | normal | `<a>`, `<div>`, `<div>` in the main, `<ul>` in the main, `<li>` in the main, `<li>` in the nav, and `<ul>` in the nav |
| type.display-160px | **Deezer Brand** | 160px | 800 | 144px | normal | `<h1>` |
| type.display-56px | **Deezer Brand** | 56px | 700 | normal | 0.25px | `<h2>` |
| type.display-120px | **Deezer Brand** | 120px | 700 | 120px | 0.25px | `<h2>` and `<span>` |
| type.display-35px | **Deezer Brand** | 35px | 700 | 42px | normal | `<p>` |
| type.display-35px | **Deezer Brand** | 35px | 700 | 25px | normal | `<p>` |
| type.display-64px | **Deezer Product** | 64px | 700 | 64px | normal | `<h2>` in the main |
| type.heading-16px | **Inter** | 16px | 700 | normal | normal | `<a>` and `<a>` in the nav |
| type.display-78px | **Deezer Product** | 78px | 700 | normal | 0.25px | `<h1>` |
| type.body-16px | **Inter** | 16px | 500 | 25px | normal | `<p>` |
| type.heading-14px | **Inter** | 14px | 600 | 20px | normal | `<a>`, `<span>`, `<button>` in the button, `<div>`, and `<li>` |
| type.body-16px | **Inter** | 16px | 400 | 24px | normal | `<p>`, `<a>` in the nav, and `<a>` |
| type.body-14px | **Inter** | 14px | 500 | 18px | normal | `<p>` |
| type.heading-14px | **Inter** | 14px | 700 | normal | normal | `<a>` in the nav and `<a>` |
| type.heading-16px | **Inter** | 16px | 700 | 24px | normal | `<button>` in the button, `<span>` in the button, and `<p>` |
| type.body-14px | **Inter** | 14px | 400 | 18px | normal | `<div>` in the main and `<div>` |
| type.heading-24px | **Deezer Product** | 24px | 700 | 24px | normal | `<h2>` |
| type.heading-20px | **Inter** | 20px | 700 | 24px | normal | `<a>` |

### Spacing

| value | property | observed element |
| --- | --- | --- |
| `0px 28px 140px` | padding | page content |
| `0px 550px` | margin | page content |
| `-24px 0px 0px -34px` | margin | page content |
| `56px 28px` | padding | page content |
| `24px 16px` | padding | page content |
| `0px 0px 140px` | padding | page content |
| `0px 0px 28px` | margin | page content |
| `0px 28px` | padding | page content |

### Shape and depth

The captured pages use `2px solid 256px`, `2px solid 256px`, `0px none 4px`, `1px 0px 0px solid 0px`, `1px solid 12px`, `0px none 8px`, `1px solid 8px`, and `0px none 2px` border treatments. Recorded shadows include `rgba(45, 45, 50, 0.08) 0px 2px 2px 0px`.

## Colors

The visual system is predominantly dark surface treatment. Surface colors include `#f5f2f8`, `#121216`, and `#ad47ff`. Text colors include `#000000`, `#fdfcfe`, and `#0f0d13`. Keep image-derived colors separate from interface colors.

## Typography

The captured type system uses **Inter**, **Deezer Brand**, and **Deezer Product**. The table records measured size, weight, leading, and tracking where available; it does not establish licensing or a complete fallback stack.

## Layout

The captured pages use values such as `0px 28px 140px`, `0px 550px`, `-24px 0px 0px -34px`, `56px 28px`, and `24px 16px` for padding and margin. These are measured usages, not a resolved scale. The available evidence does not establish container widths, grid rules, or breakpoints.

## Visual language

The captured visual language is predominantly dark surface treatment. Surface treatment centers on `#f5f2f8`, `#121216`, `#ad47ff`, and `#ebe7ee`. Depth is supported by the returned shadows.

## Components and states

The captured pages include repeated styling on `<a>`, `<div>`, `<span>`, `<p>`, `<button>`, `<ul>`, `<h2>`, and `<li>` elements. The evidence does not identify reusable component boundaries or interaction states. Treat loading, focus, hover, pressed, error, and disabled states as implementation work to validate rather than as captured facts.

## Responsive behavior

The captured token set does not establish breakpoint values or mobile behavior. Validate stacking, navigation changes, image treatment, and type scaling against the representative captures before implementing a responsive adaptation.

## Practical implementation guidance

- Preserve the dark surface relationship and the measured type hierarchy before adding decorative treatment.
- Start from the returned typography, spacing, color, and border values; name any new scale or semantic role as an adaptation rather than as a source fact.
- Keep the captured font families separate from licensing decisions.
- Use screenshots to validate component anatomy, responsive behavior, focus treatment, and motion before shipping.
- Avoid introducing gradients or shadows beyond the captured treatment; the returned evidence includes those treatments.

## Scope note

The guide uses representative captured pages. The evidence supports the values and observations above; it does not establish component semantics, interaction states, motion timing, breakpoint rules, font licensing, or a complete source stylesheet.