---
name: "Last.fm"
description: "High-energy modern music discovery platform design system featuring stark white hero sections, dark high-contrast feature sections, bold uppercase headings in Barlow, and iconic red action highlights."
version: "1.0"
colors:
  primary: "#d92323"
  primary-strong: "#f71414"
  on-primary: "#ffffff"
  ink: "#222222"
  ink-strong: "#000000"
  body: "#666666"
  canvas: "#ffffff"
  surface-soft: "#f9f9f9"
  surface-muted: "#eeeeee"
  hairline: "#e3e3e3"
  hairline-soft: "#ebebeb"
  accent-navy: "#005399"
  accent-gold: "#ffbb00"
  accent-dark-surface: "#111111"
  accent-dark-card: "#1a1b1e"
  success: "#009966"
  warning: "#8a6d3b"
  destructive: "#d92323"
typography:
  heading-xl:
    fontFamily: "Barlow, \"Open Sans\", sans-serif"
    fontSize: "48px"
    fontWeight: "700"
    lineHeight: "54px"
    letterSpacing: "-0.4px"
    textTransform: "uppercase"
  heading-lg:
    fontFamily: "Barlow, \"Open Sans\", sans-serif"
    fontSize: "30px"
    fontWeight: "700"
    lineHeight: "36px"
    letterSpacing: "-0.4px"
    textTransform: "uppercase"
  heading-sm:
    fontFamily: "Barlow, \"Open Sans\", sans-serif"
    fontSize: "14px"
    fontWeight: "700"
    lineHeight: "21px"
    letterSpacing: "0.4px"
    textTransform: "uppercase"
  body-md:
    fontFamily: "Barlow, \"Open Sans\", sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "21px"
    letterSpacing: "normal"
  body-sm:
    fontFamily: "Barlow, \"Open Sans\", sans-serif"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "18px"
    letterSpacing: "normal"
  button-text:
    fontFamily: "Barlow, \"Open Sans\", sans-serif"
    fontSize: "14px"
    fontWeight: "700"
    lineHeight: "24px"
    letterSpacing: "0.4px"
    textTransform: "uppercase"
rounded:
  none: "0px"
  button: "3px"
  card: "3px"
  pill: "100px"
spacing:
  xs: "12px"
  sm: "15px"
  md: "20px"
  lg: "30px"
  xl: "48px"
  section: "60px"
  nav-height: "68px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.button}"
    padding: "12px 25px"
    fontSize: "14px"
    fontWeight: "700"
    textTransform: "uppercase"
  secondary-button:
    background: "{colors.surface-muted}"
    color: "{colors.ink}"
    borderRadius: "{rounded.button}"
    padding: "0px 20px"
    height: "40px"
    fontSize: "14px"
    fontWeight: "700"
  navbar:
    background: "{colors.ink-strong}"
    height: "{spacing.nav-height}"
    position: "fixed"
    color: "{colors.on-primary}"
    display: "flex"
    alignItems: "center"
  hero-section:
    background: "{colors.canvas}"
    padding: "68px 0px 60px"
    color: "{colors.ink}"
  pro-banner:
    background: "{colors.accent-dark-surface}"
    color: "{colors.on-primary}"
    padding: "48px 0px"
    textAlign: "center"
  footer:
    background: "{colors.accent-dark-surface}"
    color: "{colors.on-primary}"
    padding: "48px 0px 30px"
  text-link:
    color: "{colors.accent-navy}"
    fontSize: "14px"
    textDecoration: "none"
  language-selector:
    background: "transparent"
    color: "{colors.body}"
    border: "none"
    fontSize: "14px"
    padding: "0px"
source: "https://www.last.fm/"
captured: "2026-09-03T19:11:32.056Z"
---

# DESIGN.md: Last.fm

## Source

- URL: https://www.last.fm/
- Captured: 2026-09-03T19:11:32.056Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Last.fm](./screenshot.png)

## Design Summary

Last.fm uses high-contrast visual framing with prominent dark header and footer bars wrapping bright white content sections. Action callouts utilize bold red uppercase text paired with compact 3px rounded buttons.

## Visual Language

- Heavy typography featuring uppercase Barlow headers with crisp condensed letter spacing
- Selective use of high-visibility red highlight words inside key headline copy
- Clean alternating light and dark layout sections across the vertical scroll axis
- Compact 3px border radii on buttons and interactive containers

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Fixed dark top navigation bar pinned at 68px height
- Split hero layout featuring left-aligned textual CTAs and right-aligned geometric graphic illustrations
- Multi-column link matrix footer on deep black background
- Full-width dark accent callout strips for Pro tier promotion

## Components

- Render primary buttons with background #d92323, white uppercase text, and hover transition to #f71414
- Style inline feature links in signature navy #005399
- Keep section headlines uppercase with prominent red accent words for dynamic hierarchy

## Content Style

- Direct, action-oriented headlines (e.g., 'TRACK, FIND AND REDISCOVER MUSIC')
- Short explanatory subtext with clear single-purpose calls-to-action
- Uppercase category headers with condensed letter-spacing

## Agent Build Instructions

- Import Barlow font family for headings and Open Sans for fallback body text
- Implement top navigation bar as fixed container with background #000000 and height 68px
- Set default button corner radius to 3px across all standard controls
- Construct dark footer using background color #111111 with muted text links

## Evidence And Confidence

- Observed: Heading 1 rendered at 48px uppercase Barlow with bold weight.
- Observed: Primary CTA color explicitly measured as #d92323 with active hover state at #f71414.
- Observed: Fixed navigation height measured exactly at 68px.
- Observed: Button radii measured at 3px across desktop components.
- Inferred: Light grey surface muted mapped to #eeeeee based on secondary button background samples.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://www.last.fm/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.