じゃらんnet
jalan.net · set in a
SaveUnofficial A style guide made by SiteStyleGuide from last.fm’s public web pages. Not affiliated with or endorsed by Last.fm. The real site is last.fm ↗
Unofficial style guide
Last.fmstyle guide
Last.fm’s website (last.fm) sets its headings in a and its body text in Barlow. Its palette is led by Crimson (#D92323), Pink (#FFCACE) and Golden Rod (#FFBB00), with #222222 text on #FFFFFF. Captured from the live site on 28 October 2026.
- Website
- last.fm
- Typefaces
- a, Barlow Semi Condensed, Barlow
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 28 Oct 2026 · added by @sitestyleguide
https://www.last.fm/
Screenshot
last.fm
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Last.fm | Play music, find songs, and discover artists
- ● 54 / 60 characters
- Meta description
- The world's largest online music service. Listen online, find out more about your favourite artists, and get music recommendations, only at Last.fm
- ● 147 / 160 characters
- Site name
- Last.fm
- og:title
- Last.fm | Play music, find songs, and discover artists
- og:description
- The world's largest online music service. Listen online, find out more about your favourite artists, and get music recommendations, only at Last.fm
- Language
- en
In search results
Last.fmhttps://www.last.fm/
Last.fm | Play music, find songs, and discover artists
The world's largest online music service. Listen online, find out more about your favourite artists, and get music recommendations, only at Last.fm
When shared
last.fm
Last.fm | Play music, find songs, and discover artists
The world's largest online music service. Listen online, find out more about your favourite artists, and get …
Logo & favicons
Found as: CSS background on .logo. PNG, 90 × 24.
Logo
On white
On black
On Crimson
Favicons
2 found-
1024 px · PNG
apple-music-app-icon
-
Last.fm | Play music, find songs, and discover artists
Light browser tab
Last.fm | Play music, find songs, and discover artists
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#222222) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 35.8%
- Crimson 11.5%
- Black 10.9%
- Grey 9.6%
- Near Black 9.1%
- Pink 3.8%
- Golden Rod 3.4%
- Sea Green 2.8%
- Medium Aqua Marine 2.3%
- Light Cyan 2.3%
- Red 1.8%
- Light Pink 1.7%
- Royal Blue 1.7%
- Dark Slate Blue 1.4%
- Gold 1%
- Indigo 1%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 15.91:1 AAA
- On white
- —
Text, background, border · body:not(.js-focus-visible) body:not([data-whatinput=touch]) [data-toggle-button, body
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.32:1 Fail
- On white
- 21.00:1 AAA
Background, text, border · .subscription-status-container .subscription-status-details .btn-manage-subscrip, .btn-labs-homepage
-
Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 40
- On text
- 5.58:1 AA
- On white
- 2.85:1 Fail
Text, background, border · .date-heading, .metadata-title
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 87
- On text
- —
- On white
- 15.91:1 AAA
Text, background, border · body, .dropdown-menu-clickable-button--heading
Colours
Brand colours and accents, most used first-
Crimson
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 84 84 15
- On text
- 3.19:1 AA large
- On white
- 4.98:1 AA
Background, text, border · .btn-primary, .btn-add-follower:before
-
Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 21 19 0
- On text
- 11.05:1 AAA
- On white
- 1.44:1 Fail
Background, text, graphic · .playback-2024 .playback-app-container .full-report-container .black .line:nth-c, .playback-2025 .playback-app-container .full-report-container .black .line:nth-c
-
Golden Rod
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 27 100 0
- On text
- 9.36:1 AAA
- On white
- 1.70:1 Fail
Background, text, border · .masthead-pro-wrap, .btn-subscribe
-
Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 33 40
- On text
- 4.36:1 AA large
- On white
- 3.65:1 AA large
Background, text, graphic · .btn-tertiary, .btn-following:before
-
Medium Aqua Marine
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 54 0 14 17
- On text
- 8.79:1 AAA
- On white
- 1.81:1 Fail
Background, text, graphic · .playback-2025 .playback-app-container .full-report-container .color-select .rep, .playback-2023 .playback-app-container #top-albums-section button
-
Light Cyan
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 13 0 5 8
- On text
- 12.52:1 AAA
- On white
- 1.27:1 Fail
Background · .btn-remove-follower-disabled:before, .btn-following:before.btn-following.disabled
-
Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 92 92 3
- On text
- 3.84:1 AA large
- On white
- 4.15:1 AA large
Background, border · body:not(.js-focus-visible) body:not([data-whatinput=touch]) [data-toggle-button, body:not(.js-focus-visible) body:not([data-whatinput=touch]) .btn-primary:focus
-
Light Pink
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 33 33 0
- On text
- 8.90:1 AAA
- On white
- 1.79:1 Fail
Background, text, graphic · .user-dashboard--monthly .badge-container .report-badge--peak-pill, .playback-2023 .playback-app-container header .main-logo
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 46 0 40
- On text
- 2.04:1 Fail
- On white
- 7.79:1 AAA
Text, background · .join-cta h3, .btn-cancel
-
Dark Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 75 61 0 46
- On text
- 1.48:1 Fail
- On white
- 10.73:1 AAA
Background, text, border · .playback-2024 .playback-app-container .full-report-container .light-blue .line:, .playback-2025 .playback-app-container .full-report-container .light-blue .line:
-
Gold
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 22 75 0
- On text
- 10.16:1 AAA
- On white
- 1.57:1 Fail
Background, text, graphic · .playback-2023 .playback-app-container section.chapter-six__bubble .header h2, .metacritic-score.metacritic-score--med
-
Indigo
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 48 90 0 33
- On text
- 1.59:1 Fail
- On white
- 10.00:1 AAA
Background, text, border · .playback-2024 .playback-app-container .full-report-container .light-pink .line:, .playback-2025 .playback-app-container .full-report-container .light-pink .line:
Gradients
-
linear-gradient(270deg,hsla(0,0%,98%,.05),hsla(0,0%,98%,.3),hsla(0,0%,98%,.6),hsla(0,0%,98%,.3),hsla(0,0%,98%,.05))
-
linear-gradient(180deg,transparent 4.17%,rgba(0,0,0,.5))
-
linear-gradient(180deg,hsla(0,0%,100%,0),#fff)
Dark mode
Switched on by the site-
Thistle
#F7D7FF
-
Pale Turquoise
#C0ECE2
-
Off White
#FAFAFA
-
Near Black
#1A1B1E
-
Indigo
#5911AC
-
Dark Slate Grey
#165159
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
a
Aa
700
a
System font, or not loaded on this page · weights 700 · buttons, headings · shown in a stand-in if you don’t have it
Aa
200
Aa
700
Barlow Semi Condensed
Google Fonts · weights 200, 400, 500, 600, 700 · headings
Aa
400
Aa
700
Barlow
Google Fonts · weights 400, 500, 700 · headings, body, buttons
Aa
600
Barlow Condensed
Google Fonts · weights 600 · headings
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS · root 10 px
Heading 1
2em · 20 px
Last.fm
Heading 2
34px / 1.5
weight 400 · none · Barlow
Last.fm | Play music, find songs, and discover …
Heading 3
24px / 21px
weight 700 · uppercase · Barlow
Last.fm | Play music, find songs, and discover …
Heading 4
24px / 1.2
weight 400 · uppercase · Barlow
Last.fm | Play music, find songs, and discover …
Heading 5
—
weight 700 · Barlow
Last.fm | Play music, find songs, and discover …
Heading 6
—
Barlow
Last.fm | Play music, find songs, and discover …
Body
14px / 21px
Barlow
The world's largest online music service. Listen online, find out more about your favourite artists, and get music recommendations, only at…
Paragraph
24px / 1.4
weight 500 · Barlow
The world's largest online music service. Listen online, find out more about your favourite artists, and get music recommendations, only at…
Small
80%
The world's largest online music service. Listen online, find out more about your favourite artists, and get music recommendations, only at…
Button
16px / 24px
weight 700 · none
Get started
Link
16px / 24px
weight 700 · uppercase · a
Read more about Last.fm
Sizes in use
Most common across the site- 48pxline 100% · 16 rules
- 36pxline 36px · 26 rules
- 30pxline 36px · 15 rules
- 24pxline 30px · 63 rules
- 18pxline 24px · 123 rules
- 14pxline 24px · 132 rules
- 12pxline 18px · 337 rules
- 10pxline 15px · 27 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
.btn-primary · #D92323 · radius 3px
Link
Read our latest news today.
a · #005399
Corner radius
- 3px · 260×
- 100% · 120×
- 50% · 113×
- 12px · 8×
- 6px · 7×
- 20px · 7×
Shadows
- 0 0 0 1px rgba(0,0,0,.07)
- 0 0 0 1px rgba(0,0,0,.15)
- 0 1px 10px rgba(0,0,0,.3),0 0 0 1px hsla(0,0%,100%,.3)
- 0 1px 10px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.2)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
767
768
919
991
992
1259
1260
1980
On a scale of 0 to 1980 px.
Content widths (max-width)
600 px
500 px
470 px
400 px
370 px
300 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 54 characters, short enough to show in full in search results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Last.fm use?
- Last.fm’s website uses four typefaces: a (headings), a system font; Barlow Semi Condensed, google Fonts; Barlow (body text), google Fonts; Barlow Condensed, google Fonts.
- What are Last.fm’s brand colours?
- The main colours on last.fm are Crimson (#D92323), Pink (#FFCACE), Golden Rod (#FFBB00), Sea Green (#009966), Medium Aqua Marine (#61D4B6) and Light Cyan (#CCEBE0).
- What colour is Last.fm’s text and background?
- Body text is #222222 on a #FFFFFF background.
- Where is Last.fm’s logo from?
- The logo shown in this guide was found on last.fm’s homepage. For official logo files and usage rules, check Last.fm’s own brand or press page.
- Is this Last.fm’s official style guide?
- No. SiteStyleGuide made it from last.fm’s public web pages on 28 October 2026, and isn’t affiliated with Last.fm. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
last-fm-tokens.css
/* last.fm design tokens, from SiteStyleGuide (https://sitestyleguide.com/last.fm) */
:root {
/* Colours */
--text: #222222;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-black: #000000;
--colour-grey: #999999;
--colour-near-black: #222222;
--colour-crimson: #D92323;
--colour-pink: #FFCACE;
--colour-golden-rod: #FFBB00;
--colour-sea-green: #009966;
--colour-medium-aqua-marine: #61D4B6;
--colour-light-cyan: #CCEBE0;
--colour-red: #F71414;
--colour-light-pink: #FFACAC;
--colour-royal-blue: #005399;
--colour-dark-slate-blue: #223689;
--colour-gold: #FFC641;
--colour-indigo: #5911AC;
--gradient-1: linear-gradient(270deg,hsla(0,0%,98%,.05),hsla(0,0%,98%,.3),hsla(0,0%,98%,.6),hsla(0,0%,98%,.3),hsla(0,0%,98%,.05));
--gradient-2: linear-gradient(180deg,transparent 4.17%,rgba(0,0,0,.5));
--gradient-3: linear-gradient(180deg,hsla(0,0%,100%,0),#fff);
/* Typefaces */
--font-buttons: 'a';
--font-headings: 'a';
--font-body: 'Barlow', sans-serif;
--font-other: 'Open Sans';
/* Type scale */
--text-h1: 2em;
--text-h2: 34px;
--leading-h2: 1.5;
--text-h3: 24px;
--leading-h3: 21px;
--text-h4: 24px;
--leading-h4: 1.2;
--text-body: 14px;
--leading-body: 21px;
--text-p: 24px;
--leading-p: 1.4;
--text-small: 80%;
--text-button: 16px;
--leading-button: 24px;
--text-a: 16px;
--leading-a: 24px;
/* Shape */
--radius-1: 3px;
--radius-2: 100%;
--radius-3: 50%;
--radius-4: 12px;
--radius-5: 6px;
--radius-6: 20px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 767px;
--breakpoint-2: 768px;
--breakpoint-3: 919px;
--breakpoint-4: 991px;
--breakpoint-5: 992px;
--breakpoint-6: 1259px;
--breakpoint-7: 1260px;
--breakpoint-8: 1980px;
--max-width-1: 600px;
--max-width-2: 500px;
--max-width-3: 470px;
--max-width-4: 400px;
--max-width-5: 370px;
--max-width-6: 300px;
}
{
"site": "last.fm",
"source": "https://sitestyleguide.com/last.fm",
"text": "#222222",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Grey",
"hex": "#999999",
"rgb": [
153,
153,
153
]
},
{
"name": "Near Black",
"hex": "#222222",
"rgb": [
34,
34,
34
]
},
{
"name": "Crimson",
"hex": "#D92323",
"rgb": [
217,
35,
35
]
},
{
"name": "Pink",
"hex": "#FFCACE",
"rgb": [
255,
202,
206
]
},
{
"name": "Golden Rod",
"hex": "#FFBB00",
"rgb": [
255,
187,
0
]
},
{
"name": "Sea Green",
"hex": "#009966",
"rgb": [
0,
153,
102
]
},
{
"name": "Medium Aqua Marine",
"hex": "#61D4B6",
"rgb": [
97,
212,
182
]
},
{
"name": "Light Cyan",
"hex": "#CCEBE0",
"rgb": [
204,
235,
224
]
},
{
"name": "Red",
"hex": "#F71414",
"rgb": [
247,
20,
20
]
},
{
"name": "Light Pink",
"hex": "#FFACAC",
"rgb": [
255,
172,
172
]
},
{
"name": "Royal Blue",
"hex": "#005399",
"rgb": [
0,
83,
153
]
},
{
"name": "Dark Slate Blue",
"hex": "#223689",
"rgb": [
34,
54,
137
]
},
{
"name": "Gold",
"hex": "#FFC641",
"rgb": [
255,
198,
65
]
},
{
"name": "Indigo",
"hex": "#5911AC",
"rgb": [
89,
17,
172
]
}
],
"fonts": [
{
"name": "a",
"stack": "a",
"weights": [
700
],
"source": "System font, or not loaded on this page"
},
{
"name": "Barlow Semi Condensed",
"stack": "Barlow Semi Condensed, Open Sans Condensed, Barlow, Helvetica Neue, Helvetica, Arial, sans-serif",
"weights": [
200,
400,
500,
600,
700
],
"source": "Google Fonts"
},
{
"name": "Barlow",
"stack": "Barlow, \"sans-serif\"",
"weights": [
400,
500,
700
],
"source": "Google Fonts"
},
{
"name": "Barlow Condensed",
"stack": "Barlow Condensed, Open Sans Condensed, Barlow, Helvetica Neue, Helvetica, Arial, sans-serif",
"weights": [
600
],
"source": "Google Fonts"
},
{
"name": "Open Sans",
"stack": "'Open Sans'",
"weights": [
400,
700,
300,
600
],
"source": "Google Fonts"
},
{
"name": "Open Sans Condensed",
"stack": "'Open Sans Condensed'",
"weights": [
400,
700,
300,
600
],
"source": "Google Fonts"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run last.fm?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/last.fm" title="Last.fm style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in a
Other websites using a as their main typefaceSimilar colours
Websites whose lead colour is closest to Last.fm’s
The Hollywood Reporter
hollywoodreporter.com · 4 days ago
Save
feedburner.com
feedburner.com · 3 days ago
Save
NME
nme.com · 5 days ago
Save
CCM
commentcamarche.net · 6 days ago
Save
Captured from last.fm on 28 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Last.fm; this guide describes the public website for reference.