What font does Tate use?

Tate’s website uses one typeface: Tate regular (headings and body text), self-hosted.

What are Tate’s brand colours?

The main colours on tate.org.uk are Steel Blue (#0072CE), Light Red (#D64103), Royal Blue (#00569B), Sea Green (#228848), Green (#007F00) and Corn Silk (#FAF6DA).

What colour is Tate’s text and background?

Body text is #1A1A1A on a #FFFFFF background.

Where is Tate’s logo from?

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

Is this Tate’s official style guide?

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

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

Unofficial style guide

Tatestyle guide

Tate’s website (tate.org.uk) uses Tate regular for its headings and body text. Its palette is led by Steel Blue (#0072CE), Light Red (#D64103) and Royal Blue (#00569B), with #1A1A1A text on #FFFFFF. Captured from the live site on 26 October 2026.

Website: tate.org.uk
Typefaces: Tate regular
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the tate.org.uk homepage on a desktop screen — Screenshot of tate.org.uk on a 1440 px desktop screen, 26 Oct 2026.

Screenshot of the tate.org.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: Tate; ● 4 / 60 characters
Meta description: Tate is a family of art galleries in London, Liverpool and Cornwall, known as Tate Modern, Tate Britain, Tate St Ives and Tate Liverpool + RIBA North. Tate art museum houses the UK's collection of British art from 1500 and of international modern art; ▲ 250 / 160 characters
Site name: Tate
og:title: Tate
og:description: Tate is a family of art galleries in London, Liverpool and Cornwall, known as Tate Modern, Tate Britain, Tate St Ives and Tate Liverpool + RIBA North. Tate art museum houses the UK's collection of British art from 1500 and of international modern art
Language: en-GB

In search results

Tatehttps://www.tate.org.uk/

Tate

Tate is a family of art galleries in London, Liverpool and Cornwall, known as Tate Modern, Tate Britain, Tate St Ives and Tate Liverpool + RIBA North. Tate art m…

When shared

tate.org.uk

Tate

Tate is a family of art galleries in London, Liverpool and Cornwall, known as Tate Modern, Tate Britain, Tate…

Logo & favicons

Found as: image in the header. SVG, 90 × 35.

Logo

On white

On black

On Steel Blue

Favicons

1 found

48 px · ICO shortcut icon

Tate

Light browser tab

Tate

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

Colour

Balance

How much each colour is used

White 45%
Near Black 18.4%
Steel Blue 10.3%
Grey 8.4%
Off White 7.9%
Light Red 2%
Royal Blue 1.9%
Sea Green 1.4%
Green 1%
Corn Silk 0.7%
Pale Turquoise 0.6%
Deep Red 0.5%
Orange 0.5%
Sienna 0.5%
Yellow 0.4%
Fire Brick 0.4%

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

On white
—

Text, background, border · body, .btn--type__dark
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 90

On text
—

On white
17.40:1 AAA

Text, background, border · .nav--handle__close, .card__type--promo.card__type--promo__kids .card__inner .btn
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 54

On text
3.83:1 AA large

On white
4.54:1 AA

Text, border, background · #nav a.active, .card--cluster .card__description
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 13

On text
12.81:1 AAA

On white
1.36:1 Fail

Border, background, graphic · .article--content-template nav>ul.list--content li ul li header, #nav .site-menu__item--handheld a

Colours

Brand colours and accents, most used first

Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 45 0 19

On text
3.56:1 AA large

On white
4.89:1 AA

Background, text, border · .btn.btn--selected, .btn--submit
Light Red

HEX

RGB

HSL

OKLCH

CMYK
0 70 99 16

On text
3.83:1 AA large

On white
4.55:1 AA

Background, text, border · .btn--type__primary, .patron-step__title--error:before
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 45 0 39

On text
2.32:1 Fail

On white
7.49:1 AAA

Text, background, border · .btn--submit:hover, #tate-basket .btn:active .btn__badge
Sea Green

HEX

RGB

HSL

OKLCH

CMYK
75 0 47 47

On text
3.88:1 AA large

On white
4.48:1 AA large

Background, text, border · .btn__rounded--display:before, .card-tags span.tag-status_extended
Green

HEX

RGB

HSL

OKLCH

CMYK
100 0 100 50

On text
3.34:1 AA large

On white
5.20:1 AA

Text, background, border · .patron-step__title:before, .patron-step--complete:before
Corn Silk

HEX

RGB

HSL

OKLCH

CMYK
0 2 13 2

On text
15.96:1 AAA

On white
1.09:1 Fail

Background · .subhub-gift-back, .subhub-gift-back .card--artwork .card-content
Pale Turquoise

HEX

RGB

HSL

OKLCH

CMYK
42 4 0 9

On text
11.27:1 AAA

On white
1.54:1 Fail

Background · .btn--type__members, .header-nav__item.header-nav__join a
Deep Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 11

On text
3.54:1 AA large

On white
4.92:1 AA

Background, text, border · .notification-banner--color__red, .card--preview-content .card__inner:before
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 29 80 0

On text
9.87:1 AAA

On white
1.76:1 Fail

Background, border · .card-tags span.tag-status_postponed, .banner__status-alert.status-alert--postponed:before
Sienna

HEX

RGB

HSL

OKLCH

CMYK
0 70 99 36

On text
2.52:1 Fail

On white
6.92:1 AA

Background · .notification-banner--type__warning .btn, .btn--type__primary:hover
Yellow

HEX

RGB

HSL

OKLCH

CMYK
0 4 100 0

On text
15.18:1 AAA

On white
1.15:1 Fail

Background, border · .card-tags span.tag-status_new-dates, .banner__status-alert.status-alert--new-dates:before
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 84 81 20

On text
3.13:1 AA large

On white
5.56:1 AA

Background, text · .btn--social__pinterest, .subhub-submit-form .form-item__alert

Gradients

linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.75) 20px)
linear-gradient(270deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.75) 20px)
linear-gradient(0deg,rgba(0,0,0,.4),rgba(0,0,0,.4)),linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5))

