What is Last.fm's primary brand color and how is it used?

Postbox Red ("#d92323") is the single brand voltage — used only on the primary START NOW CTA, on the LEARN MORE button in the Last.fm Pro band, on the emphasized word inside every uppercase headline (TRACK, FIND, MUSIC STATS, REDISCOVER), and on a small calendar-day dot illustration. It appears 12 times across the captured surface (5 as text, 5 as border, 2 as background). It is never used decoratively, never paired with a gradient, never applied to body running text or links — links run in Navy ("#005399") instead. A near-pure red called Habanero ("#f71414") and a darker Sangria ("#9d0000") exist as CSS variables but never appear in the extracted homepage paint.

Does Last.fm have a separate dark mode?

There is no toggleable dark mode — the page is permanently a two-band layout where a white surface ("#f9f9f9"-tinted Platinum and pure "#ffffff") stacks above a fully black ("#000000") streaming-service band. The black section is not a theme; it is one section of the same page. Body text inside the black band flips to white, headings stay white, and the streaming-service logos (Spotify, YouTube, Apple Music, Tidal, SoundCloud) sit on the black canvas without any container chrome. The light statistics band returns immediately below it. No system in the directory uses inverted color so aggressively as a layout move rather than as a theme.

What typography does Last.fm use, and what should I substitute?

Barlow is the single workhorse — every heading, paragraph, button, and footer link runs in Barlow with the same long fallback stack: "Open Sans, Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif". The system is a 700/400 weight binary. Weight 700 carries the 48px hero (line-height 54px, letter-spacing "-0.4px", UPPERCASE) and the 30px section heads (line-height 36px, same tracking and case). Weight 400 carries every 14px paragraph at 21px leading. Buttons run weight 700 at 14px UPPERCASE with positive 0.4px tracking, the opposite tracking polarity to the display. Barlow is open-source via Google Fonts; no substitution is required. If unavailable, Hanken Grotesk, Heebo, or Archivo at the same weights match the geometric construction within ~1% width.

Why does Last.fm use only three border-radius values?

Three radii — 3px, 50px, and 100px — is unusually few for a 2026 product, and it is the system's strongest geometric signal. The 3px value is applied to every button, every form field, and every image frame: a near-square corner that reads as engineering chrome rather than a marketing pill. The 50px and 100px values are reserved for two specific affordances — the search icon button and the legal-language picker pill at the bottom of the page. The 6–16px mid-corner zone that most contemporary products inhabit is deliberately skipped. The rhythm reads as either "this is functional infrastructure" (3px) or "this is a navigation chip" (100px), with nothing in between.

Can I use this DESIGN.md to build a React music-statistics or scrobbling app?

Yes — the file is structured for AI ingestion. Feed it to Claude, Cursor, or any agent that reads structured tokens and it will reproduce Last.fm's two-band rhythm, the 700/400 Barlow binary, the Postbox Red CTA scarcity, and the 3px square-cornered button geometry rather than defaulting to a softer pill aesthetic. You can also reference tokens directly: every hex, type style, radius, and component recipe is a quoted value ready for Tailwind config or CSS variables. The 19 component recipes cover the surface area of a music-tracking product — primary CTA, outlined nav SIGN UP, streaming-service connector band, footer language picker, search button, statistics-chart container, and the dark-band callout used for the Last.fm Pro promotion.

What's missing from this DESIGN.md spec?

A handful of items documented in the Known Gaps section: the authenticated dashboard surfaces (scrobble history, weekly reports, library views, friend feeds) live behind sign-in and are not in scope; the artist and album detail pages with their wiki-style biography type are not captured; hover and focus states for the search-icon button and language picker were not extractable from the static homepage capture; the mobile bottom-bar and hamburger drawer are partially documented (the public homepage is desktop-first); and the Last.fm Pro paid-tier expanded UI is represented only by its homepage callout, not its dashboard surfaces.

Last.fm Design System

Last.fm's design system as a DESIGN.md file.

About Last.fm DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source last.fm

Music, Video & Streaming

Last.fm's homepage is the rare 2026 music product that still looks like a 2008 scrobbler — a deliberate two-band layout where a white statistics surface sits above a black "Connect your streaming service to Last.fm" band, with a single Postbox Red ("#d92323") CTA labeled START NOW pinned beneath the hero. The brand voltage is applied with surgical scarcity: red appears on exactly one button, on one word inside each headline ("TRACK", "MUSIC STATS", "REDISCOVER"), and on a calendar dot illustration. Every other interactive surface is achromatic. Links run in Navy ("#005399") rather than the brand red, because red has been promoted to a structural role — almost a fifth typographic weight rather than a decorative accent.

This DESIGN.md file packages the system into a single machine-readable spec built on the Google Labs format. Inside: 18 color tokens grouped into brand, surface, ink, and link roles; 11 typography tokens spanning the Barlow uppercase display ladder (48px / 30px / 14px / 12px) and the body / nav / button registers; 3 corner radii — 3px, 50px, and 100px — that intentionally skip the 6–16px mid-corner zone most products live in; an 8-step spacing scale built on 4px micro-steps; and 19 component recipes covering the dark-bordered START NOW pill, the outlined nav SIGN UP, the search icon button, the streaming-service connector band, and the footer language picker.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Last.fm's two-band rhythm — white-then-black sections separated by full-bleed color shifts, uppercase Barlow shouting the verb of each promise while weight-400 Barlow whispers the supporting copy, red restricted to a single CTA per screen. Reference the tokens directly to paste into Tailwind config or CSS variables. The system is worth studying because almost no contemporary music product still trusts a flat two-color canvas to carry the entire identity — Spotify went dark-immersive, Apple Music went translucent-glass, and Last.fm stayed loud, square, and almost newspaper-graphic.

What makes it distinct

Single functional accentPostbox Red ("#d92323") used only on the primary START NOW CTA and on the emphasized word inside every uppercase headline
Two-band canvasa white statistics surface stacked above a black streaming-service band, with no graded ladder of grays between them
Uppercase Barlow 700 display at 48px / 30px with -0.4px tracking, weight 400 at 14px for bodya strict 700/400 weight binary
Navy link voltage ("#005399") for running text links, never redred is structural CTA paint only
Two-radius geometry3px on every button, image, and form field; 100px pill reserved for legal language toggles. No mid-corner softness.

Live at last.fm

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

last.fm

Explore Last.fm

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Last.fm design system FAQ

Common questions about Last.fm's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Last.fm — official site

Track, find, and rediscover music — the world's largest scrobbling and music-statistics service.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Last.fm in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→