What font does Metro use?

Metro’s website uses two typefaces: Roboto Flex (headings), google Fonts; Roboto (body text), google Fonts.

What are Metro’s brand colours?

The main colours on metro.co.uk are Crimson (#FF0044), Deep Pink (#FB257C), Medium Violet Red (#C6146A), Burly Wood (#F6C286), Medium Aqua Marine (#10C4A3) and Blue (#0032F5).

What colour is Metro’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Metro’s logo from?

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

Is this Metro’s official style guide?

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

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

Unofficial style guide

Metrostyle guide

Metro’s website (metro.co.uk) sets its headings in Roboto Flex and its body text in Roboto. Its palette is led by Crimson (#FF0044), Deep Pink (#FB257C) and Medium Violet Red (#C6146A), with #000000 text on #FFFFFF. Captured from the live site on 21 October 2026.

Website: metro.co.uk
Typefaces: Roboto Flex, Roboto
Palette: 4 neutrals, 11 colours, 1 gradient
Captured: 21 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the metro.co.uk homepage on a desktop screen — Screenshot of metro.co.uk on a 1440 px desktop screen, 21 Oct 2026.

Screenshot of the metro.co.uk 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: Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro; ● 57 / 60 characters
Meta description: Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro; ● 57 / 160 characters
Site name: Metro
og:title: Metro – Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro
og:description: Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro
Language: en
Theme colour: #000000

In search results

Metrohttps://metro.co.uk/

Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro

When shared

metro.co.uk

Metro – Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro

Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro

Logo & favicons

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

Logo

On white

On black

On Crimson

Favicons

4 found

192 px · PNG icon
180 px · PNG apple-touch-icon
32 px · PNG icon
16 px · ICO favicon.ico

Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro

Light browser tab

Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro

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 (#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 39.8%
Black 30.7%
Crimson 7.8%
Off White 7.6%
Charcoal 4.8%
Deep Pink 1.4%
Medium Violet Red 1.3%
Burly Wood 1.1%
Medium Aqua Marine 1%
Blue 1%
Dodger Blue 0.8%
Medium Sea Green 0.7%
Royal Blue 0.7%
Medium Slate Blue 0.7%
Dark Turquoise 0.7%

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, graphic · --accent-text-color, .spotlight--with-background .spotlight__sponsor-label
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Background, text, border · .menu--expanded .header:after, .menu--expanded .site-navigation
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 8

On text
17.46:1 AAA

On white
1.20:1 Fail

Background, border · .latest .latest_title, .columnists_more:before
Charcoal

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 85

On text
1.39:1 Fail

On white
15.13:1 AAA

Background · .top-stories .post-grid__item, .spotlight--with-background

Colours

Brand colours and accents, most used first

Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 100 73 0

On text
5.34:1 AA

On white
3.94:1 AA large

Background, text, border · .spotlight.spotlight_live .spotlight_title span:first-of-type, .metro-signpost-club-metro
Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 85 51 2

On text
5.66:1 AA

On white
3.71:1 AA large

Background, border · .metro-signpost-gossip, .share-buttons-floaty .next_story
Medium Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 90 46 22

On text
3.71:1 AA large

On white
5.66:1 AA

Background, border · .metro-signpost-partner-content, .metro-signpost-promoted
Burly Wood

HEX

RGB

HSL

OKLCH

CMYK
0 21 46 4

On text
12.98:1 AAA

On white
1.62:1 Fail

Background, border · .newsletter-signup__tooltip.active, --metro--category--primary-color--newsletters
Medium Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
92 0 17 23

On text
9.45:1 AAA

On white
2.22:1 Fail

Background, border · .metro-signpost-shopping, --metro--category--primary-color--shopping
Blue

HEX

RGB

HSL

OKLCH

CMYK
100 80 0 4

On text
2.77:1 Fail

On white
7.57:1 AAA

Background, border · .metro-signpost-opinion, --metro--category--primary-color--opinion
Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
90 46 0 1

On text
5.97:1 AA

On white
3.52:1 AA large

Background · .desktop-notification__cta, --metro--category--primary-color--news
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 38 35

On text
6.73:1 AA

On white
3.12:1 AA large

Background, border · .metro-signpost-analysis
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 51 0 13

On text
4.30:1 AA large

On white
4.89:1 AA

Background, border · .metro-signpost-first-person
Medium Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
68 65 0 0

On text
4.23:1 AA large

On white
4.96:1 AA

Background, border · .metro-signpost-original
Dark Turquoise

HEX

RGB

HSL

OKLCH

CMYK
94 10 0 18

On text
9.12:1 AAA

On white
2.30:1 Fail

Background, border · .metro-signpost-review

Gradients

linear-gradient(270deg,#fff 60%,transparent)

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.

Roboto Flex

Aa 100 Aa 900

Roboto Flex

Google Fonts · weights 100, 400, 700, 900 · headings

Aa 100 Aa 900

Roboto

Google Fonts · weights 100, 300, 400, 500, 700, 900 · headings, body

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

Type scale

From the site’s CSS

Heading 1 27px / 33px weight 900 · Roboto

Metro

Heading 2 1.5rem · 24 px weight 900

Metro.co.uk: News, Sport, Showbiz, Celebrities …

Heading 3 1.17rem · 19 px weight 700

Metro.co.uk: News, Sport, Showbiz, Celebrities …

Heading 4 1rem · 16 px weight 700

Metro.co.uk: News, Sport, Showbiz, Celebrities …

Body 16px / 22px weight 400 · Roboto

Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro

Paragraph 15px / 21px weight 900 · uppercase

Metro.co.uk: News, Sport, Showbiz, Celebrities from Metro

Link 16px / 1 weight 700 · uppercase · Roboto

Sizes in use

Most common across the site

36pxline 1 · 5 rules
28pxline 34px · 10 rules
24pxline 30px · 10 rules
18pxline 24px · 4 rules
16pxline 22px · 7 rules
15pxline 21px · 4 rules
14pxline 20px · 10 rules
8pxline 14px · 4 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

.newsletter-mpu .newsletter-signup__submit button · #000000

Link

Read our latest news today.

a · #000000

Corner radius

16px · 6×
99px · 4×
10px · 3×
50% · 3×
22.5px · 3×
25px · 3×

Shadows

2px 2px 2px 0 rgba(46,46,46,.2)

Layout

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

Grid

Breakpoints

376

416

500

600

768

801

949

960

On a scale of 0 to 1440 px.

Content widths (max-width)

960 px

435 px

300 px

Notes

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

Notes

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

Questions

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

Questions

What font does Metro use?: Metro’s website uses two typefaces: Roboto Flex (headings), google Fonts; Roboto (body text), google Fonts.
What are Metro’s brand colours?: The main colours on metro.co.uk are Crimson (#FF0044), Deep Pink (#FB257C), Medium Violet Red (#C6146A), Burly Wood (#F6C286), Medium Aqua Marine (#10C4A3) and Blue (#0032F5).
What colour is Metro’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Metro’s logo from?: The logo shown in this guide was found on metro.co.uk’s homepage. For official logo files and usage rules, check Metro’s own brand or press page.
Is this Metro’s official style guide?: No. SiteStyleGuide made it from metro.co.uk’s public web pages on 21 October 2026, and isn’t affiliated with Metro. 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

metro-co-uk-tokens.css

Download

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

/* metro.co.uk design tokens, from SiteStyleGuide (https://sitestyleguide.com/metro.co.uk) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-off-white: #EAEAEA;
  --colour-charcoal: #262626;
  --colour-crimson: #FF0044;
  --colour-deep-pink: #FB257C;
  --colour-medium-violet-red: #C6146A;
  --colour-burly-wood: #F6C286;
  --colour-medium-aqua-marine: #10C4A3;
  --colour-blue: #0032F5;
  --colour-dodger-blue: #1888FC;
  --colour-medium-sea-green: #00A768;
  --colour-royal-blue: #006EDF;
  --colour-medium-slate-blue: #5259FF;
  --colour-dark-turquoise: #0CBCD0;
  --gradient-1: linear-gradient(270deg,#fff 60%,transparent);

  /* Typefaces */
  --font-headings: 'Roboto Flex', 'Helvetica Neue', 'Arial', sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;

  /* Type scale */
  --text-h1: 27px;
  --leading-h1: 33px;
  --text-h2: 1.5rem;
  --text-h3: 1.17rem;
  --text-h4: 1rem;
  --text-body: 16px;
  --leading-body: 22px;
  --text-p: 15px;
  --leading-p: 21px;
  --text-a: 16px;
  --leading-a: 1;

  /* Shape */
  --radius-1: 16px;
  --radius-2: 99px;
  --radius-3: 10px;
  --radius-4: 50%;
  --radius-5: 22.5px;
  --radius-6: 25px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 376px;
  --breakpoint-2: 416px;
  --breakpoint-3: 500px;
  --breakpoint-4: 600px;
  --breakpoint-5: 768px;
  --breakpoint-6: 801px;
  --breakpoint-7: 949px;
  --breakpoint-8: 960px;
  --max-width-1: 960px;
  --max-width-2: 435px;
  --max-width-3: 300px;
}

{
    "site": "metro.co.uk",
    "source": "https://sitestyleguide.com/metro.co.uk",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Off White",
            "hex": "#EAEAEA",
            "rgb": [
                234,
                234,
                234
            ]
        },
        {
            "name": "Charcoal",
            "hex": "#262626",
            "rgb": [
                38,
                38,
                38
            ]
        },
        {
            "name": "Crimson",
            "hex": "#FF0044",
            "rgb": [
                255,
                0,
                68
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#FB257C",
            "rgb": [
                251,
                37,
                124
            ]
        },
        {
            "name": "Medium Violet Red",
            "hex": "#C6146A",
            "rgb": [
                198,
                20,
                106
            ]
        },
        {
            "name": "Burly Wood",
            "hex": "#F6C286",
            "rgb": [
                246,
                194,
                134
            ]
        },
        {
            "name": "Medium Aqua Marine",
            "hex": "#10C4A3",
            "rgb": [
                16,
                196,
                163
            ]
        },
        {
            "name": "Blue",
            "hex": "#0032F5",
            "rgb": [
                0,
                50,
                245
            ]
        },
        {
            "name": "Dodger Blue",
            "hex": "#1888FC",
            "rgb": [
                24,
                136,
                252
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#00A768",
            "rgb": [
                0,
                167,
                104
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#006EDF",
            "rgb": [
                0,
                110,
                223
            ]
        },
        {
            "name": "Medium Slate Blue",
            "hex": "#5259FF",
            "rgb": [
                82,
                89,
                255
            ]
        },
        {
            "name": "Dark Turquoise",
            "hex": "#0CBCD0",
            "rgb": [
                12,
                188,
                208
            ]
        }
    ],
    "fonts": [
        {
            "name": "Roboto Flex",
            "stack": "Roboto Flex, Helvetica Neue, Arial, sans-serif",
            "weights": [
                100,
                400,
                700,
                900
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Roboto",
            "stack": "Roboto, Helvetica Neue, Arial, sans-serif",
            "weights": [
                100,
                300,
                400,
                500,
                700,
                900
            ],
            "source": "Google Fonts"
        }
    ]
}

Other websites using Roboto Flex as their main typeface

Univision

univision.com · set in Roboto Flex
Save

Websites whose lead colour is closest to Metro’s

Gymglish

gymglish.com · 5 days ago
Save
RedLight

redlight.dev · 6 days ago
Save
Bustle

bustle.com · 4 days ago
Save
Refinery29

refinery29.com · 4 days ago
Save

Captured from metro.co.uk on 21 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Metro; this guide describes the public website for reference.

Metrostyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Charcoal

Colours

Crimson

Deep Pink

Medium Violet Red

Burly Wood

Medium Aqua Marine

Blue

Dodger Blue

Medium Sea Green

Royal Blue

Medium Slate Blue

Dark Turquoise

Gradients

Roboto Flex

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run metro.co.uk?

Also set in Roboto Flex

Univision

Similar colours

Gymglish

RedLight

Bustle

Refinery29

Title &
description