Last.fm Design System

Overview

Last.fm's homepage is a two-band system that splits the page horizontally rather than layering it. The base canvas is Hazard White ({colors.surface-white} — "#ffffff") for the statistics section, immediately interrupted by a full-bleed Carbon Band ({colors.surface-black} — "#000000") that holds the "Connect your streaming service to Last.fm" row, and then a return to a Platinum-tinted white ({colors.surface-platinum} — "#f9f9f9") for the "Rediscover your music" section. The only true brand color is Postbox Red ({colors.brand-red} — "#d92323"), reserved for the single primary START NOW CTA, the emphasized word inside every uppercase headline ("TRACK", "FIND", "MUSIC STATS", "REDISCOVER"), and the active bar in the weekly stats chart.

Red-as-grammar: Where most music products use their brand red as a logo color or a marketing background wash, Last.fm has promoted it to a typographic role. Inside every hero and section headline, exactly one word turns red — "TRACK, FIND AND REDISCOVER MUSIC" reads as a three-color sentence (black, red, black) that doubles as the verb-emphasis grammar of the page. Frequency 12 across the entire homepage capture (5 as text, 5 as border, 2 as background), which is rare-tier scarcity. Unlike the convention of pairing a brand red with a complementary accent, there is no second voltage — Navy ("#005399") carries body links instead, and red never appears on running text.

Type runs Barlow for everything — heading, body, button, footer, language picker. The system is a strict 700/400 weight binary: weight 700 on the 48px hero and 30px section heads (both UPPERCASE, both at "-0.4px" tracking, line-heights of 54px and 36px respectively), and weight 400 on every 14px body paragraph at 21px leading. Buttons flip the tracking polarity — UPPERCASE 14px / 700 with positive "0.4px" tracking — which separates the "label voice" from the display headlines that pull tighter. There is no 500 or 600 weight anywhere in the extraction.

Key Characteristics:

• Two-band canvas, not a graded ladder: {colors.surface-white} ("#ffffff") and {colors.surface-platinum} ("#f9f9f9") for stats, full-bleed {colors.surface-black} ("#000000") for the streaming-service connector and the Pro callout. There is no intermediate gray surface between them.
• Single functional accent: {colors.brand-red} ("#d92323") appears only on the primary START NOW CTA, the LEARN MORE button on the Pro band, the accented word inside every headline, and the active bar in the listening-chart visualization. Never decorative.
• Strict 700/400 weight binary: every headline is 700, every paragraph is 400. No weight 500 or 600 exists in the extracted homepage CSS.
• Tracking polarity flip: display type pulls tight at "-0.4px"; UPPERCASE button labels push open at positive "0.4px". The same Barlow family carries two opposing letter-spacing behaviors.
• Two-radius geometry: 3px on every button, image, and form field; 100px pill reserved for the legal-language toggle. The mid-corner zone (6–16px) that most contemporary products inhabit is skipped entirely.
• Navy ("#005399") links — body text links run navy, never red. Hover transitions to a lighter Sky Blue ("#6699cc"). Red is structural CTA paint, not text-link color.
• Color-as-elevation: no drop shadows anywhere in the extracted styles. Section depth is delivered exclusively by the full-bleed band-color shift from white to black to platinum to obsidian footer.
• Uppercase-as-emphasis grammar: weight 700 + UPPERCASE + "-0.4px" tracking marks every editorial heading; the lowercase weight 400 paragraph immediately below carries the supporting copy.

Colors

Brand

• Postbox Red ({colors.brand-red} — "#d92323") — frequency 12. Used as text (5), border (5), background (2). The single functional brand voltage — applied to the START NOW CTA fill, to the emphasized word inside every uppercase headline, and to the active bar inside the weekly-listening chart. Never decorative.
• Sangria Red Deep ({colors.brand-red-deep} — "#9d0000") — frequency 0 on the rendered page but declared as --clr-sangria in the stylesheet. Reserved as the deep-press state for the primary CTA.
• Habanero Red Hot ({colors.brand-red-hot} — "#f71414") — frequency 0 on the rendered page but declared as --clr-habanero. Available as an alternative high-saturation accent for error or active states; out of scope for the current homepage.

