Deezer

**Quick Color Reference** - text (on light): #000000 - text (on dark): #fdfcfe - background (light surface): #fdfcfe - background (dark surface): #0f0d13 - border / divider: #d1d1d7 (on light) or #555257 (on dark) - accent / brand: #a238ff - soft accent wash: #d09aff - primary action: no distinct CTA color **Example Component Prompts** 1. **Hero Section**: White background (#fdfcfe), full viewport height. Centered headline in Deezer Brand substitute (Bebas Neue) weight 800 at 140px, #000000, line-height 0.71, letter-spacing +0.28px. Below: subtitle in Inter weight 500 at 20px, #0f0d13. Below: a filled button — #a238ff background, #fdfcfe text, Inter 500 at 16px, border-radius 12px, padding 14px 28px. Below: 5 solid black star SVGs in a row, then 'Over 3 million 5-star ratings' in Inter 400 at 16px, #0f0d13. All elements center-aligned. 2. **Pricing Card on Dark Section**: Dark background (#0f0d13), full-width band. Centered: Deezer Brand substitute weight 700 at 46px in #fdfcfe, 'Choose the offer that works for you'. Below: a white card (#fdfcfe, border-radius 8px, padding 32px, max-width 420px). Inside card: a purple badge pill (#a238ff, #fdfcfe text, Deezer Brand 700 at 18px, border-radius 12px, padding 7px 16px). Below: Deezer Brand 800 at 35px, #0f0d13. Below: Inter 400 at 16px, #555257. Below: filled button (#a238ff, #fdfcfe, Inter 500 16px, 12px radius, 14px 28px). Below: feature list — #a238ff checkmark + #0f0d13 text at 16px Inter 400, row gap 10px. 3. **Navigation Bar**: Sticky top, background #0f0d13, padding 16px horizontal. Left: #a238ff diamond icon + 'DEEZER' wordmark in #fdfcfe Inter 700 at 16px. Right side: three ghost links ('Plans', 'Features', 'Music') in #fdfcfe Inter 500 at 16px, then an outlined button ('Log in' — transparent bg, 1px #555257 border, #fdfcfe text, 12px radius, 14px 24px padding), then a filled button ('Sign up' — #a238ff bg, #fdfcfe text, 12px radius). 4. **Top Promotional Banner**: Full-width, background #d09aff, padding 12px 24px. Left: small #a238ff diamond icon + 'Live the music with Deezer' in Inter 600 at 16px, #0f0d13. Right: pill button ('Try for free' — #0f0d13 bg, #fdfcfe text, Inter 500 at 14px, 12px radius). Use flexbox with space-between. 5. **FAQ Accordion Item**: On dark section (#0f0d13), no card background. Question in Deezer Brand substitute weight 700 at 24px, #fdfcfe. Answer in Inter 400 at 16px, #fdfcfe. Right-aligned chevron icon in #a9a6aa. Thin #555257 1px bottom border, padding 24px 0 between items.

The Deezer Brand display face is the single most important asset in the system. Its ultra-condensed proportions and tight line-heights (0.71 at 140px) create a stacked-poster effect where the headline reads as a visual block, not a line of text. This is fundamentally different from typical SaaS hero patterns that use 1.0–1.2 line-heights on sans-serif display faces. Any attempt to 'improve' the line-height for readability would destroy the brand character. Inter serves as the functional substrate — the voice you'd hear if the display face were the announcer. The two-font pairing works because they share a geometric, humanist DNA, but operate at different scales of attention: the display face demands you stop and look, Inter supports you while you read.

The system uses exactly one chromatic color: #a238ff Signal Violet. Every other color is achromatic — white, black, and six gray steps for text hierarchy and borders. This is not a minimal palette by accident; it is minimal by conviction. The violet functions as a single electric pulse in an otherwise dark room. When you see it, you act. This is why the role assignments are narrow: filled button backgrounds, badge pills, the logo mark, and the top banner. Nothing else. The softer #d09aff Lilac Wash exists only as a companion tone for the banner — it dilutes the violet just enough to create a comfortable announcement bar without competing with the primary brand color.