SiteStyleGuide

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

World Population Review logo

Unofficial style guide

World Population Reviewstyle guide

World Population Review’s website (worldpopulationreview.com) uses Inter-b3f3d53d89cf2b8c for its headings and body text. Its palette is led by Deep Slate Blue (#344054), Black (#101828) and Steel Blue (#0284C7), with #000000 text on #FFFFFF. Captured from the live site on 21 October 2026.

Typefaces
Inter-b3f3d53d89cf2b8c
Palette
4 neutrals, 8 colours, 1 gradient
Captured
21 Oct 2026 · added by @sitestyleguide
https://worldpopulationreview.com/ Screenshot
Screenshot of the worldpopulationreview.com homepage on a desktop screen
Screenshot of worldpopulationreview.com on a 1440 px desktop screen, 21 Oct 2026.

Identity & metadata

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

Title &
description

Page title
Current World Population: 8,298,979,488
● 39 / 60 characters
Meta description
Discover population, economy, health, and more with the most comprehensive global statistics at your fingertips.
● 112 / 160 characters
Site name
World Population Review
og:title
Current World Population: 8,298,979,488
og:description
Discover population, economy, health, and more with the most comprehensive global statistics at your fingertips.
Language
en

In search results

World Population Reviewhttps://worldpopulationreview.com/

Current World Population: 8,298,979,488

Discover population, economy, health, and more with the most comprehensive global statistics at your fingertips.

When shared

The image World Population Review shares with links

worldpopulationreview.com

Current World Population: 8,298,979,488

Discover population, economy, health, and more with the most comprehensive global statistics at your fingerti…

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 35.8%
  • Deep Slate Blue 16.7%
  • Black 14.8%
  • Steel Blue 14.6%
  • Light Slate Blue 3.8%
  • Black 3.2%
  • Midnight Blue 3.1%
  • Cool Light Grey 2.1%
  • Light Steel Blue 1.9%
  • Cool Off White 1.5%
  • Dark Orchid 1.4%
  • Slate Grey 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
    21.00:1 AAA
    On white
    —

    Text, background, border · body, .btn-tertiary

  • Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 100
    On text
    —
    On white
    21.00:1 AAA

    Graphic, background, text · .bg-black, .text-black

  • Cool Light Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    5 3 0 14
    On text
    14.26:1 AAA
    On white
    1.47:1 Fail

    Border · .btn-tertiary, --color-wpr-input-border

  • Cool Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    12 4 0 0
    On text
    18.54:1 AAA
    On white
    1.13:1 Fail

    Background, text · .bg-\[\#E0F4FE\], .dark-section a

Colours

Brand colours and accents, most used first
  • Deep Slate Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    38 24 0 67
    On text
    2.01:1 Fail
    On white
    10.46:1 AAA

    Text · .text-wpr-subtitle, .text-wpr-subtitle\!

  • Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    60 40 0 84
    On text
    1.18:1 Fail
    On white
    17.75:1 AAA

    Text · h1, h2

  • Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    99 34 0 22
    On text
    5.13:1 AA
    On white
    4.10:1 AA large

    Background, text, border · .btn-primary, .btn-cite

  • Light Slate Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    31 18 0 60
    On text
    2.73:1 Fail
    On white
    7.69:1 AAA

    Background · inline style on <div>

  • Midnight Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    89 30 0 71
    On text
    1.58:1 Fail
    On white
    13.29:1 AAA

    Background, border · .bg-\[\#083349\], .dark-section

  • Light Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    20 9 0 4
    On text
    15.11:1 AAA
    On white
    1.39:1 Fail

    Background · .bg-\[\#c4def5\], --color-wpr-statemap-hover

  • Dark Orchid

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 70 0 33
    On text
    3.76:1 AA large
    On white
    5.58:1 AA

    Background · .bg-wpr-netChangeNeg, --color-wpr-netChangeNeg

  • Slate Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    23 16 0 48
    On text
    4.22:1 AA large
    On white
    4.97:1 AA

    Text · .wpr-input-new::placeholder, --color-wpr-input-placeholder

Gradients

  • linear-gradient(initial)

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.

Inter-b3f3d53d89cf2b8c

Aa 400

Inter-b3f3d53d89cf2b8c

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

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

Type scale

From the site’s CSS
Heading 1 1.25rem · 20 px / 1.25 weight 700

World Population Review

Heading 2 1.25rem · 20 px / 1.5 weight 700

Current World Population: 8,298,979,488

Heading 3 1rem · 16 px / 1.625 weight 600

Current World Population: 8,298,979,488

Heading 4 1.25rem · 20 px / 1.625 weight 400

Current World Population: 8,298,979,488

Body .875rem · 14 px / 1.5 weight 400 · Inter-b3f3d53d89cf2b8c

Discover population, economy, health, and more with the most comprehensive global statistics at your fingertips.

Paragraph .75rem · 12 px / initial

Discover population, economy, health, and more with the most comprehensive global statistics at your fingertips.

Small 80%

Discover population, economy, health, and more with the most comprehensive global statistics at your fingertips.

Sizes in use

Most common across the site
  • 20pxline initial · 8 rules
  • 18pxline initial · 3 rules
  • 16pxline 1.625 · 7 rules
  • 14pxline initial · 16 rules
  • 13pxline 1.25 · 1 rules
  • 12pxline initial · 6 rules
  • 11px2 rules
  • 10px2 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

Button

Get started

.btn-primary · #0284C7

Link

Read our latest news today.

a · #0284C7

Corner radius

  • .375rem · 6×
  • 2147483647px · 6×
  • .5rem · 5×
  • .75rem · 5×
  • .25rem · 2×

Shadows

  • 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000
  • 0 0 #0000, 0 0 #0000, 0 0 #0000
  • 0 0 0 1px , 0 3px 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

Content widths (max-width)

1536 px
1280 px
1104 px
768 px
640 px

Back to top ↑

Notes

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

Notes

  • ● FineThe title is 39 characters, short enough to show in full in search results.

Back to top ↑

Questions

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

Questions

What font does World Population Review use?
World Population Review’s website uses one typeface: Inter-b3f3d53d89cf2b8c (headings and body text), self-hosted.
What are World Population Review’s brand colours?
The main colours on worldpopulationreview.com are Deep Slate Blue (#344054), Black (#101828), Steel Blue (#0284C7), Light Slate Blue (#475467), Midnight Blue (#083349) and Light Steel Blue (#C4DEF5).
What colour is World Population Review’s text and background?
Body text is #000000 on a #FFFFFF background.
Where is World Population Review’s logo from?
The logo shown in this guide was found on worldpopulationreview.com’s homepage. For official logo files and usage rules, check World Population Review’s own brand or press page.
Is this World Population Review’s official style guide?
No. SiteStyleGuide made it from worldpopulationreview.com’s public web pages on 21 October 2026, and isn’t affiliated with World Population Review. 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

worldpopulationreview-com-tokens.css

Download

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

/* worldpopulationreview.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/worldpopulationreview.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-cool-light-grey: #D1D5DC;
  --colour-cool-off-white: #E0F4FE;
  --colour-deep-slate-blue: #344054;
  --colour-black-2: #101828;
  --colour-steel-blue: #0284C7;
  --colour-light-slate-blue: #475467;
  --colour-midnight-blue: #083349;
  --colour-light-steel-blue: #C4DEF5;
  --colour-dark-orchid: #AA33AA;
  --colour-slate-grey: #667085;
  --gradient-1: linear-gradient(initial);

  /* Typefaces */
  --font-body: 'Inter-b3f3d53d89cf2b8c', sans-serif;
  --font-headings: 'Inter-b3f3d53d89cf2b8c', sans-serif;

  /* Type scale */
  --text-h1: 1.25rem;
  --leading-h1: 1.25;
  --text-h2: 1.25rem;
  --leading-h2: 1.5;
  --text-h3: 1rem;
  --leading-h3: 1.625;
  --text-h4: 1.25rem;
  --leading-h4: 1.625;
  --text-body: .875rem;
  --leading-body: 1.5;
  --text-p: .75rem;
  --leading-p: initial;
  --text-small: 80%;

  /* Shape */
  --radius-1: .375rem;
  --radius-2: 2147483647px;
  --radius-3: .5rem;
  --radius-4: .75rem;
  --radius-5: .25rem;
}

Back to top ↑

Share

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

Share

Run worldpopulationreview.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.

View our style guide on SiteStyleGuide
<a href="https://sitestyleguide.com/worldpopulationreview.com" title="World Population Review 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 ↑

Websites whose lead colour is closest to World Population Review’s

Captured from worldpopulationreview.com on 21 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by World Population Review; this guide describes the public website for reference.