Surface

• Hazard White ({colors.surface-white} — "#ffffff") — frequency 249. Used as text (123), border (122), background (4). The primary canvas of the statistics section and the dominant text color on every black band.
• Platinum ({colors.surface-platinum} — "#f9f9f9") — declared as --clr-platinum. A near-imperceptible warm-white tint used as the "Rediscover Your Music" band background to distinguish it from the pure-white hero.
• Fog ({colors.surface-fog} — "#ebebeb") — frequency 3 as background. Applied to the outlined SIGN UP button fill in the top nav, where the dark border carries the contrast rather than the fill.
• Smog Border ({colors.surface-smog} — "#d7d7d7") — declared as --clr-smog. Reserved 1px border tone for form inputs.
• Carbon Black ({colors.surface-black} — "#000000") — frequency 17. Used as background (6), text (3), border (3), shadow (3), gradient (2). The full-bleed streaming-service band, the Pro callout band, and the top nav all sit on this color.
• Obsidian ({colors.surface-obsidian} — "#111111") — frequency 2 as background. The footer band — one notch warmer than the streaming band, just enough to delineate it from the absolute-black above.

Ink

• Mineshaft ({colors.ink-mineshaft} — "#222222") — frequency 92. Used as text (46), border (46). The primary headline and body text on every white surface. Never pure black — the slight lift to "#222222" reads as printed-paper rather than OLED-text.
• Graphite ({colors.ink-graphite} — "#666666") — frequency 114. Used as text (57), border (57). Secondary text — captions, footer columns, byline-equivalent metadata.
• Ash ({colors.ink-ash} — "#adadad") — declared as --clr-ash and --clr-anchor. Tertiary text and the resting border on outlined form fields when not in focus.

Link

• Navy ({colors.link-navy} — "#005399") — frequency 12. Used as text (6), border (6). Every running text link — "Track your music", "Start exploring", "Start now" — runs in navy, not the brand red. The system's strongest "red is not for links" signal.
• Sky ({colors.link-sky} — "#6699cc") — declared as a hover-state variant. Body links transition to this lighter blue on hover; no underline shift.
• Twitter Rest ({colors.link-twitter-rest} — "#6aaae4") — declared as --clr-twitter-rest. Reserved for the Twitter/X social-follow button border on the footer.

Gradient Stops (Logo and Player Decoration)

• Red Gradient A ({colors.red-gradient-stop-a} — "#b90000"), Red Gradient B ({colors.red-gradient-stop-b} — "#fa4b4b"), Red Gradient C ({colors.red-gradient-stop-c} — "#ff008a"): the three documented gradient stops, used only inside the audio-player overlay decoration in the lower-right corner and inside the wordmark drop. The homepage chrome itself uses zero gradients — gradients are scoped to one ornament.

Typography

Font Family

The entire system runs Barlow with a long fallback stack: Barlow, "Open Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif. Barlow is open-source via Google Fonts; the variable-font version with weights 400 and 700 covers every token. The fallback stack is unusually long for a 2026 product — five named families before reaching the generic sans-serif — suggesting the spec predates the variable-font era and was never tightened.

Hierarchy

Principles

Most text is either weight 700 or weight 400 — the binary creates hierarchy through weight contrast rather than through size variation. There is no weight 500 or 600 anywhere in the extracted CSS. Display type runs UPPERCASE with negative "-0.4px" tracking to compress the cap-heights into a tight horizontal band; button labels run UPPERCASE with positive "0.4px" tracking to open the cap-heights for readability at small sizes. The same Barlow family carries both polarities — the tracking flip is the typographic fingerprint.

