What font does overcast.fm use?

overcast.fm’s website uses one typeface: Verdana (headings and body text), a system font.

What are overcast.fm’s brand colours?

The main colours on overcast.fm are Dark Orange (#FC7E0F), Lime Green (#0CC322), Dark Slate Grey (#2F5A64), Red (#FC1B0F), Fire Brick (#D0021B) and Indian Red (#FF4466).

What colour is overcast.fm’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is overcast.fm’s logo from?

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

Is this overcast.fm’s official style guide?

No. SiteStyleGuide made it from overcast.fm’s public web pages on 2 November 2026, and isn’t affiliated with overcast.fm. Members can refresh a guide after 90 days to pick up changes.

overcast.fm Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: Overcast; ● 8 / 60 characters
Meta description: Podcast player app for iPhone, iPad, and Apple Watch.; ● 53 / 160 characters
Language: en

In search results

overcast.fmhttps://overcast.fm/

Overcast

Podcast player app for iPhone, iPad, and Apple Watch.

When shared

No og:image, so no picture

overcast.fm

Overcast

Podcast player app for iPhone, iPad, and Apple Watch.

Back to top ↑

Logo & favicons

Found as: image linked to the homepage. SVG.

Logo

On white

On black

On Dark Orange

Favicons

3 found

152 px · PNG apple-touch-icon
32 px · ICO icon
SVG mask-icon

Overcast

Light browser tab

Overcast

Dark browser tab

Back to top ↑

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

Colour

Balance

How much each colour is used

White 22.7%
Dark Orange 17.8%
Off White 16.6%
Black 13.4%
Light Grey 7.6%
Lime Green 5.1%
Dark Slate Grey 3.9%
Red 3.3%
Fire Brick 3.2%
Indian Red 2.3%
Light Yellow 2.2%
Dark Cyan 1.9%

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
21.00:1 AAA

On white
—

Background, text, border · .autocomplete_result h4, .pure-form select
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 7

On text
18.10:1 AAA

On white
1.16:1 Fail

Background, border · .pure-form input[readonly], code
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · body, #autocomplete_results
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 20

On text
13.08:1 AAA

On white
1.61:1 Fail

Border, text · .tmreg, table.adrates .nodata

Colours

Brand colours and accents, most used first

Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 50 94 1

On text
8.13:1 AAA

On white
2.58:1 Fail

Background, text, border · a, .speedmenu
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
94 0 83 24

On text
8.84:1 AAA

On white
2.37:1 Fail

Background, text, border · .purchasebutton, progress.upload_complete::-moz-progress-bar
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
53 10 0 61

On text
2.77:1 Fail

On white
7.59:1 AAA

Text, background · a.adpreviewtitle, table.adpreview .badge
Red

HEX

RGB

HSL

OKLCH

CMYK
0 89 94 1

On text
5.30:1 AA

On white
3.96:1 AA large

Text, border, background · .destructivebutton, #playererror
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 99 87 18

On text
3.71:1 AA large

On white
5.67:1 AA

Background, text · progress.upload_failed::-moz-progress-bar, progress.upload_failed::-webkit-progress-value
Indian Red

HEX

RGB

HSL

OKLCH

CMYK
0 73 60 0

On text
6.27:1 AA

On white
3.35:1 AA large

Border, text, background · .admin_link, .controller_admin .ocborderedbutton:active
Light Yellow

HEX

RGB

HSL

OKLCH

CMYK
0 0 13 0

On text
20.60:1 AAA

On white
1.02:1 Fail

Background · .ocfeedlistinput .wildcard_result, .roundrectmessage
Dark Cyan

HEX

RGB

HSL

OKLCH

CMYK
93 8 0 40

On text
5.28:1 AA

On white
3.97:1 AA large

Text, background, border · .alternatebutton, .purchasebutton:active

Gradients

linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))
linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1))

Dark mode

When the device is set to dark

Near Black

#121214
Off White

#E4E4E6
Charcoal

#2A2A2C
Cool Grey

#98989E
Charcoal

#333333
Cool Grey

#7C7C82

Back to top ↑

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.

Verdana

Aa 400

Verdana

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

Aa 400

FreeSans

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

Aa 400

Lucida Grande

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

Aa 400

arial

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

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

Type scale

From the site’s CSS

Heading 1 2em · 32 px weight 500

overcast.fm

Heading 2 1.5em · 24 px weight 500

Overcast

Heading 3 1.17em · 19 px weight 500

Overcast

Heading 4 1em · 16 px weight 500

Overcast

Heading 5 .83em · 13 px weight 500

Overcast

Heading 6 .67em · 11 px weight 500

Overcast

Small 80%

Podcast player app for iPhone, iPad, and Apple Watch.

Button 100% / normal none

Get started

Sizes in use

Most common across the site

32pxline 0.5em · 3 rules
24px1 rules
19px1 rules
16px2 rules
14px9 rules
13px3 rules
12px5 rules
11px3 rules

Back to top ↑

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

4px · 4×
8px · 4×
3px · 2×
9px · 2×
50% · 2×
2px · 1×

Shadows

