---
version: alpha
name: Last.fm
website: "https://www.last.fm"
description: >-
  Last.fm's music-tracking site is a high-contrast two-band system that splits the page between a white statistics canvas and a black streaming-service band, with Postbox Red ("#d92323") reserved for the single primary CTA and the accented word inside every headline ("TRACK", "FIND", "YOUR MUSIC STATS"). Type runs Barlow at weight 700 across an uppercase display ladder (48px hero, 30px section heads, both at "-0.4px" tracking), and weight 400 carries every paragraph at 14px / 21px leading. Radii are extreme: a 3px CTA almost-square, a 100px full pill for legal chrome — there is no mid-corner softness. Navy ("#005399") carries every running link, not red. No drop shadows anywhere; depth is two flat bands of "#ffffff" against "#000000".
seo:
  title: "Last.fm Design System for React — Postbox Red #d92323, Barlow, 19 components"
  metaDescription: "Last.fm's design system as a DESIGN.md file. Postbox Red #d92323, Barlow 48px/700 hero, navy links, 18 colors, 19 components — for React and AI tools."
  highlights:
    - "Single functional accent — Postbox Red (\"#d92323\") used only on the primary START NOW CTA and on the emphasized word inside every uppercase headline"
    - "Two-band canvas — a 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 body — a strict 700/400 weight binary"
    - "Navy link voltage (\"#005399\") for running text links, never red — red is structural CTA paint only"
    - "Two-radius geometry — 3px on every button, image, and form field; 100px pill reserved for legal language toggles. No mid-corner softness."
  tags:
    - "Music, Video & Streaming"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.last.fm"
      title: "Last.fm — official site"
      description: "Track, find, and rediscover music — the world's largest scrobbling and music-statistics service."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files."
  questions:
    - id: "primary-color"
      title: "What is Last.fm's primary brand color and how is it used?"
      answer: "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."
    - id: "dark-mode"
      title: "Does Last.fm have a separate dark mode?"
      answer: "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."
    - id: "typography"
      title: "What typography does Last.fm use, and what should I substitute?"
      answer: "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."
    - id: "shape-language"
      title: "Why does Last.fm use only three border-radius values?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a React music-statistics or scrobbling app?"
      answer: "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."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "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."

colors:
  brand-red: "#d92323"
  brand-red-deep: "#9d0000"
  brand-red-hot: "#f71414"
  surface-white: "#ffffff"
  surface-platinum: "#f9f9f9"
  surface-fog: "#ebebeb"
  surface-smog: "#d7d7d7"
  surface-black: "#000000"
  surface-obsidian: "#111111"
  ink-mineshaft: "#222222"
  ink-graphite: "#666666"
  ink-ash: "#adadad"
  link-navy: "#005399"
  link-sky: "#6699cc"
  link-twitter-rest: "#6aaae4"
  red-gradient-stop-a: "#b90000"
  red-gradient-stop-b: "#fa4b4b"
  red-gradient-stop-c: "#ff008a"

typography:
  display-hero:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 54px
    letterSpacing: "-0.4px"
    textTransform: uppercase
  display-section:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 36px
    letterSpacing: "-0.4px"
    textTransform: uppercase
  lead-bold:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: normal
  link-large:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: normal
  body:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: normal
  body-link:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: normal
  button-uppercase:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: "0.4px"
    textTransform: uppercase
  caption-eyebrow:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 21px
    letterSpacing: normal
    textTransform: uppercase
  caption:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: normal
  caption-bold:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: normal
    textTransform: uppercase
  caption-tracked:
    fontFamily: "Barlow, 'Open Sans', 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 21px
    letterSpacing: "0.4px"
    textTransform: uppercase

rounded:
  square: "3px"
  chip: "50px"
  pill: "100px"

spacing:
  micro: "4px"
  xs: "12px"
  sm: "15px"
  md: "18px"
  base: "20px"
  lg: "25px"
  xl: "30px"
  xxl: "48px"
  section: "60px"