The headline grammar is three-color sentence: black-red-black, where the red word is the verb-emphasis ("TRACK", "FIND", "REDISCOVER", "MUSIC STATS"). This is rare in contemporary product design — most systems use color only as a tile fill or a CTA background, never as part of the headline word grammar.

Note on Font Substitutes

Barlow is open-source, so no substitute is strictly required. If you cannot ship Barlow, Hanken Grotesk, Heebo, or Archivo at weights 400 and 700 match the geometric construction within ~1% character width. DM Sans is the closest free alternative if the slightly more humanist proportions are acceptable. Preserve the "-0.4px" tracking on the display tokens and the positive "0.4px" tracking on the button tokens — the polarity flip is what carries the system identity.

Layout

Spacing System

• Base unit: 4px micro / 12px standard, ranging to a 60px band-padding macro.
• Tokens: {spacing.micro} 4px · {spacing.xs} 12px · {spacing.sm} 15px · {spacing.md} 18px · {spacing.base} 20px · {spacing.lg} 25px · {spacing.xl} 30px · {spacing.xxl} 48px · {spacing.section} 60px.
• Band padding (vertical): 60px between every full-bleed section on desktop. The streaming-service band tightens to 48px because its content is iconography rather than copy.
• Inline padding: primary buttons run 9×20×10px asymmetric vertical padding; outlined buttons run 0×20px with the 40px height carrying the vertical center. Form inputs use 12×25px — generous horizontal padding for the lead-text field aesthetic.

Grid & Container

• Two-band horizontal split: the page alternates white statistics surfaces with full-bleed black media-service bands. There is no max-width container that runs continuously top-to-bottom — instead, each band has its own internal max-width centered horizontally.
• Hero column pattern: a 2-column hero with the headline left and the streaming-service connector illustration right (last.fm circular logo with rays to Apple Music). On mobile the columns stack with the illustration above the copy.
• Footer columns: 5-column layout — COMPANY, HELP, GOODIES, ACCOUNT, FOLLOW US — each with weight-700 uppercase headers and weight-400 link lists below.
• Gutters: 30px horizontal margin on the outer page edge at every breakpoint above mobile.

Whitespace Philosophy

The system favors band rhythm over breathing room. The statistics section feels tight and density-oriented — paragraphs hug close to headlines, charts sit immediately adjacent to their captions — and the visual rest comes from the black streaming-service band that interrupts the white surface every 700–800px of vertical scroll. Where Spotify uses dark compression and Apple uses generous gallery breathing, Last.fm uses band oscillation: white → black → white → black → obsidian footer, with each transition acting as a palette cleanser.

Border Radius Scale

• {rounded.square} "3px": every button, every form field, every image frame, every chart bar. This is the load-bearing radius of the system.
• {rounded.chip} "50px": the circular search icon button in the top nav. The only mid-radius value, and it is applied to exactly one component.
• {rounded.pill} "100px": the language-picker chip at the bottom of the footer. The full-pill reserved for legal/locale chrome.

Three radii is unusually few. The 6–16px mid-corner zone that most contemporary products inhabit is intentionally skipped — every interactive surface either reads as "infrastructure" (3px) or as a "navigation chip" (100px), with nothing in between.

Elevation

The system's depth philosophy is band-as-elevation. There are zero traditional box-shadows in the extracted styles — no 0px 8px 24px rgba(0, 0, 0, 0.5) or any equivalent. Hierarchy is carried by the full-bleed background-color shift between sections.

Shadow philosophy: the absence is the design. On a system this committed to flat band-shifts, a drop shadow would dissolve the editorial-page quality. Depth comes from the color-band rhythm, not from layered z-axis effects.

Shapes

The corner-radius story is the shortest in the directory: three values, two of them rare.

• 3px is the workhorse — applied to every button, every image, every form field, every chart bar. Almost-square but with just enough corner-radius to read as a contemporary product rather than a 1995 form field.
• 50px appears once — the search icon button in the top nav.
• 100px appears once — the language picker at the bottom of the page.

