What font does Healthline use?

Healthline’s website uses four typefaces: Proxima Nova (headings and body text), self-hosted; Proxima Nova Condensed, self-hosted; healthline, self-hosted; healthline-video, self-hosted.

What are Healthline’s brand colours?

The main colours on healthline.com are Light Teal (#02838D), Dark Slate Grey (#08565C), Powder Blue (#BFE1E7), Deep Teal (#1D7B83), Cadet Blue (#5EB0B9) and Blanched Almond (#EBDCC0).

What colour is Healthline’s text and background?

Body text is #231F20 on a #FFFFFF background.

Where is Healthline’s logo from?

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

Is this Healthline’s official style guide?

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

Healthline 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: Healthline: Medical information and health advice you can trust.; ▲ 64 / 60 characters
Meta description: We're committed to being your source for expert health guidance. Come to us in your pursuit of wellness.; ● 104 / 160 characters
Site name: Healthline
og:title: Healthline: Medical information and health advice you can trust.
og:description: We're committed to being your source for expert health guidance. Come to us in your pursuit of wellness.
Language: en

In search results

Healthlinehttps://www.healthline.com/

Healthline: Medical information and health advice you can tru…

We're committed to being your source for expert health guidance. Come to us in your pursuit of wellness.

When shared

healthline.com

Healthline: Medical information and health advice you can trust.

We're committed to being your source for expert health guidance. Come to us in your pursuit of wellness.

Back to top ↑

Logo & favicons

Found as: SVG in the header. SVG, 171 × 28.

Logo

On white

On black

On Light Teal

Favicons

2 found

256 px · ICO shortcut icon
180 px · PNG apple-touch-icon

Healthline: Medical information and health advice you can trust.

Light browser tab

Healthline: Medical information and health advice you can trust.

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

Colour

Balance

How much each colour is used

Near Black 25.8%
White 17.6%
Light Teal 16.9%
Dark Slate Grey 8.9%
Off White 6.5%
Powder Blue 5.5%
Warm Off White 3.9%
Deep Teal 3.9%
Cadet Blue 3.9%
Blanched Almond 3.9%
Orange 3.2%

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

Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 11 9 86

On text
—

On white
16.30:1 AAA

Text, border · html, .css-1u9adev.css-1u9adev
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
16.30:1 AAA

On white
—

Text, background, border · .css-nhmjls, .css-1wquc8v
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 14

On text
11.80:1 AAA

On white
1.38:1 Fail

Text, background, border · .css-17ztpfa, .css-1q0e30l:disabled
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
3 0 3 8

On text
13.44:1 AAA

On white
1.21:1 Fail

Background · .css-18zel0n, .css-1lztgrv

Colours

Brand colours and accents, most used first

Light Teal

HEX

RGB

HSL

OKLCH

CMYK
99 7 0 45

On text
3.60:1 AA large

On white
4.53:1 AA

Text, background, border · .css-kxhged, .css-1uua7fa
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
91 7 0 64

On text
1.94:1 Fail

On white
8.41:1 AAA

Text, background, border · .css-1fbbs7z, .css-kxhged:hover
Powder Blue

HEX

RGB

HSL

OKLCH

CMYK
17 3 0 9

On text
11.75:1 AAA

On white
1.39:1 Fail

Background · .css-18zel0n, .css-1lztgrv
Deep Teal

HEX

RGB

HSL

OKLCH

CMYK
78 6 0 49

On text
3.27:1 AA large

On white
4.98:1 AA

Background · .css-v1wgwn, .css-prysr1
Cadet Blue

HEX

RGB

HSL

OKLCH

CMYK
49 5 0 27

On text
6.51:1 AA

On white
2.50:1 Fail

Background · .css-v1wgwn, .css-prysr1
Blanched Almond

HEX

RGB

HSL

OKLCH

CMYK
0 6 18 8

On text
12.06:1 AAA

On white
1.35:1 Fail

Background · .css-v1wgwn, .css-prysr1
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 26 73 1

On text
9.51:1 AAA

On white
1.71:1 Fail

Text, border · .css-nhmjls:hover, .css-1sn6mg5:hover

Gradients

linear-gradient(180deg, #BFE1E7 0%, #D2E9EE 50%, #E4EBE5 100%)
linear-gradient(358deg, #E4EBE5 -128.13%, #BFE1E7 93.73%)
linear-gradient(0deg, #E4EBE5 -63.06%, #BFE1E7 182.01%)

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.

Proxima Nova

Aa 400 Aa 700

Proxima Nova

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

Aa 700

Proxima Nova Condensed

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

Aa 400

healthline

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

Aa 400

healthline-video

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

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

Type scale

From the site’s CSS · root 17 px

Heading 1 34px / 38px weight 700 · Proxima Nova Condensed

Healthline

Heading 2 24px / 30px weight 700 · Proxima Nova

Healthline: Medical information and health advi…

Heading 3 20px / 26px weight 700 · Proxima Nova

Healthline: Medical information and health advi…

Heading 4 18px / 26px weight 700 · Proxima Nova

Healthline: Medical information and health advi…

Paragraph 17px / 26px

We're committed to being your source for expert health guidance. Come to us in your pursuit of wellness.

Small 14px / 20px

We're committed to being your source for expert health guidance. Come to us in your pursuit of wellness.

Button 14px / 16px none

Get started

Sizes in use

Most common across the site

34pxline 38px · 2 rules
32pxline 32px · 3 rules
24pxline 30px · 4 rules
20pxline 26px · 4 rules
18pxline 26px · 10 rules
17pxline 26px · 15 rules
16pxline 15px · 5 rules
14pxline 20px · 10 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

30px · 19×
50% · 4×
1000px · 3×
26px · 3×
2px · 2×
18px · 2×

Shadows

0 0 0 3px #fff,0 0 0 5px #02838d,0 8px 24px rgba(0, 0, 0, 0.24)
0px 16px 24px 0px rgba(0, 0, 0, 0.25)

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

767

768

989

990

1190

1280

On a scale of 0 to 1440 px.

Content widths (max-width)

1100 px

989 px

560 px

550 px

500 px

375 px

Back to top ↑

Notes

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

Notes

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

Back to top ↑

Questions

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

Questions

What font does Healthline use?: Healthline’s website uses four typefaces: Proxima Nova (headings and body text), self-hosted; Proxima Nova Condensed, self-hosted; healthline, self-hosted; healthline-video, self-hosted.
What are Healthline’s brand colours?: The main colours on healthline.com are Light Teal (#02838D), Dark Slate Grey (#08565C), Powder Blue (#BFE1E7), Deep Teal (#1D7B83), Cadet Blue (#5EB0B9) and Blanched Almond (#EBDCC0).
What colour is Healthline’s text and background?: Body text is #231F20 on a #FFFFFF background.
Where is Healthline’s logo from?: The logo shown in this guide was found on healthline.com’s homepage. For official logo files and usage rules, check Healthline’s own brand or press page.
Is this Healthline’s official style guide?: No. SiteStyleGuide made it from healthline.com’s public web pages on 29 October 2026, and isn’t affiliated with Healthline. 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

healthline-com-tokens.css

Download

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

/* healthline.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/healthline.com) */
:root {
  /* Colours */
  --text: #231F20;
  --background: #FFFFFF;
  --colour-near-black: #231F20;
  --colour-white: #FFFFFF;
  --colour-off-white: #DCDBDB;
  --colour-warm-off-white: #E4EBE5;
  --colour-light-teal: #02838D;
  --colour-dark-slate-grey: #08565C;
  --colour-powder-blue: #BFE1E7;
  --colour-deep-teal: #1D7B83;
  --colour-cadet-blue: #5EB0B9;
  --colour-blanched-almond: #EBDCC0;
  --colour-orange: #FCBA44;
  --gradient-1: linear-gradient(180deg, #BFE1E7 0%, #D2E9EE 50%, #E4EBE5 100%);
  --gradient-2: linear-gradient(358deg, #E4EBE5 -128.13%, #BFE1E7 93.73%);
  --gradient-3: linear-gradient(0deg, #E4EBE5 -63.06%, #BFE1E7 182.01%);

  /* Typefaces */
  --font-headings: 'Proxima Nova', 'Proxima Nova Fallback', sans-serif;
  --font-body: 'Proxima Nova', 'Proxima Nova Fallback', sans-serif;
  --font-other: 'healthline';

  /* Type scale */
  --text-h1: 34px;
  --leading-h1: 38px;
  --text-h2: 24px;
  --leading-h2: 30px;
  --text-h3: 20px;
  --leading-h3: 26px;
  --text-h4: 18px;
  --leading-h4: 26px;
  --text-p: 17px;
  --leading-p: 26px;
  --text-small: 14px;
  --leading-small: 20px;
  --text-button: 14px;
  --leading-button: 16px;

  /* Shape */
  --radius-1: 30px;
  --radius-2: 50%;
  --radius-3: 1000px;
  --radius-4: 26px;
  --radius-5: 2px;
  --radius-6: 18px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 767px;
  --breakpoint-2: 768px;
  --breakpoint-3: 989px;
  --breakpoint-4: 990px;
  --breakpoint-5: 1190px;
  --breakpoint-6: 1280px;
  --max-width-1: 1100px;
  --max-width-2: 989px;
  --max-width-3: 560px;
  --max-width-4: 550px;
  --max-width-5: 500px;
  --max-width-6: 375px;
}

{
    "site": "healthline.com",
    "source": "https://sitestyleguide.com/healthline.com",
    "text": "#231F20",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Near Black",
            "hex": "#231F20",
            "rgb": [
                35,
                31,
                32
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Off White",
            "hex": "#DCDBDB",
            "rgb": [
                220,
                219,
                219
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#E4EBE5",
            "rgb": [
                228,
                235,
                229
            ]
        },
        {
            "name": "Light Teal",
            "hex": "#02838D",
            "rgb": [
                2,
                131,
                141
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#08565C",
            "rgb": [
                8,
                86,
                92
            ]
        },
        {
            "name": "Powder Blue",
            "hex": "#BFE1E7",
            "rgb": [
                191,
                225,
                231
            ]
        },
        {
            "name": "Deep Teal",
            "hex": "#1D7B83",
            "rgb": [
                29,
                123,
                131
            ]
        },
        {
            "name": "Cadet Blue",
            "hex": "#5EB0B9",
            "rgb": [
                94,
                176,
                185
            ]
        },
        {
            "name": "Blanched Almond",
            "hex": "#EBDCC0",
            "rgb": [
                235,
                220,
                192
            ]
        },
        {
            "name": "Orange",
            "hex": "#FCBA44",
            "rgb": [
                252,
                186,
                68
            ]
        }
    ],
    "fonts": [
        {
            "name": "Proxima Nova",
            "stack": "\"Proxima Nova\", \"Proxima Nova Fallback\", sans-serif",
            "weights": [
                400,
                600,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Proxima Nova Condensed",
            "stack": "\"Proxima Nova Condensed\", \"Proxima Nova Condensed Fallback\", sans-serif",
            "weights": [
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "healthline",
            "stack": "'healthline'",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "healthline-video",
            "stack": "'healthline-video'",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "healthline-video-mobile",
            "stack": "'healthline-video-mobile'",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

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 healthline.com?

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/healthline.com" title="Healthline 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 ↑

Healthlinestyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Near Black

White

Off White

Warm Off White

Colours

Light Teal

Dark Slate Grey

Powder Blue

Deep Teal

Cadet Blue

Blanched Almond

Orange

Gradients

Proxima Nova

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

about.me

CBS News

Bleacher Report

water

donga.com

orbitz

The Denver Post

Wabi

Healthlinestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Near Black

White

Off White

Warm Off White

Colours

Light Teal

Dark Slate Grey

Powder Blue

Deep Teal

Cadet Blue

Blanched Almond

Orange

Gradients

Proxima Nova

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run healthline.com?

Also set in Proxima Nova

about.me

CBS News

Bleacher Report

water

Similar colours

donga.com

orbitz

The Denver Post

Wabi

Title &
description