What font does Songkick use?

Songkick’s website uses four typefaces: Archivo (headings), google Fonts; Inter, google Fonts; helvetica neue (body text), a system font; sofia-pro, adobe Fonts.

What are Songkick’s brand colours?

The main colours on songkick.com are Forest Green (#009816), Crimson (#F80046), Dark Violet (#9E08D4), Deep Crimson (#DA0B46), Medium Violet Red (#D12479) and Chocolate (#E86C28).

What colour is Songkick’s text and background?

Body text is #333333 on a #FFFFFF background.

Where is Songkick’s logo from?

The logo shown in this guide was found on songkick.com’s homepage. For official logo files and usage rules, check Songkick’s own brand or press page.

Is this Songkick’s official style guide?

No. SiteStyleGuide made it from songkick.com’s public web pages on 29 October 2026, and isn’t affiliated with Songkick. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from songkick.com’s public web pages. Not affiliated with or endorsed by Songkick. The real site is songkick.com ↗

Unofficial style guide

Songkickstyle guide

Songkick’s website (songkick.com) sets its headings in Archivo and its body text in helvetica neue. Its palette is led by Forest Green (#009816), Crimson (#F80046) and Dark Violet (#9E08D4), with #333333 text on #FFFFFF. Captured from the live site on 29 October 2026.

Website: songkick.com
Typefaces: Archivo, Inter, helvetica neue
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 29 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the songkick.com homepage on a desktop screen — Screenshot of songkick.com on a 1440 px desktop screen, 29 Oct 2026.

Screenshot of the songkick.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Find the Best Concerts Near You, Tour Dates & Tickets Worldwide | Songkick; ▲ 74 / 60 characters
Meta description: Find live music near you, track your favorite artists, get instant concert alerts and buy tickets for all the best upcoming concerts.; ● 133 / 160 characters
Site name: Songkick
og:title: Find the Best Concerts Near You, Tour Dates & Tickets Worldwide | Songkick
og:description: Find live music near you, track your favorite artists, get instant concert alerts and buy tickets for all the best upcoming concerts.
Language: en

In search results

Songkickhttps://songkick.com/

Find the Best Concerts Near You, Tour Dates & Tickets Worldwi…

Find live music near you, track your favorite artists, get instant concert alerts and buy tickets for all the best upcoming concerts.

When shared

songkick.com

Find the Best Concerts Near You, Tour Dates & Tickets Worldwide | Songkick

Find live music near you, track your favorite artists, get instant concert alerts and buy tickets for all the…

Logo & favicons

Found as: CSS background on .logo. SVG, 885 × 261.

Logo

On white

On black

On Forest Green

Favicons

2 found

256 px · ICO icon
158 px · PNG apple-touch-icon

Find the Best Concerts Near You, Tour Dates & Tickets Worldwide | Songkick

Light browser tab

Find the Best Concerts Near You, Tour Dates & Tickets Worldwide | Songkick

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 (#333333) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 43.3%
Deep Black 11.5%
Light Black 8.2%
Off White 7.6%
Forest Green 5.1%
Crimson 4.3%
Dark Violet 3.8%
Deep Crimson 3.1%
Medium Violet Red 1.9%
Chocolate 1.9%
Crimson 1.9%
Medium Sea Green 1.8%
Steel Blue 1.8%
Light Crimson 1.4%
Royal Blue 1.1%
Fire Brick 1.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
12.63:1 AAA

On white
—

Text, background, border · .homepage-trending-metro-events .related-events-v2--homepage .related-events-v2_, .homepage-popular-metro .related-artists-v2--homepage .related-artists-v2__title
Deep Black

HEX

RGB

HSL

OKLCH

CMYK
8 0 0 95

On text
1.54:1 Fail

On white
19.46:1 AAA

Text, background · .sticky-container.homepage.user-home-discovery.user-home-discovery--light .homep, .sticky-container.homepage.user-home-discovery.user-home-discovery--light .brief
Light Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 88

On text
1.30:1 Fail

On white
16.48:1 AAA

Background, text · inline style on <a>, section.events .content .copy-container h3
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 10

On text
10.12:1 AAA

On white
1.25:1 Fail

Background, text, border · .sticky-container.homepage.user-home-discovery.user-home-discovery--light .homep, .cta-button.cta-button.cta-button-disabled

Colours

Brand colours and accents, most used first

Forest Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 86 40

On text
3.31:1 AA large

On white
3.82:1 AA large

Text, background, border · .cta-button.cta-button-green, .cta-button.cta-button-green.button-secondary
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 100 72 3

On text
3.06:1 AA large

On white
4.13:1 AA large

Background, text, border · .cta-button.cta-button-red, .navigation .nav-item-plans>a:after
Dark Violet

HEX

RGB

HSL

OKLCH

CMYK
25 96 0 17

On text
2.07:1 Fail

On white
6.11:1 AA

Text, border, background · .cta-button.cta-button-purple, .cta-button.cta-button-purple.button-secondary
Deep Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 95 68 15

On text
2.48:1 Fail

On white
5.10:1 AA

Background, border · .cta-button.cta-button-presale, .cta-button.cta-button-magenta
Medium Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 83 42 18

On text
2.55:1 Fail

On white
4.95:1 AA

Background, border · .cta-button.cta-button-presale, .cta-button.cta-button-red-gradient
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 53 83 9

On text
3.97:1 AA large

On white
3.18:1 AA large

Background, border · .cta-button.cta-button-presale, .cta-button.cta-button-red-gradient
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 100 64 9

On text
2.73:1 Fail

On white
4.64:1 AA

Background · .get-mobile-app-button .button, .brief .brief-headline-line-2
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
69 0 57 28

On text
4.85:1 AA

On white
2.61:1 Fail

Background, text, border · .cta-button-continue-with-third-party.cta-button-spotify, .navigation .nav-item-increment>a:after
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
71 30 0 34

On text
2.58:1 Fail

On white
4.90:1 AA

Text · .cta-button.cta-button-tertiary, .navigation-large-screen .menu-content .change-location
Light Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 100 64 0

On text
3.25:1 AA large

On white
3.88:1 AA large

Text, background, border · .sticky-container.homepage.user-home-discovery.user-home-discovery--light .homep, .related-events-v2__show-more
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
61 41 0 40

On text
1.85:1 Fail

On white
6.84:1 AA

Background, border · .cta-button-continue-with-third-party.cta-button-facebook, .social-sharing.facebook .icon
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 69 69 28

On text
2.20:1 Fail

On white
5.74:1 AA

Background, text · .navigation .nav-item-decrement>a:after, .navigation .nav-item-decrement>a

Gradients

linear-gradient(98deg,#d12479,#da0b46 29%,#e86c28)
linear-gradient(105deg,#fff0 35%,#ffffff14,#fff0 65%)
linear-gradient(180deg,#1f1f1f00,#1f1f1f 74.76%)

Dark mode

Switched on by the site

White

#FFFFFF · --buttons-destructive-text-icon-primary-default
Near Black

#1F2023 · --background-level-02
Cool Dark Grey

#4E5055 · --background-level-03
Maroon

#861D21 · --buttons-destructive-background-primary-default
Red

#FF2D35 · --buttons-destructive-text-icon-tertiary-default
Near Black

#0C0D0D · --background-default
Cool Charcoal

#303236 · --buttons-secondary-background-pressed
Crimson

#FF005C · --buttons-text-links-text-link-primary
Cool Light Grey

#A7ACB4 · --icon-default
Light Grey

#C9CBCF · --text-secondary
Golden Rod

#EDB422 · --utility-focus-primary
Midnight Blue

#193079 · --utility-info-background-solid

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.

Elements

Button

Get started

.get-mobile-app-button .button · #E70154 · radius 16.5px

Link

Read our latest news today.

a · #066792

Corner radius

12px · 12×
50% · 9×
4px · 7×
18.5px · 3×
3px · 3×
20px · 3×

Shadows

0 0 0 2px #dae5e8
0 0 1px #00000026,0 4px 16px #00000026
0 0 0 2px #d4114966
0 0 1px #00000026,0 1px 2px #0000000d

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

320

420

568

600

768

834

838

1040

On a scale of 0 to 1440 px.

Content widths (max-width)

1060 px

1040 px

600 px

544 px

434 px

420 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

▲ CheckThe title is 74 characters. Google usually cuts titles near 60, so the end may not show in results.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Songkick use?: Songkick’s website uses four typefaces: Archivo (headings), google Fonts; Inter, google Fonts; helvetica neue (body text), a system font; sofia-pro, adobe Fonts.
What are Songkick’s brand colours?: The main colours on songkick.com are Forest Green (#009816), Crimson (#F80046), Dark Violet (#9E08D4), Deep Crimson (#DA0B46), Medium Violet Red (#D12479) and Chocolate (#E86C28).
What colour is Songkick’s text and background?: Body text is #333333 on a #FFFFFF background.
Where is Songkick’s logo from?: The logo shown in this guide was found on songkick.com’s homepage. For official logo files and usage rules, check Songkick’s own brand or press page.
Is this Songkick’s official style guide?: No. SiteStyleGuide made it from songkick.com’s public web pages on 29 October 2026, and isn’t affiliated with Songkick. 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

songkick-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* songkick.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/songkick.com) */
:root {
  /* Colours */
  --text: #333333;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-deep-black: #0C0D0D;
  --colour-light-black: #1F1F1F;
  --colour-off-white: #E6E6E6;
  --colour-forest-green: #009816;
  --colour-crimson: #F80046;
  --colour-dark-violet: #9E08D4;
  --colour-deep-crimson: #DA0B46;
  --colour-medium-violet-red: #D12479;
  --colour-chocolate: #E86C28;
  --colour-crimson-2: #E70154;
  --colour-medium-sea-green: #39B74F;
  --colour-steel-blue: #3076A8;
  --colour-light-crimson: #FF005C;
  --colour-royal-blue: #3B5998;
  --colour-fire-brick: #B73939;
  --gradient-1: linear-gradient(98deg,#d12479,#da0b46 29%,#e86c28);
  --gradient-2: linear-gradient(105deg,#fff0 35%,#ffffff14,#fff0 65%);
  --gradient-3: linear-gradient(180deg,#1f1f1f00,#1f1f1f 74.76%);

  /* Typefaces */
  --font-headings: 'Archivo';
  --font-buttons: 'Inter', sans-serif;
  --font-body: 'helvetica neue', 'helvetica', 'arial', sans-serif;
  --font-other: 'sofia-pro', sans-serif;

  /* Type scale */
  --text-h1: 34px;
  --leading-h1: 1.3em;
  --text-h2: 24px;
  --leading-h2: 1.3em;
  --text-h3: 24px;
  --leading-h3: 1.3em;
  --text-h4: 20px;
  --leading-h4: 1.3em;
  --text-h5: 16px;
  --leading-h5: 1.3em;
  --text-h6: 16px;
  --leading-h6: 1.3em;
  --text-body: 16px;
  --leading-body: 1.5;
  --text-p: 1.125rem;
  --leading-p: 24px;
  --text-small: 100%;
  --text-button: 12px;
  --leading-button: 26px;
  --text-a: 1.125rem;
  --leading-a: 1.3333333333;

  /* Shape */
  --radius-1: 12px;
  --radius-2: 50%;
  --radius-3: 4px;
  --radius-4: 18.5px;
  --radius-5: 3px;
  --radius-6: 20px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 420px;
  --breakpoint-3: 568px;
  --breakpoint-4: 600px;
  --breakpoint-5: 768px;
  --breakpoint-6: 834px;
  --breakpoint-7: 838px;
  --breakpoint-8: 1040px;
  --max-width-1: 1060px;
  --max-width-2: 1040px;
  --max-width-3: 600px;
  --max-width-4: 544px;
  --max-width-5: 434px;
  --max-width-6: 420px;
}

{
    "site": "songkick.com",
    "source": "https://sitestyleguide.com/songkick.com",
    "text": "#333333",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Deep Black",
            "hex": "#0C0D0D",
            "rgb": [
                12,
                13,
                13
            ]
        },
        {
            "name": "Light Black",
            "hex": "#1F1F1F",
            "rgb": [
                31,
                31,
                31
            ]
        },
        {
            "name": "Off White",
            "hex": "#E6E6E6",
            "rgb": [
                230,
                230,
                230
            ]
        },
        {
            "name": "Forest Green",
            "hex": "#009816",
            "rgb": [
                0,
                152,
                22
            ]
        },
        {
            "name": "Crimson",
            "hex": "#F80046",
            "rgb": [
                248,
                0,
                70
            ]
        },
        {
            "name": "Dark Violet",
            "hex": "#9E08D4",
            "rgb": [
                158,
                8,
                212
            ]
        },
        {
            "name": "Deep Crimson",
            "hex": "#DA0B46",
            "rgb": [
                218,
                11,
                70
            ]
        },
        {
            "name": "Medium Violet Red",
            "hex": "#D12479",
            "rgb": [
                209,
                36,
                121
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#E86C28",
            "rgb": [
                232,
                108,
                40
            ]
        },
        {
            "name": "Crimson",
            "hex": "#E70154",
            "rgb": [
                231,
                1,
                84
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#39B74F",
            "rgb": [
                57,
                183,
                79
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#3076A8",
            "rgb": [
                48,
                118,
                168
            ]
        },
        {
            "name": "Light Crimson",
            "hex": "#FF005C",
            "rgb": [
                255,
                0,
                92
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#3B5998",
            "rgb": [
                59,
                89,
                152
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#B73939",
            "rgb": [
                183,
                57,
                57
            ]
        }
    ],
    "fonts": [
        {
            "name": "Archivo",
            "stack": "Archivo",
            "weights": [
                300,
                400,
                500,
                600,
                700,
                800
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Inter",
            "stack": "Inter, sans-serif",
            "weights": [
                300,
                400,
                500,
                600,
                700
            ],
            "source": "Google Fonts"
        },
        {
            "name": "helvetica neue",
            "stack": "helvetica neue, helvetica, arial, sans-serif",
            "weights": [
                700
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "sofia-pro",
            "stack": "\"sofia-pro\", sans-serif",
            "weights": [
                600,
                900
            ],
            "source": "Adobe Fonts"
        }
    ]
}

Other websites using Archivo as their main typeface

RT International

rt.com · set in Archivo
Save
grovelust.be

grovelust.be · set in Archivo
Save

Websites whose lead colour is closest to Songkick’s

HugeDomains

leadzupc.com · 20 hours ago
Save
360官网 -360安全中心

360.cn · 2 days ago
Save
GitHub

github.com · 1 day ago
Save
Common Sense Media

commonsensemedia.org · 4 days ago
Save

Captured from songkick.com on 29 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Songkick; this guide describes the public website for reference.

Songkickstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Deep Black

Light Black

Off White

Colours

Forest Green

Crimson

Dark Violet

Deep Crimson

Medium Violet Red

Chocolate

Crimson

Medium Sea Green

Steel Blue

Light Crimson

Royal Blue

Fire Brick

Gradients

Dark mode

Archivo

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run songkick.com?

Also set in Archivo

RT International

grovelust.be

Similar colours

HugeDomains

360官网 -360安全中心

GitHub

Common Sense Media

Title &
description