The system explicitly avoids the mid-corner zone (6–16px) where most 2026 products live. The result is that every interactive surface reads as either "this is functional engineering chrome" (3px) or "this is a contextual locale chip" (100px), with no rounded-but-soft middle ground.

Components

Buttons

button-primary — Postbox Red ("#d92323") fill, white text, Barlow 14px / 700 UPPERCASE with "0.4px" tracking, {rounded.square} 3px radius, 9×20×10px padding, 40px height. The single primary START NOW CTA pinned under the hero — used once per visible page.

button-primary-deep — Sangria Red Deep ("#9d0000") fill — reserved as the pressed/active state for the primary CTA, declared in the stylesheet as --clr-sangria but unused in the static homepage capture.

button-secondary-outlined — Fog ("#ebebeb") fill, Mineshaft ("#222222") text, 1px Mineshaft border, Barlow 14px / 700 UPPERCASE with "0.4px" tracking, {rounded.square} 3px radius, 0×20px padding, 40px height. The SIGN UP button in the top nav — visually distinct from the primary by carrying its contrast on the border rather than the fill.

button-icon-circle — Transparent fill, white icon (the search magnifying-glass in the top nav), {rounded.chip} 50px radius, 40px height. The only circular interactive surface in the system.

Inputs

text-input — White fill, Mineshaft text, 1px Smog ("#d7d7d7") border, Barlow 14px / 400, {rounded.square} 3px radius, 12×25px padding. The standard form field — used for "Username or email", "Password", and the in-band search. Generous horizontal padding suggests a lead-text aesthetic where the placeholder reads as instructional copy rather than a label.

Navigation

top-nav — Carbon Black ("#000000") fill, white text, 68px height, 0×30px horizontal padding. The persistent header that carries the lowercase "last.fm" wordmark left and the Music/Events/Charts/Log In/SIGN UP cluster right.

nav-link — Transparent fill, white text, Barlow 14px / 400 — the standard nav-link voice. Hovers to weight 700 implicitly via the active state.

Bands

hero-section — White ("#ffffff") fill, Mineshaft text, 60×30px band padding. The above-the-fold hero band carrying the 48px display headline, the 18px lead, the primary CTA, and the streaming-service illustration.

stats-band — Platinum ("#f9f9f9") fill, Mineshaft text, 60×30px band padding. The "Your Music Stats. Live." section — visually almost identical to the hero but with the near-imperceptible warm tint that signals "new band".

streaming-band — Carbon Black fill, white text in caption-bold UPPERCASE 12px / 700, 48×30px padding. The "CONNECT YOUR STREAMING SERVICE TO LAST.FM" full-bleed slab carrying the Spotify, YouTube, Apple Music, Tidal, and SoundCloud logos.

pro-callout-band — Carbon Black fill, white text in display-section 30px / 700 UPPERCASE, 60×30px padding. The "Music Counts More with Last.fm Pro" promotional band carrying the LEARN MORE CTA in Postbox Red — the only place red appears against the black canvas.

footer-band — Obsidian ("#111111") fill, white text, 48×30px padding. Five-column layout — COMPANY, HELP, GOODIES, ACCOUNT, FOLLOW US — with weight-700 uppercase column heads and weight-400 link lists below.

Links and Accent Words

body-link — Transparent fill, Navy ("#005399") text, Barlow 14px / 400 with 24px line-height. Every inline body link runs navy, never red — "Track your music", "Start exploring", "Start now".

body-link-hover — Transparent fill, Sky ("#6699cc") text. The hover-state of every body link — the navy lifts to a paler blue, with no underline shift.

headline-accent-word — Transparent fill, Postbox Red text inside the display-hero token. The single red word inside each 48px hero headline — "TRACK", "FIND", "REDISCOVER".

