deezer.com website design: fonts, colors and UI patterns

Overview

Deezer’s visual system sits on a clean split. One side is a light product shell with black text, pale surfaces, thin separators, and a fixed purple accent. The other side is a near-black marketing stage where the same brand turns louder: huge white headlines, purple emphasis, and small rounded cards that feel almost stage-lit against the dark ground. The result is not decorative in the glossy sense; it is direct and graphic. The interface uses scale to create drama, while chrome stays calm enough for browsing, account management, and library work.

The system’s most stable ideas are easy to repeat. Purple marks the active state, the primary button, and the selected artist ring. White and very light lilac surfaces carry most product content. Black and charcoal reserve space for acquisition pages, warning messages, and strong page headings. Circular artist art, rounded pills, and squat cards keep the interface friendly, but the typography is severe and oversized when Deezer wants attention. That tension is the brand.

Colors

Deezer’s palette is restrained, but the few saturated values do a lot of work. Light pages are mostly white or soft lilac, with black text and gray support copy. Dark pages invert that relationship: white text on a black or near-black field, with purple as the only strong chromatic release. Orange appears only as an alert or attention signal, not as a general brand hue. The visual system feels richer because surface changes carry mood shifts, while the accent color remains consistent across every mode.

The purple family should stay narrower than the neutral range. Deezer does not need a rainbow palette; it needs a single decisive accent that feels louder because everything around it is quiet. On white pages, the purple can carry more weight in borders and button fills. On black pages, the same value is enough to signal action without overwhelming the headline. The black-and-white contrast is the foundation; purple is the signal layered on top.

Typography

Deezer uses three families with distinct jobs. Deezer Brand owns the giant promotional headlines and the page statements that need personality. Deezer Product handles strong internal display text and medium-size section titles. Inter is the workhorse for navigation, buttons, metadata, and body copy. The hierarchy depends on scale and weight more than on typographic variety. There is no need for extra families when the existing stack already separates marketing from product clearly.

The packet supplies no designer or vendor credit for these families, so no attribution claim should be made beyond the family names themselves.

The display sizes stay extremely tight. Deezer often lets the line height match or nearly match the type size on the largest statements, which makes the words feel blocky and poster-like. Inter, by contrast, opens up enough to stay legible in small controls and helper text. That contrast should be preserved: bold and compressed for the brand statement, clean and breathable for the interface around it.

Layout

The page architecture alternates between two broad patterns. The first is a product shell with a left rail, a top bar, a content column, and a persistent playback strip at the bottom. The second is a centered promotional stage where the headline sits high in the frame, supporting cards stack underneath, and the page color changes sharply to signal a different intent.

On the product side, the left rail is compact and vertical. It carries the Deezer wordmark, icon-led navigation, and a small promotional block. The content area to the right stays wide and open, with a header search field, a large page title, and a tab row that stretches horizontally before the main content begins. This layout keeps library and account work calm. There is enough structure to orient the user, but not so much chrome that it competes with playlists, favourites, or settings.

The onboarding layout is more open and more social. The search bar sits above a grid of circular artist tiles, and the chips line up as a slim filter row. The grid needs room because the circles are the story: they create a field of faces and album art that makes selection feel playful. The bottom button is centered and intentionally secondary in color and contrast so the page can show progress without stealing attention from the artist cards.

The promotional pages compress all of that into a narrower, stage-like composition. A black top band, a huge headline, a small note card, and one or two plan cards are enough. The offer cards stack vertically, centered in the page, with generous side space. A curved or scalloped purple transition separates the headline from the plan area and gives the page a strong silhouette. The music transfer page uses the opposite tactic: a white field, floating album art around a dark center tile, and a large centered headline below the artwork. The composition stays symmetrical and poster-like.

Visual language

Deezer’s visual language is flat, circular, and highly contrasted. Depth comes from color changes, borders, and layering rather than from heavy shadow. The common shapes are pills, rounded rectangles, and perfect circles. Pills hold filters, status labels, and button treatments. Rounded rectangles hold plans, settings groups, and cards. Circles carry artists, avatars, and cover art crops. Each shape has a clear job, so the page never feels over-engineered.

The strongest motif is the circle. In the onboarding screen, each artist image sits in a circular crop with a thin purple outline when selected. Some selections also carry a small heart badge, which makes the state feel immediate even before the label below is read. That same circular language softens the otherwise hard-edged typography and gives the interface a social, music-first tone. Deezer can be severe with type because the imagery is so friendly.

The dark marketing surfaces use a different kind of visual softness. Rather than gradients everywhere, Deezer relies on a sharp black field and a purple lower section or wave transition. The purple mass feels like sound or energy more than like a decorative color block. White cards placed on top of that field read as practical and retail-like. This mix lets the page feel excited without becoming noisy.

The light product surfaces are almost the inverse. They use white and very light gray as the base, then let black text, small borders, and tiny accent marks do the heavy lifting. The result is quiet, but not empty. The pages still feel branded because the accent purple and the Deezer wordmark are always present.

Components

Top navigation and rail

