deezer.com DESIGN.md

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.