What font does songfacts.com use?

songfacts.com’s website uses two typefaces: Verdana (body text), a system font; din (headings), self-hosted.

What are songfacts.com’s brand colours?

The main colours on songfacts.com are Golden Rod (#C2A25C), Orange Red (#FF6600), Purple (#6B3353), Light Steel Blue (#A49EE6), Cornflower Blue (#5A9DF1) and Orange (#FFB03B).

What colour is songfacts.com’s text and background?

Body text is #676666 on a #FFFFFF background.

Where is songfacts.com’s logo from?

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

Is this songfacts.com’s official style guide?

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

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

Unofficial style guide

songfacts.comstyle guide

songfacts.com’s website (songfacts.com) sets its headings in din and its body text in Verdana. Its palette is led by Golden Rod (#C2A25C), Orange Red (#FF6600) and Purple (#6B3353), with #676666 text on #FFFFFF. Captured from the live site on 22 October 2026.

Website: songfacts.com
Typefaces: Verdana, din
Palette: 4 neutrals, 12 colours
Captured: 22 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the songfacts.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: Song Meanings at Songfacts; ● 26 / 60 characters
Meta description: Songfacts - the stories and meanings behind the songs, with songwriter interviews and lyrics.; ● 93 / 160 characters
og:title: Song Meanings at Songfacts
og:description: Songfacts - the stories and meanings behind the songs, with songwriter interviews and lyrics.
Language: en
Theme colour: #ffffff

In search results

songfacts.comhttps://www.songfacts.com/

Song Meanings at Songfacts

Songfacts - the stories and meanings behind the songs, with songwriter interviews and lyrics.

When shared

No og:image, so no picture

songfacts.com

Song Meanings at Songfacts

Songfacts - the stories and meanings behind the songs, with songwriter interviews and lyrics.

Logo & favicons

Found as: image in the header. PNG, 245 × 77.

Logo

On white

On black

On Golden Rod

Favicons

8 found

180 px · PNG apple-touch-icon
72 px · PNG manifest
60 px · PNG manifest
57 px · PNG manifest
48 px · ICO shortcut icon
32 px · PNG icon
16 px · PNG icon
16 px · SVG mask-icon

Song Meanings at Songfacts

Light browser tab

Song Meanings at Songfacts

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

Colour

Balance

How much each colour is used

White 33.5%
Golden Rod 10.4%
Charcoal 7.8%
Orange Red 7.7%
Black 7.1%
Grey 6%
Purple 5.7%
Light Steel Blue 5%
Cornflower Blue 4.8%
Orange 3.9%
Medium Sea Green 2.1%
Dark Golden Rod 2.1%
Steel Blue 1.7%
Yellow Green 1%
Fire Brick 0.6%
Dark Slate Blue 0.5%

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
5.72:1 AA

On white
—

Text, background, border · .footer_grey h4, .footer_orange h4
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 80

On text
2.21:1 Fail

On white
12.63:1 AAA

Text, background, border · .btn-info, .btn-default
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
3.67:1 AA large

On white
21.00:1 AAA

Text, background, border · inline style on <span>, h1
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 40

On text
2.01:1 Fail

On white
2.85:1 Fail

Text, background, border · .navbar-inverse .navbar-toggle .icon-bar, #sfwidget h4 small

Colours

Brand colours and accents, most used first

Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 16 53 24

On text
2.35:1 Fail

On white
2.44:1 Fail

Text, border, background · .blog-content h5, inline style on <span>
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 60 100 0

On text
1.95:1 Fail

On white
2.94:1 Fail

Text, background, border · .song-title, a
Purple

HEX

RGB

HSL

OKLCH

CMYK
0 52 22 58

On text
1.65:1 Fail

On white
9.44:1 AAA

Background, border, text · .navbar-inverse .navbar-nav > li:nth-of-type(3) > a, .places-quote-fullwidth
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
29 31 0 10

On text
2.35:1 Fail

On white
2.44:1 Fail

Background, border, text · .navbar-inverse .navbar-nav > li:nth-of-type(2) > a, .pagin-purple span.current
Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
63 35 0 5

On text
2.05:1 Fail

On white
2.79:1 Fail

Background, text, border · .btn-newsletter, .pagin-blue span.current
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 31 77 0

On text
3.14:1 AA large

On white
1.82:1 Fail

Background, text, border · .navbar-inverse .navbar-nav > li:nth-of-type(1) > a, .tab-browse #lilyrics a:not(.active)
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
44 0 30 34

On text
2.00:1 Fail

On white
2.86:1 Fail

Text, background, border · .tab-browse #limages a:not(.active), #sfsubm-scc .sfsubm-item.sfsubm-itemsel.sfidsel-songimages
Dark Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 22 71 39

On text
1.41:1 Fail

On white
4.05:1 AA large

Text · .blogullist-bronze span.titled a, .blogullist-bronze span.titled-noimg a
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
79 18 0 29

On text
1.65:1 Fail

On white
3.46:1 AA large

Text, background, border · .artist-hotspot h4, .artist-title
Yellow Green

HEX

RGB

HSL

OKLCH

CMYK
38 0 92 28

On text
2.32:1 Fail

On white
2.47:1 Fail

Background, border · .btn-success, .btn-newsletter
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 60 71 29

On text
1.07:1 Fail

On white
5.36:1 AA

Background · .navbar-inverse .navbar-nav > li:nth-of-type(5) > a
Dark Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
48 52 0 60

On text
2.06:1 Fail

On white
11.78:1 AAA

Text · .dark-purple, .browse-list-purple a

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.

din

Aa 400

Verdana

System font, or not loaded on this page · weights 400 · body, buttons · shown in a stand-in if you don’t have it

Aa 400

din

Self-hosted · weights 400 · headings · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 60px weight 400 · din

songfacts.com

Heading 2 22px / 22px weight 400 · din

Song Meanings at Songfacts

Heading 3 20px / 20px weight 400 · din

Song Meanings at Songfacts

Heading 4 19px / 22px weight 400 · din

Song Meanings at Songfacts

Heading 5 15px weight 400 · din

Song Meanings at Songfacts

Heading 6 16px weight 400 · din

Song Meanings at Songfacts

Body 15px / 22px Verdana

Songfacts - the stories and meanings behind the songs, with songwriter interviews and lyrics.

Paragraph 14px / 20px weight 500 · uppercase · din

Songfacts - the stories and meanings behind the songs, with songwriter interviews and lyrics.

Small 80%

Songfacts - the stories and meanings behind the songs, with songwriter interviews and lyrics.

Button 0 · 0 px / 0 weight 400 · none · Verdana

Get started

Link 16px / 1.5 weight 400 · uppercase

Sizes in use

Most common across the site

32px2 rules
22pxline 22px · 3 rules
20pxline 20px · 5 rules
18pxline 1.6em · 2 rules
17pxline 25px · 4 rules
16pxline 1.5em · 7 rules
14pxline 1.42857143 · 11 rules
12pxline 1.42857143 · 5 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-newsletter · #5A9DF1

Link

Read our latest news today.

a · #FF6600

Corner radius

5px · 21×
4px · 11×
10px · 6×
20px · 2×
4px 4px 0 0 · 1×
1px · 1×

Shadows

0 6px 12px rgba(0, 0, 0, 0.175)
0 0 30px rgba( 0,0,0,0.6 )
0px 3px 5px rgba(0, 0, 0, 0.3)
0px 2px 10px rgba(0, 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

360

640

767

768

991

992

1199

1200

On a scale of 0 to 1440 px.

Content widths (max-width)

400 px

360 px

350 px

336 px

320 px

300 px

Notes

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

Notes

● FineThe title is 26 characters, short enough to show in full in search results.
▲ CheckThere is no og:image, so links shared on social media show no picture.

Questions

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

Questions

What font does songfacts.com use?: songfacts.com’s website uses two typefaces: Verdana (body text), a system font; din (headings), self-hosted.
What are songfacts.com’s brand colours?: The main colours on songfacts.com are Golden Rod (#C2A25C), Orange Red (#FF6600), Purple (#6B3353), Light Steel Blue (#A49EE6), Cornflower Blue (#5A9DF1) and Orange (#FFB03B).
What colour is songfacts.com’s text and background?: Body text is #676666 on a #FFFFFF background.
Where is songfacts.com’s logo from?: The logo shown in this guide was found on songfacts.com’s homepage. For official logo files and usage rules, check songfacts.com’s own brand or press page.
Is this songfacts.com’s official style guide?: No. SiteStyleGuide made it from songfacts.com’s public web pages on 22 October 2026, and isn’t affiliated with songfacts.com. 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

songfacts-com-tokens.css

Download

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

/* songfacts.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/songfacts.com) */
:root {
  /* Colours */
  --text: #676666;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-black: #000000;
  --colour-grey: #999999;
  --colour-golden-rod: #C2A25C;
  --colour-orange-red: #FF6600;
  --colour-purple: #6B3353;
  --colour-light-steel-blue: #A49EE6;
  --colour-cornflower-blue: #5A9DF1;
  --colour-orange: #FFB03B;
  --colour-medium-sea-green: #5EA876;
  --colour-dark-golden-rod: #9C792D;
  --colour-steel-blue: #2795B6;
  --colour-yellow-green: #72B70F;
  --colour-fire-brick: #B44835;
  --colour-dark-slate-blue: #353166;

  /* Typefaces */
  --font-body: 'Verdana', sans-serif;
  --font-buttons: 'Verdana', sans-serif;
  --font-headings: 'din';

  /* Type scale */
  --text-h1: 60px;
  --text-h2: 22px;
  --leading-h2: 22px;
  --text-h3: 20px;
  --leading-h3: 20px;
  --text-h4: 19px;
  --leading-h4: 22px;
  --text-h5: 15px;
  --text-h6: 16px;
  --text-body: 15px;
  --leading-body: 22px;
  --text-p: 14px;
  --leading-p: 20px;
  --text-small: 80%;
  --text-button: 0;
  --leading-button: 0;
  --text-a: 16px;
  --leading-a: 1.5;

  /* Shape */
  --radius-1: 5px;
  --radius-2: 4px;
  --radius-3: 10px;
  --radius-4: 20px;
  --radius-5: 4px 4px 0 0;
  --radius-6: 1px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 360px;
  --breakpoint-2: 640px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 991px;
  --breakpoint-6: 992px;
  --breakpoint-7: 1199px;
  --breakpoint-8: 1200px;
  --max-width-1: 400px;
  --max-width-2: 360px;
  --max-width-3: 350px;
  --max-width-4: 336px;
  --max-width-5: 320px;
  --max-width-6: 300px;
}

{
    "site": "songfacts.com",
    "source": "https://sitestyleguide.com/songfacts.com",
    "text": "#676666",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#333333",
            "rgb": [
                51,
                51,
                51
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Grey",
            "hex": "#999999",
            "rgb": [
                153,
                153,
                153
            ]
        },
        {
            "name": "Golden Rod",
            "hex": "#C2A25C",
            "rgb": [
                194,
                162,
                92
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF6600",
            "rgb": [
                255,
                102,
                0
            ]
        },
        {
            "name": "Purple",
            "hex": "#6B3353",
            "rgb": [
                107,
                51,
                83
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#A49EE6",
            "rgb": [
                164,
                158,
                230
            ]
        },
        {
            "name": "Cornflower Blue",
            "hex": "#5A9DF1",
            "rgb": [
                90,
                157,
                241
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFB03B",
            "rgb": [
                255,
                176,
                59
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#5EA876",
            "rgb": [
                94,
                168,
                118
            ]
        },
        {
            "name": "Dark Golden Rod",
            "hex": "#9C792D",
            "rgb": [
                156,
                121,
                45
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#2795B6",
            "rgb": [
                39,
                149,
                182
            ]
        },
        {
            "name": "Yellow Green",
            "hex": "#72B70F",
            "rgb": [
                114,
                183,
                15
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#B44835",
            "rgb": [
                180,
                72,
                53
            ]
        },
        {
            "name": "Dark Slate Blue",
            "hex": "#353166",
            "rgb": [
                53,
                49,
                102
            ]
        }
    ],
    "fonts": [
        {
            "name": "Verdana",
            "stack": "Verdana, Sans-Serif",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "din",
            "stack": "din",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Verdana as their main typeface

overcast.fm

overcast.fm · set in Verdana
Save
FileZilla

filezilla-project.org · set in Verdana
Save
biblehub.com

biblehub.com · set in Verdana
Save
7-zip.org

7-zip.org · set in Verdana
Save

Websites whose lead colour is closest to songfacts.com’s

mixi

mixi.jp · 1 day ago
Save
Tasting Table

tastingtable.com · 5 days ago
Save
mysql.com

mysql.com · 3 days ago
Save
ViV MGMT

vivmgmt.com · 2 days ago
Save

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

songfacts.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Charcoal

Black

Grey

Colours

Golden Rod

Orange Red

Purple

Light Steel Blue

Cornflower Blue

Orange

Medium Sea Green

Dark Golden Rod

Steel Blue

Yellow Green

Fire Brick

Dark Slate Blue

din

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run songfacts.com?

Also set in Verdana

overcast.fm

FileZilla

biblehub.com

7-zip.org

Similar colours

mixi

Tasting Table

mysql.com

ViV MGMT

Title &
description