The desktop shell uses two navigation systems. The left rail carries the Deezer mark, home-style links, and a promo tile. Its items are simple icon-plus-label rows with black text on pale ground. The active item reads slightly stronger, but the rail never becomes loud. On product pages, a top bar adds search and utility icons. On promotion pages, the top bar turns into a black band with a small centered or left-aligned brand mark and a few compact links. The navigation should always feel lighter than the content it frames.

Search field

The search field is a soft rounded rectangle with a pale fill, a small leading icon, and quiet placeholder text. It does not need a heavy border. Its job is to sit calmly above the content so the main page title still dominates. On the onboarding screen, the search bar is wide and centered. In the account shell, the search bar is shorter and lives inside the page chrome.

Tabs and status rows

The tab strip is low profile and horizontal. Unselected tabs use muted gray; the active tab uses black text and a thin purple underline. This treatment should stay minimal. It is a content switcher, not a button cluster. Status text such as follower counts or content totals stays small and sits close to the title so the page has a clean hierarchy.

Artist tiles

Artist tiles are the most recognizable product component in the onboarding flow. Each tile is a full circle with a photo or album image inside. The selected state is a purple outline or glow, often paired with a small heart mark. The label sits below, centered and restrained. This component depends on spacing: the circles need room to breathe in a grid, and the labels need enough clearance so the arrangement does not feel crowded.

Offer cards

The plan cards are white or light panels on a dark stage. They use compact badges, a price block, a full-width dark button, and a small secondary link below. The hierarchy is strict: plan name, price, one primary action, then a small text link. The cards should stack vertically at the center of the page with enough separation that each one reads as a separate purchase choice. A small pill control above them can switch billing modes.

Account groups and toggles

The account page uses stacked white cards with light dividers and compact rows. Toggles are pill-shaped and small. The on state leans purple; the off state stays gray. These groups should feel functional rather than expressive. They are part of the product shell, so they need more restraint than the marketing pages. Labels stay left-aligned, and controls stay close to the right edge so scanning is easy.

Empty states and library cards

The empty playlist state is intentionally sparse: a pale square tile with a centered plus sign and a short caption below. That minimalism is part of the tone. Deezer does not inflate empty states with long copy or illustration-heavy storytelling when a simple action will do. On the broader library shell, the bottom playback strip and utility icons are tiny and unobtrusive, keeping focus on the collection area above.

Responsive behavior

On narrower desktop widths, the left rail should compress before the content loses structure. The search field can shorten, the tab row can scroll when needed, and the centered marketing cards can drop earlier into a single column. The main rule is to preserve hierarchy before ornament. Deezer should never let the navigation become visually heavier than the content it supports.

The artist grid should reduce the number of columns as width decreases, but the circles should remain circles. If space gets tight, labels may wrap before the art crops change shape. The offer cards should stay stacked and centered rather than splitting into a busy multi-column grid. The black stage depends on that strong vertical flow.

Large display headlines should step down through the existing brand and product display sizes rather than introducing new ad hoc text scales. The pages already support a clear typography ladder; the responsive system should reuse it.

Practical implementation guidance

Preserve

• Keep purple as the only persistent accent across the product shell and the dark acquisition pages.
• Keep the contrast between black stage pages and white product pages. That mode shift is a core part of the brand.
• Keep circular art for artist selection and avatar-like imagery.
• Keep the display type extremely bold and tightly set on marketing pages.
• Keep the chrome flat. Borders, spacing, and color shifts should do most of the separation work.

Avoid

• Avoid adding secondary accent colors that fight the purple.
• Avoid soft shadows and glass effects; Deezer reads better as flat and graphic.
• Avoid turning every control into a filled pill. Pills should stay for filters, small actions, and state chips.
• Avoid mixing in extra type families or decorative scripts.
• Avoid letting account chrome borrow the oversized marketing voice. Product settings should stay quiet.

Recommended build order

1. Build the shared neutral palette and the purple action state.
2. Establish the three-family typographic ladder.
3. Recreate the product shell: rail, top bar, search field, tabs, and bottom player strip.
4. Build the circular artist grid and selection state.
5. Build the account groups and toggle behavior.
6. Build the dark offer stage with stacked cards.
7. Add the centered transfer and hero pages, then tune spacing and emphasis.

Accessibility

• Keep black-on-white and white-on-black contrast strong enough for long reading runs.
• Do not rely on color alone to show selection; pair the purple ring with a visible badge, underline, or text change.
• Keep the small UI type readable at 14–16px and avoid shrinking helper text below that range.
• Preserve visible focus states on tabs, buttons, chips, and toggles.
• Give the circular artist tiles clear labels so the image alone is never the only cue.

Scope note

This guide covers Deezer’s desktop music shell, the favourites and playlist views, the account settings panels, the artist onboarding grid, and the dark offers and transfer pages. It does not specify mobile breakpoints, motion, hover behavior, playback logic, or third-party album-art rules.

Related design patterns

• Primary text color
• Secondary text color
• Entertainment and gaming
• Software SaaS
• Sans serif
• Body role
• Heading role
• UI role

More website design guides

Browse website design guides by pattern and website.