Dark mode

Switched on by the site

White

#FFFFFF
Near Black

#1A1A1A
Light Grey

#AAAAAA
Charcoal

#313131
Grey

#767676
Pale Turquoise

#85DEE7
Black

#000000
Pale Turquoise

#B0EAEF

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.

Tate regular

Aa 300 Aa 700

Tate regular

Self-hosted · weights 300, 400, 700 · body, headings, buttons · 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 / 110% weight 400 · none · Tate regular

Tate

Heading 2 46px / 55px weight 400 · none · Tate regular

Tate

Heading 3 28px / 36px weight 400 · none · Tate regular

Tate

Heading 4 22px / 28px weight 400 · none · Tate regular

Tate

Heading 5 1.25rem · 20 px weight 400 · none · Tate regular

Tate

Heading 6 — weight 400 · none · Tate regular

Tate

Body 16px / 1.2em Tate regular

Tate is a family of art galleries in London, Liverpool and Cornwall, known as Tate Modern, Tate Britain, Tate St Ives and Tate Liverpool + …

Paragraph 16px / 24px weight 300

Tate is a family of art galleries in London, Liverpool and Cornwall, known as Tate Modern, Tate Britain, Tate St Ives and Tate Liverpool + …

Small 80%

Tate is a family of art galleries in London, Liverpool and Cornwall, known as Tate Modern, Tate Britain, Tate St Ives and Tate Liverpool + …

Button 17px / 27px none · Tate regular

Get started

Link 1rem · 16 px / 1.6em weight 400 · uppercase

Sizes in use

Most common across the site

32pxline 1.25 · 14 rules
28pxline 32px · 9 rules
24pxline 1.5rem · 21 rules
20pxline 1.2em · 10 rules
16pxline 1.6em · 39 rules
14pxline 21px · 49 rules
13pxline 1.4 · 11 rules
12pxline 1.2em · 6 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

.btn--type__members · #85DEE7

Corner radius

1rem · 10×
50% · 7×
100% · 6×
8px · 5×
32px · 5×
20px · 5×

Shadows

0 3px 6px hsla(0,0%,39.2%,.08)
0 0 1px 1px #ddd
0 0 32px 48px #fff
-100vw 0 0 0 transparent

Layout

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

Grid

Breakpoints

321

480

760

768

841

1024

1200

1280

On a scale of 0 to 1440 px.

Content widths (max-width)

1200 px

760 px

720 px

672 px

480 px

300 px

Notes

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

Notes

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

Questions

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

Questions