components:
  button-primary:
    backgroundColor: "{colors.brand-red}"
    textColor: "{colors.surface-white}"
    typography: "{typography.button-uppercase}"
    rounded: "{rounded.square}"
    padding: "9px 20px 10px"
    height: 40px
  button-primary-deep:
    backgroundColor: "{colors.brand-red-deep}"
    textColor: "{colors.surface-white}"
    rounded: "{rounded.square}"
    padding: "9px 20px 10px"
  button-secondary-outlined:
    backgroundColor: "{colors.surface-fog}"
    textColor: "{colors.ink-mineshaft}"
    borderColor: "{colors.ink-mineshaft}"
    typography: "{typography.button-uppercase}"
    rounded: "{rounded.square}"
    padding: "0px 20px"
    height: 40px
    border: "1px"
  button-icon-circle:
    backgroundColor: transparent
    textColor: "{colors.surface-white}"
    rounded: "{rounded.chip}"
    height: 40px
  text-input:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.ink-mineshaft}"
    borderColor: "{colors.surface-smog}"
    typography: "{typography.body}"
    rounded: "{rounded.square}"
    padding: "12px 25px"
    border: "1px"
  top-nav:
    backgroundColor: "{colors.surface-black}"
    textColor: "{colors.surface-white}"
    typography: "{typography.body}"
    height: 68px
    padding: "0px 30px"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.surface-white}"
    typography: "{typography.body}"
  hero-section:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.ink-mineshaft}"
    padding: "60px 30px"
  stats-band:
    backgroundColor: "{colors.surface-platinum}"
    textColor: "{colors.ink-mineshaft}"
    typography: "{typography.body}"
    padding: "60px 30px"
  streaming-band:
    backgroundColor: "{colors.surface-black}"
    textColor: "{colors.surface-white}"
    typography: "{typography.caption-bold}"
    padding: "48px 30px"
  pro-callout-band:
    backgroundColor: "{colors.surface-black}"
    textColor: "{colors.surface-white}"
    typography: "{typography.display-section}"
    padding: "60px 30px"
  footer-band:
    backgroundColor: "{colors.surface-obsidian}"
    textColor: "{colors.surface-white}"
    typography: "{typography.body}"
    padding: "48px 30px"
  body-link:
    backgroundColor: transparent
    textColor: "{colors.link-navy}"
    typography: "{typography.body-link}"
  body-link-hover:
    backgroundColor: transparent
    textColor: "{colors.link-sky}"
  headline-accent-word:
    backgroundColor: transparent
    textColor: "{colors.brand-red}"
    typography: "{typography.display-hero}"
  section-accent-word:
    backgroundColor: transparent
    textColor: "{colors.brand-red}"
    typography: "{typography.display-section}"
  language-picker-chip:
    backgroundColor: transparent
    textColor: "{colors.surface-white}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "4px 12px"
  chart-bar-active:
    backgroundColor: "{colors.brand-red}"
    rounded: "{rounded.square}"
  chart-bar-prior:
    backgroundColor: transparent
    borderColor: "{colors.ink-mineshaft}"
    border: "1px"
    rounded: "{rounded.square}"
---

## 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

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-hero}` | 48px | 700 | 54px | "-0.4px" UPPERCASE | The hero "MUSIC COUNTS. TRACK, FIND AND REDISCOVER MUSIC." headline |
| `{typography.display-section}` | 30px | 700 | 36px | "-0.4px" UPPERCASE | Section heads ("YOUR MUSIC STATS. LIVE.", "WE FIND YOU MUSIC TO LOVE.") |
| `{typography.lead-bold}` | 18px | 700 | 24px | normal | The "Join millions of users. All for free." sub-hero lead |
| `{typography.link-large}` | 16px | 400 | 40px | normal | Streaming-service connector labels ("CONNECT YOUR STREAMING SERVICE TO LAST.FM") |
| `{typography.body}` | 14px | 400 | 21px | normal | The standard paragraph everywhere — feature descriptions, footer columns |
| `{typography.body-link}` | 14px | 400 | 24px | normal | Inline body links — "Track your music", "Start exploring" |
| `{typography.button-uppercase}` | 14px | 700 | 40px | "0.4px" UPPERCASE | Every button label — START NOW, SIGN UP, LEARN MORE, LOG IN |
| `{typography.caption-eyebrow}` | 14px | 700 | 21px | normal UPPERCASE | "COMPANY", "HELP", "GOODIES" footer column heads |
| `{typography.caption}` | 12px | 400 | 18px | normal | Language picker, time-zone label, copyright legal |
| `{typography.caption-bold}` | 12px | 700 | 18px | normal UPPERCASE | "CONNECT YOUR STREAMING SERVICE" band header |
| `{typography.caption-tracked}` | 12px | 700 | 21px | "0.4px" UPPERCASE | Small uppercase chips and category labels |

### 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.

| Level | Treatment | Use |
|---|---|---|
| Base (0) | Flat `{colors.surface-white}` ("#ffffff") fill | The hero and statistics sections |
| Step (1) | Flat `{colors.surface-platinum}` ("#f9f9f9") fill | The "Rediscover Your Music" band, distinguished from the pure-white hero by a near-imperceptible warm tint |
| Cut (2) | Flat `{colors.surface-black}` ("#000000") fill | The streaming-service connector band and the Pro promotional band — full-bleed black slabs |
| Footer (3) | Flat `{colors.surface-obsidian}` ("#111111") fill | The bottom footer, one notch warmer than the cut bands |
| Border (Hairline) | 1px `{colors.ink-mineshaft}` ("#222222") | The outlined SIGN UP button in the top nav |
| Border (Form) | 1px `{colors.surface-smog}` ("#d7d7d7") | Form inputs at rest |

**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.