0 1px 4px rgba(0, 0, 0, 0.35)
0 6px 30px rgba(0, 0, 0, 0.15)
0 6px 30px rgba(0, 0, 0, 0.5)

Back to top ↑

Layout

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

Grid

Breakpoints

400

480

561

568

768

1024

1280

On a scale of 0 to 1440 px.

Content widths (max-width)

700 px

500 px

320 px

315 px

Back to top ↑

Notes

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

Notes

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

Back to top ↑

Questions

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

Questions

What font does overcast.fm use?: overcast.fm’s website uses one typeface: Verdana (headings and body text), a system font.
What are overcast.fm’s brand colours?: The main colours on overcast.fm are Dark Orange (#FC7E0F), Lime Green (#0CC322), Dark Slate Grey (#2F5A64), Red (#FC1B0F), Fire Brick (#D0021B) and Indian Red (#FF4466).
What colour is overcast.fm’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is overcast.fm’s logo from?: The logo shown in this guide was found on overcast.fm’s homepage. For official logo files and usage rules, check overcast.fm’s own brand or press page.
Is this overcast.fm’s official style guide?: No. SiteStyleGuide made it from overcast.fm’s public web pages on 2 November 2026, and isn’t affiliated with overcast.fm. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

overcast-fm-tokens.css

Download

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

/* overcast.fm design tokens, from SiteStyleGuide (https://sitestyleguide.com/overcast.fm) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-off-white: #EEEEEE;
  --colour-black: #000000;
  --colour-light-grey: #CCCCCC;
  --colour-dark-orange: #FC7E0F;
  --colour-lime-green: #0CC322;
  --colour-dark-slate-grey: #2F5A64;
  --colour-red: #FC1B0F;
  --colour-fire-brick: #D0021B;
  --colour-indian-red: #FF4466;
  --colour-light-yellow: #FFFFDD;
  --colour-dark-cyan: #0B8D99;
  --gradient-1: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
  --gradient-2: linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1));

  /* Typefaces */
  --font-body: -apple-system, system-ui, 'Verdana', sans-serif;
  --font-other: 'FreeSans', 'Arimo', 'Droid Sans', 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --text-h2: 1.5em;
  --text-h3: 1.17em;
  --text-h4: 1em;
  --text-h5: .83em;
  --text-h6: .67em;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: normal;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 3px;
  --radius-4: 9px;
  --radius-5: 50%;
  --radius-6: 2px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 400px;
  --breakpoint-2: 480px;
  --breakpoint-3: 561px;
  --breakpoint-4: 568px;
  --breakpoint-5: 768px;
  --breakpoint-6: 1024px;
  --breakpoint-7: 1280px;
  --max-width-1: 700px;
  --max-width-2: 500px;
  --max-width-3: 320px;
  --max-width-4: 315px;
}

{
    "site": "overcast.fm",
    "source": "https://sitestyleguide.com/overcast.fm",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Off White",
            "hex": "#EEEEEE",
            "rgb": [
                238,
                238,
                238
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#CCCCCC",
            "rgb": [
                204,
                204,
                204
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#FC7E0F",
            "rgb": [
                252,
                126,
                15
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#0CC322",
            "rgb": [
                12,
                195,
                34
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#2F5A64",
            "rgb": [
                47,
                90,
                100
            ]
        },
        {
            "name": "Red",
            "hex": "#FC1B0F",
            "rgb": [
                252,
                27,
                15
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#D0021B",
            "rgb": [
                208,
                2,
                27
            ]
        },
        {
            "name": "Indian Red",
            "hex": "#FF4466",
            "rgb": [
                255,
                68,
                102
            ]
        },
        {
            "name": "Light Yellow",
            "hex": "#FFFFDD",
            "rgb": [
                255,
                255,
                221
            ]
        },
        {
            "name": "Dark Cyan",
            "hex": "#0B8D99",
            "rgb": [
                11,
                141,
                153
            ]
        }
    ],
    "fonts": [
        {
            "name": "Verdana",
            "stack": "-apple-system, system-ui, Verdana, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "FreeSans",
            "stack": "FreeSans, Arimo, \"Droid Sans\", Helvetica, Arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Lucida Grande",
            "stack": "'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "arial",
            "stack": "arial, sans-serif",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run overcast.fm?

Add the badge to your site

Link 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/overcast.fm" title="overcast.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>

Back to top ↑

overcast.fmstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

White

Off White

Black

Light Grey

Colours

Dark Orange

Lime Green

Dark Slate Grey

Red

Fire Brick

Indian Red

Light Yellow

Dark Cyan

Gradients

Dark mode

Verdana

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

FileZilla

biblehub.com

7-zip.org

FC2

ADSCHEMIST

Resurf

ICICI Bank

How-To Geek

overcast.fmstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Off White

Black

Light Grey

Colours

Dark Orange

Lime Green

Dark Slate Grey

Red

Fire Brick

Indian Red

Light Yellow

Dark Cyan

Gradients

Dark mode

Verdana

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run overcast.fm?

Also set in Verdana

FileZilla

biblehub.com

7-zip.org

FC2

Similar colours

ADSCHEMIST

Resurf

ICICI Bank

How-To Geek

Title &
description