What font does Tate use?: Tate’s website uses one typeface: Tate regular (headings and body text), self-hosted.
What are Tate’s brand colours?: The main colours on tate.org.uk are Steel Blue (#0072CE), Light Red (#D64103), Royal Blue (#00569B), Sea Green (#228848), Green (#007F00) and Corn Silk (#FAF6DA).
What colour is Tate’s text and background?: Body text is #1A1A1A on a #FFFFFF background.
Where is Tate’s logo from?: The logo shown in this guide was found on tate.org.uk’s homepage. For official logo files and usage rules, check Tate’s own brand or press page.
Is this Tate’s official style guide?: No. SiteStyleGuide made it from tate.org.uk’s public web pages on 26 October 2026, and isn’t affiliated with Tate. 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

tate-org-uk-tokens.css

Download

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

/* tate.org.uk design tokens, from SiteStyleGuide (https://sitestyleguide.com/tate.org.uk) */
:root {
  /* Colours */
  --text: #1A1A1A;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #1A1A1A;
  --colour-grey: #767676;
  --colour-off-white: #DDDDDD;
  --colour-steel-blue: #0072CE;
  --colour-light-red: #D64103;
  --colour-royal-blue: #00569B;
  --colour-sea-green: #228848;
  --colour-green: #007F00;
  --colour-corn-silk: #FAF6DA;
  --colour-pale-turquoise: #85DEE7;
  --colour-deep-red: #E30000;
  --colour-orange: #FFB534;
  --colour-sienna: #A43202;
  --colour-yellow: #FFF500;
  --colour-fire-brick: #CB2027;
  --gradient-1: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.75) 20px);
  --gradient-2: linear-gradient(270deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.75) 20px);
  --gradient-3: linear-gradient(0deg,rgba(0,0,0,.4),rgba(0,0,0,.4)),linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5));

  /* Typefaces */
  --font-body: 'Tate regular', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
  --font-headings: 'Tate regular', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
  --font-buttons: 'Tate regular', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;

  /* Type scale */
  --text-h1: 2em;
  --leading-h1: 110%;
  --text-h2: 46px;
  --leading-h2: 55px;
  --text-h3: 28px;
  --leading-h3: 36px;
  --text-h4: 22px;
  --leading-h4: 28px;
  --text-h5: 1.25rem;
  --text-body: 16px;
  --leading-body: 1.2em;
  --text-p: 16px;
  --leading-p: 24px;
  --text-small: 80%;
  --text-button: 17px;
  --leading-button: 27px;
  --text-a: 1rem;
  --leading-a: 1.6em;

  /* Shape */
  --radius-1: 1rem;
  --radius-2: 50%;
  --radius-3: 100%;
  --radius-4: 8px;
  --radius-5: 32px;
  --radius-6: 20px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 321px;
  --breakpoint-2: 480px;
  --breakpoint-3: 760px;
  --breakpoint-4: 768px;
  --breakpoint-5: 841px;
  --breakpoint-6: 1024px;
  --breakpoint-7: 1200px;
  --breakpoint-8: 1280px;
  --max-width-1: 1200px;
  --max-width-2: 760px;
  --max-width-3: 720px;
  --max-width-4: 672px;
  --max-width-5: 480px;
  --max-width-6: 300px;
}

{
    "site": "tate.org.uk",
    "source": "https://sitestyleguide.com/tate.org.uk",
    "text": "#1A1A1A",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1A1A1A",
            "rgb": [
                26,
                26,
                26
            ]
        },
        {
            "name": "Grey",
            "hex": "#767676",
            "rgb": [
                118,
                118,
                118
            ]
        },
        {
            "name": "Off White",
            "hex": "#DDDDDD",
            "rgb": [
                221,
                221,
                221
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#0072CE",
            "rgb": [
                0,
                114,
                206
            ]
        },
        {
            "name": "Light Red",
            "hex": "#D64103",
            "rgb": [
                214,
                65,
                3
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#00569B",
            "rgb": [
                0,
                86,
                155
            ]
        },
        {
            "name": "Sea Green",
            "hex": "#228848",
            "rgb": [
                34,
                136,
                72
            ]
        },
        {
            "name": "Green",
            "hex": "#007F00",
            "rgb": [
                0,
                127,
                0
            ]
        },
        {
            "name": "Corn Silk",
            "hex": "#FAF6DA",
            "rgb": [
                250,
                246,
                218
            ]
        },
        {
            "name": "Pale Turquoise",
            "hex": "#85DEE7",
            "rgb": [
                133,
                222,
                231
            ]
        },
        {
            "name": "Deep Red",
            "hex": "#E30000",
            "rgb": [
                227,
                0,
                0
            ]
        },
        {
            "name": "Orange",
            "hex": "#FFB534",
            "rgb": [
                255,
                181,
                52
            ]
        },
        {
            "name": "Sienna",
            "hex": "#A43202",
            "rgb": [
                164,
                50,
                2
            ]
        },
        {
            "name": "Yellow",
            "hex": "#FFF500",
            "rgb": [
                255,
                245,
                0
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#CB2027",
            "rgb": [
                203,
                32,
                39
            ]
        }
    ],
    "fonts": [
        {
            "name": "Tate regular",
            "stack": "Tate regular, Arial, Helvetica Neue, Helvetica, sans-serif",
            "weights": [
                300,
                400,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Websites whose lead colour is closest to Tate’s

FreshBooks

freshbooks.com · 5 days ago
Save
Disney Home

blip.tv · 3 days ago
Save
cnnic.cn

cnnic.cn · 1 day ago
Save
American Civil Liberties Union

aclu.org · 5 days ago
Save

Captured from tate.org.uk on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Tate; this guide describes the public website for reference.

Tatestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Grey

Off White

Colours

Steel Blue

Light Red

Royal Blue

Sea Green

Green

Corn Silk

Pale Turquoise

Deep Red

Orange

Sienna

Yellow

Fire Brick

Gradients

Dark mode

Tate regular

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run tate.org.uk?

Similar colours

FreshBooks

Disney Home

cnnic.cn

American Civil Liberties Union

Title &
description