section-accent-word — Transparent fill, Postbox Red text inside the display-section token. The red word inside each 30px section head — "MUSIC STATS", "FIND YOU", "YOUR MUSIC".

Misc

language-picker-chip — Transparent fill, white text, Barlow 12px / 400, {rounded.pill} 100px radius, 4×12px padding. The footer language-row of "English · Deutsch · Español · Français · Italiano · 日本語 · Polski · Português · Русский · Svenska · Türkçe · 简体中文" — each treated as a 100px-pill clickable chip.

chart-bar-active — Postbox Red fill, {rounded.square} 3px radius. The "THIS WEEK" bar inside the weekly-listening chart visualization adjacent to the "Your music stats. Live." headline.

chart-bar-prior — Transparent fill, 1px Mineshaft border, {rounded.square} 3px radius. The "LAST WEEK" comparison bar — outlined rather than filled, so the active red bar dominates the visualization.

Do's and Don'ts

Do use Postbox Red ("#d92323") exclusively for the single primary CTA, the emphasized word inside each headline, and the active state in data visualizations. Where you would normally apply the brand red to a sticky promo banner, hover background, or focus ring, use Mineshaft ("#222222") or Navy ("#005399") instead — red has been reserved for verb-emphasis and the one CTA on screen.

Do flip letter-spacing polarity between display ("-0.4px") and button ("0.4px") tokens. Both are weight 700, both are UPPERCASE, both run Barlow — the tracking is what tells the reader "this is a headline" versus "this is a clickable label".

Don't use weight 500 or weight 600 anywhere in the system — the extracted CSS has zero declarations at those weights. Headings are 700, body is 400, and that binary carries the entire hierarchy. Adding a 600 sub-heading weight will dissolve the editorial bicolor character.

Don't apply a drop shadow to lift a card on hover — the system has no shadow tokens at all. To signal elevation, switch the section background to {colors.surface-black} or {colors.surface-platinum} and let the full-bleed band-shift carry the depth.

Don't soften button corners to a 8px or 12px radius for "friendliness". The 3px square corner reads as engineering chrome on purpose — a 12px radius makes the START NOW CTA look like a generic SaaS sign-up and breaks the editorial-poster voice.

Don't color body links red. Body links run Navy ("#005399"), hovering to Sky ("#6699cc"). Red is structural CTA paint and headline-verb paint — applying it to a 14px running text link erodes the scarcity that makes the CTA pop.

Don't introduce a gradient on a button, card, or surface. The only documented gradients in the system are inside one audio-player overlay decoration; the rest of the page uses flat color blocks. Adding a gradient anywhere else dissolves the two-band rhythm.

Don't add a third radius value at 8px or 12px. The 3px / 50px / 100px scale is intentionally bimodal — adding a mid-corner softens the system's "either engineering or chip" geometric voice.

Known Gaps

• Authenticated dashboard surfaces: the scrobble history, weekly reports, library views, friend feeds, and listening leaderboards live behind sign-in and are not captured in this DESIGN.md.
• Artist and album detail pages: the wiki-style biography type, similar-artist rails, and event listings are not represented — the spec covers the marketing homepage only.
• Hover and focus states: the resting styles for the search-icon button, the language picker chip, and the streaming-service tiles were captured, but hover and focus visual treatments could not be extracted from the static homepage.
• Mobile hamburger drawer: the mobile navigation drawer behavior is partially documented — the desktop top nav is fully captured but the mobile collapse is inferred from the responsive breakpoints rather than extracted.
• Last.fm Pro paid-tier surfaces: the homepage Pro callout band is captured, but the gated Pro dashboard UI (advanced analytics, expanded charts, ad-free listening view) is not in scope.
• Audio-player overlay decoration: the lower-right gradient audio-player ornament (containing the "#b90000" / "#fa4b4b" / "#ff008a" gradient stops) is documented at the color-token level but its full styling and interaction model are not captured.