What font does Vox use?

Vox’s website uses four typefaces: Segoe UI (headings and body text), a system font; balto, self-hosted; harriet, self-hosted; Roboto Mono, self-hosted.

What are Vox’s brand colours?

The main colours on vox.com are Yellow (#FFF200), Crimson (#EE0033), Lemon Chiffon (#FDFACE), Near Black (#131313), White (#FFFFFF) and Black (#000000).

What colour is Vox’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Vox’s logo from?

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

Is this Vox’s official style guide?

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

Vox 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: Vox; ● 3 / 60 characters
Meta description: Vox is a general interest news site for the 21st century. Its mission: to help everyone understand our complicated world, so that we can all help shape it. In text, video and audio, our reporters explain politics, policy, world affairs, technology, culture, science, the climate crisis, money, health and everything else that matters. Our goal is to ensure that everyone, regardless of income or status, can access accurate information that empowers them.; ▲ 455 / 160 characters
Site name: Vox
og:title: Vox
og:description: Vox is a general interest news site for the 21st century. Its mission: to help everyone understand our complicated world, so that we can all help shape it. In text, video and audio, our reporters explain politics, policy, world affairs, technology, culture, science, the climate crisis, money, health and everything else that matters. Our goal is to ensure that everyone, regardless of income or status, can access accurate information that empowers them.
Language: en-US

In search results

Voxhttps://www.vox.com/

Vox

Vox is a general interest news site for the 21st century. Its mission: to help everyone understand our complicated world, so that we can all help shape it. In te…

When shared

vox.com

Vox

Vox is a general interest news site for the 21st century. Its mission: to help everyone understand our compli…

Back to top ↑

Logo & favicons

Found as: schema.org logo. PNG, 1200 × 624.

Logo

On white

On black

On Yellow

Favicons

7 found

558 px · PNG icon
270 px · PNG apple-touch-icon
100 px · SVG mask-icon
96 px · PNG icon
64 px · ICO shortcut icon
32 px · PNG icon
16 px · PNG icon

Vox

Light browser tab

Vox

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

Near Black 37.3%
White 23.3%
Black 15.2%
Yellow 11.8%
Off White 10.4%
Crimson 1.4%
Lemon Chiffon 0.6%

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 0 0 93

On text
1.13:1 Fail

On white
18.58:1 AAA

Graphic · --sfj0d62, --sfj0d68
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
21.00:1 AAA

On white
—

Background, text, graphic · --sfj0d619l, .st2
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Background, graphic, text · .st0, .st1
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 9

On text
17.30:1 AAA

On white
1.21:1 Fail

Border, background · ._1wmfnm11, ._1x9gc5hf

Colours

Brand colours and accents, most used first

Yellow

HEX

RGB

HSL

OKLCH

CMYK
0 5 100 0

On text
17.95:1 AAA

On white
1.17:1 Fail

Graphic, background · inline style on <path>, .st0
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 100 79 7

On text
4.68:1 AA

On white
4.48:1 AA large

Text, border · ._8yk9z2, --sfj0d6b
Lemon Chiffon

HEX

RGB

HSL

OKLCH

CMYK
0 1 19 1

On text
19.74:1 AAA

On white
1.06:1 Fail

Used · --sfj0d6l7, --sfj0d6oh

Gradients

linear-gradient(#ffffff4d 0%,#fff0 100%)
linear-gradient(#0000004d 0%,#0000 100%)
linear-gradient(180deg, transparent, )

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.

Segoe UI

Aa 400

Segoe UI

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

Aa 400 Aa 700

balto

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

Aa 400 Aa 700

harriet

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

Aa 400 Aa 700

Roboto Mono

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

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

Type scale

From the site’s CSS

Small 80%

Vox is a general interest news site for the 21st century. Its mission: to help everyone understand our complicated world, so that we can al…

Button 100% none

Get started

Sizes in use

Most common across the site

20pxline 120% · 5 rules
18pxline 21.6px · 6 rules
16pxline 130% · 17 rules
15px3 rules
14pxline 140% · 7 rules
13pxline 130% · 5 rules
12pxline 160% · 11 rules
11pxline 200% · 4 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

50% · 15×
10px · 5×
20px · 4×
24px · 3×
999px · 3×

Shadows

0 4px 24px #00000040
3px 4px 0 0
5px 6px 0 0

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

901

1179

1180

1181

1200

1300

On a scale of 0 to 1440 px.

Content widths (max-width)

1100 px

800 px

700 px

600 px

450 px

325 px

Back to top ↑

Notes

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

Notes

● FineThe title is 3 characters, short enough to show in full in search results.
▲ CheckThe description is 455 characters. Search results usually show about 160.

Back to top ↑

Questions

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

Questions

What font does Vox use?: Vox’s website uses four typefaces: Segoe UI (headings and body text), a system font; balto, self-hosted; harriet, self-hosted; Roboto Mono, self-hosted.
What are Vox’s brand colours?: The main colours on vox.com are Yellow (#FFF200), Crimson (#EE0033), Lemon Chiffon (#FDFACE), Near Black (#131313), White (#FFFFFF) and Black (#000000).
What colour is Vox’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Vox’s logo from?: The logo shown in this guide was found on vox.com’s homepage. For official logo files and usage rules, check Vox’s own brand or press page.
Is this Vox’s official style guide?: No. SiteStyleGuide made it from vox.com’s public web pages on 26 October 2026, and isn’t affiliated with Vox. 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

vox-com-tokens.css

Download

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

/* vox.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/vox.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-near-black: #131313;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-off-white: #E9E9E9;
  --colour-yellow: #FFF200;
  --colour-crimson: #EE0033;
  --colour-lemon-chiffon: #FDFACE;
  --gradient-1: linear-gradient(#ffffff4d 0%,#fff0 100%);
  --gradient-2: linear-gradient(#0000004d 0%,#0000 100%);
  --gradient-3: linear-gradient(180deg, transparent, );

  /* Typefaces */
  --font-body: ui-sans-serif, system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto';
  --font-other: 'balto', 'balto Fallback', 'Arial', sans-serif;

  /* Type scale */
  --text-small: 80%;
  --text-button: 100%;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 10px;
  --radius-3: 20px;
  --radius-4: 24px;
  --radius-5: 999px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 767px;
  --breakpoint-2: 768px;
  --breakpoint-3: 901px;
  --breakpoint-4: 1179px;
  --breakpoint-5: 1180px;
  --breakpoint-6: 1181px;
  --breakpoint-7: 1200px;
  --breakpoint-8: 1300px;
  --max-width-1: 1100px;
  --max-width-2: 800px;
  --max-width-3: 700px;
  --max-width-4: 600px;
  --max-width-5: 450px;
  --max-width-6: 325px;
}

{
    "site": "vox.com",
    "source": "https://sitestyleguide.com/vox.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Near Black",
            "hex": "#131313",
            "rgb": [
                19,
                19,
                19
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Off White",
            "hex": "#E9E9E9",
            "rgb": [
                233,
                233,
                233
            ]
        },
        {
            "name": "Yellow",
            "hex": "#FFF200",
            "rgb": [
                255,
                242,
                0
            ]
        },
        {
            "name": "Crimson",
            "hex": "#EE0033",
            "rgb": [
                238,
                0,
                51
            ]
        },
        {
            "name": "Lemon Chiffon",
            "hex": "#FDFACE",
            "rgb": [
                253,
                250,
                206
            ]
        }
    ],
    "fonts": [
        {
            "name": "Segoe UI",
            "stack": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "balto",
            "stack": "balto, balto Fallback, Arial, sans-serif",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "harriet",
            "stack": "harriet, harriet Fallback, Georgia, serif",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Roboto Mono",
            "stack": "Roboto Mono, Roboto Mono Fallback",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Helvetica Neue",
            "stack": "Helvetica Neue",
            "weights": [
                300
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Manrope",
            "stack": "Manrope",
            "weights": [
                500
            ],
            "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 vox.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/vox.com" title="Vox 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 ↑

Voxstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Near Black

White

Black

Off White

Colours

Yellow

Crimson

Lemon Chiffon

Gradients

Segoe UI

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

SORT

CodeCanyon

xbox.com

orbitz

Lulu

Adcash

iMore

Onet

Voxstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Near Black

White

Black

Off White

Colours

Yellow

Crimson

Lemon Chiffon

Gradients

Segoe UI

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run vox.com?

Also set in Segoe UI

SORT

CodeCanyon

xbox.com

orbitz

Similar colours

Lulu

Adcash

iMore

Onet

Title &
description