livejournal.com
livejournal.com · set in ProximaNova
SaveUnofficial A style guide made by SiteStyleGuide from metacritic.com’s public web pages. Not affiliated with or endorsed by Metacritic. The real site is metacritic.com ↗
Unofficial style guide
Metacriticstyle guide
Metacritic’s website (metacritic.com) uses ProximaNova for its headings and body text. Its palette is led by Orange (#FFBD3F), Medium Sea Green (#00CE7A) and Deep Coral (#FF6B73), with #262626 text on #FFFFFF. Captured from the live site on 24 October 2026.
- Website
- metacritic.com
- Typefaces
- ProximaNova, Proxima Nova
- Palette
- 4 neutrals, 9 colours, 3 gradients
- Captured
- 24 Oct 2026 · added by @sitestyleguide
https://www.metacritic.com/
Screenshot
metacritic.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Movie Reviews, TV Reviews, Game Reviews, and Music Reviews - Metacritic
- ▲ 71 / 60 characters
- Meta description
- Metacritic aggregates music, game, tv, and movie reviews from the leading critics. Only Metacritic.com uses METASCORES, which let you know at a glance how each item was reviewed.
- ▲ 178 / 160 characters
- og:title
- Movie Reviews, TV Reviews, Game Reviews, and Music Reviews - Metacritic
- og:description
- Metacritic aggregates music, game, tv, and movie reviews from the leading critics. Only Metacritic.com uses METASCORES, which let you know at a glance how each item was reviewed.
- Language
- en
In search results
Metacritichttps://www.metacritic.com/
Movie Reviews, TV Reviews, Game Reviews, and Music Reviews - …
Metacritic aggregates music, game, tv, and movie reviews from the leading critics. Only Metacritic.com uses METASCORES, which let you know at a glance how each i…
When shared
No og:image, so no picture
metacritic.com
Movie Reviews, TV Reviews, Game Reviews, and Music Reviews - Metacritic
Metacritic aggregates music, game, tv, and movie reviews from the leading critics. Only Metacritic.com uses M…
Logo & favicons
Found as: SVG in the header. SVG, 176 × 40.
Logo
On white
On black
On Orange
Favicons
2 found-
-
SVG
icon
Movie Reviews, TV Reviews, Game Reviews, and Music Reviews - Metacritic
Light browser tab
Movie Reviews, TV Reviews, Game Reviews, and Music Reviews - Metacritic
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 (#262626) 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%
- Light Charcoal 17.4%
- Deep Charcoal 14.6%
- Black 13.7%
- Orange 3.7%
- Medium Sea Green 1.6%
- Deep Coral 1.6%
- Indian Red 1.4%
- Yellow 1.4%
- Light Coral 1.4%
- Sandy Brown 1.4%
- Dodger Blue 1.1%
- Moccasin 0.8%
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
- 15.13:1 AAA
- On white
- —
Background, text, graphic · .fandom-ad-sticky-container.sticky-placement-bottom .fandom-ad-wrapper .button-c, body
-
Light Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 75
- On text
- 1.46:1 Fail
- On white
- 10.37:1 AAA
Background, text, border · .global-header-menu :is(.global-header-menu__item--active,.global-header-menu__i, .c-site-header-navigation-list_title
-
Deep Charcoal
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 85
- On text
- —
- On white
- 15.13:1 AAA
Text, background, border · html, .c-section-about__title[data-v-c9979f96]
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.39:1 Fail
- On white
- 21.00:1 AAA
Background, text, graphic · .fandom-ad-sticky-container.sticky-placement-bottom .fandom-ad-wrapper .button-c, .c-search-suggestion__title[data-v-e9704d56]
Colours
Brand colours and accents, most used first-
Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 26 75 0
- On text
- 9.08:1 AAA
- On white
- 1.67:1 Fail
Background, text · .bg-\[\#ffbd3f\], .c-errorHeader__menuLink[data-v-1c088163]:hover
-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 0 41 19
- On text
- 7.29:1 AAA
- On white
- 2.08:1 Fail
Background · .bg-\[\#00ce7a\], --color-bg-positive-primary-default
-
Deep Coral
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 58 55 0
- On text
- 5.48:1 AA
- On white
- 2.76:1 Fail
Background · .bg-\[\#ff6b73\], --color-bg-negative-primary-default
-
Indian Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 68 60 1
- On text
- 4.72:1 AA
- On white
- 3.21:1 AA large
Background · .mt-bg-gradient, .before\:mt-bg-gradient:before
-
Yellow
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 2 0 90 0
- On text
- 13.97:1 AAA
- On white
- 1.08:1 Fail
Background · .mt-bg-gradient, .before\:mt-bg-gradient:before
-
Light Coral
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 47 48 1
- On text
- 6.40:1 AA
- On white
- 2.37:1 Fail
Background · .mt-bg-gradient, .before\:mt-bg-gradient:before
-
Sandy Brown
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 29 64 5
- On text
- 7.82:1 AAA
- On white
- 1.93:1 Fail
Background · .mt-bg-gradient, .before\:mt-bg-gradient:before
-
Dodger Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 82 39 0 2
- On text
- 5.14:1 AA
- On white
- 2.94:1 Fail
Border · --color-bg-informative-primary-default, --color-stroke-focus
-
Moccasin
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 10 27 0
- On text
- 12.45:1 AAA
- On white
- 1.22:1 Fail
Used · --color-bg-brand-primary-disabled, --color-bg-neutral-secondary-default
Gradients
-
linear-gradient(initial)
-
linear-gradient(47.08deg,#fbff3a80 9.07%,#fbff3a00 43.49%),linear-gradient(217.87deg,#fd5166 20.19%,#f2b55680 50%),linear-gradient(321.45deg,#00ce7acc 13.6%,#f3ac5866 50%),linear-gradient(50.42deg,#faff1a 20.95%,#f3ac5800 64.15%),linear-gradient(#fc8683,#f3ac58 50%)
-
linear-gradient(90deg,#fff0 0,#fff 28px 100%)
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.
ProximaNova
Aa
200
Aa
800
ProximaNova
Self-hosted · weights 200, 300, 400, 600, 700, 800 · body, buttons, headings · shown in a stand-in if you don’t have it
Aa
300
Aa
800
Proxima Nova
Self-hosted · weights 300, 400, 600, 700, 800 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
/ initial
Metacritic
Heading 2
/ initial
Movie Reviews, TV Reviews, Game Reviews, and Mu…
Heading 3
1.25rem · 20 px / initial
Movie Reviews, TV Reviews, Game Reviews, and Mu…
Heading 4
1.125rem · 18 px / initial
Movie Reviews, TV Reviews, Game Reviews, and Mu…
Heading 5
1rem · 16 px / initial
Movie Reviews, TV Reviews, Game Reviews, and Mu…
Heading 6
1rem · 16 px / initial
Movie Reviews, TV Reviews, Game Reviews, and Mu…
Body
—
ProximaNova
Metacritic aggregates music, game, tv, and movie reviews from the leading critics. Only Metacritic.com uses METASCORES, which let you know …
Paragraph
1rem · 16 px / calc(.25rem*7)
Metacritic aggregates music, game, tv, and movie reviews from the leading critics. Only Metacritic.com uses METASCORES, which let you know …
Button
—
ProximaNova
Get started
Sizes in use
Most common across the site- 28pxline calc(.25rem*8) · 3 rules
- 24pxline 2rem · 5 rules
- 20pxline calc(.25rem*8.5) · 4 rules
- 18pxline initial · 4 rules
- 16pxline initial · 20 rules
- 14pxline initial · 13 rules
- 12pxline 1rem · 17 rules
- 8pxline calc(.25rem*3) · 2 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
.fandom-ad-sticky-container.sticky-placement-bottom .fandom-ad-wrapper .button-c · #000000 · radius 50%
Corner radius
- .25rem · 13×
- 2147483647px · 5×
- 62.4375rem · 4×
- .5rem · 3×
- 2px · 2×
Shadows
- 0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000
- 0 20px 24px -12px #00000029
- 0 1rem 2rem #0003
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)
1920 px
1536 px
1263 px
960 px
768 px
320 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 71 characters. Google usually cuts titles near 60, so the end may not show in results.
- ▲ CheckThe description is 178 characters. Search results usually show about 160.
- ▲ CheckThere is no og:image, so links shared on social media show no picture.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Metacritic use?
- Metacritic’s website uses two typefaces: ProximaNova (headings and body text), self-hosted; Proxima Nova, self-hosted.
- What are Metacritic’s brand colours?
- The main colours on metacritic.com are Orange (#FFBD3F), Medium Sea Green (#00CE7A), Deep Coral (#FF6B73), Indian Red (#FD5166), Yellow (#FAFF1A) and Light Coral (#FC8683).
- What colour is Metacritic’s text and background?
- Body text is #262626 on a #FFFFFF background.
- Where is Metacritic’s logo from?
- The logo shown in this guide was found on metacritic.com’s homepage. For official logo files and usage rules, check Metacritic’s own brand or press page.
- Is this Metacritic’s official style guide?
- No. SiteStyleGuide made it from metacritic.com’s public web pages on 24 October 2026, and isn’t affiliated with Metacritic. 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
metacritic-com-tokens.css
/* metacritic.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/metacritic.com) */
:root {
/* Colours */
--text: #262626;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-light-charcoal: #404040;
--colour-deep-charcoal: #262626;
--colour-black: #000000;
--colour-orange: #FFBD3F;
--colour-medium-sea-green: #00CE7A;
--colour-deep-coral: #FF6B73;
--colour-indian-red: #FD5166;
--colour-yellow: #FAFF1A;
--colour-light-coral: #FC8683;
--colour-sandy-brown: #F3AC58;
--colour-dodger-blue: #2E9AFB;
--colour-moccasin: #FFE6B9;
--gradient-1: linear-gradient(initial);
--gradient-2: linear-gradient(47.08deg,#fbff3a80 9.07%,#fbff3a00 43.49%),linear-gradient(217.87deg,#fd5166 20.19%,#f2b55680 50%),linear-gradient(321.45deg,#00ce7acc 13.6%,#f3ac5866 50%),linear-gradient(50.42deg,#faff1a 20.95%,#f3ac5800 64.15%),linear-gradient(#fc8683,#f3ac58 50%);
--gradient-3: linear-gradient(90deg,#fff0 0,#fff 28px 100%);
/* Typefaces */
--font-body: 'ProximaNova', 'Helvetica', 'Arial', ui-sans-serif, system-ui, sans-serif;
--font-buttons: 'ProximaNova', 'Helvetica', 'Arial', ui-sans-serif, system-ui, sans-serif;
--font-headings: 'ProximaNova', 'Helvetica', 'Arial', ui-sans-serif, system-ui, sans-serif;
--font-other: 'Proxima Nova', sans-serif;
/* Type scale */
--text-h3: 1.25rem;
--leading-h3: initial;
--text-h4: 1.125rem;
--leading-h4: initial;
--text-h5: 1rem;
--leading-h5: initial;
--text-h6: 1rem;
--leading-h6: initial;
--text-p: 1rem;
/* Shape */
--radius-1: .25rem;
--radius-2: 2147483647px;
--radius-3: 62.4375rem;
--radius-4: .5rem;
--radius-5: 2px;
}
{
"site": "metacritic.com",
"source": "https://sitestyleguide.com/metacritic.com",
"text": "#262626",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Light Charcoal",
"hex": "#404040",
"rgb": [
64,
64,
64
]
},
{
"name": "Deep Charcoal",
"hex": "#262626",
"rgb": [
38,
38,
38
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Orange",
"hex": "#FFBD3F",
"rgb": [
255,
189,
63
]
},
{
"name": "Medium Sea Green",
"hex": "#00CE7A",
"rgb": [
0,
206,
122
]
},
{
"name": "Deep Coral",
"hex": "#FF6B73",
"rgb": [
255,
107,
115
]
},
{
"name": "Indian Red",
"hex": "#FD5166",
"rgb": [
253,
81,
102
]
},
{
"name": "Yellow",
"hex": "#FAFF1A",
"rgb": [
250,
255,
26
]
},
{
"name": "Light Coral",
"hex": "#FC8683",
"rgb": [
252,
134,
131
]
},
{
"name": "Sandy Brown",
"hex": "#F3AC58",
"rgb": [
243,
172,
88
]
},
{
"name": "Dodger Blue",
"hex": "#2E9AFB",
"rgb": [
46,
154,
251
]
},
{
"name": "Moccasin",
"hex": "#FFE6B9",
"rgb": [
255,
230,
185
]
}
],
"fonts": [
{
"name": "ProximaNova",
"stack": "\"ProximaNova\", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif",
"weights": [
200,
300,
400,
600,
700,
800
],
"source": "Self-hosted"
},
{
"name": "Proxima Nova",
"stack": "Proxima Nova, sans-serif",
"weights": [
300,
400,
600,
700,
800
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run metacritic.com?
Add the badge to your siteLink 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/metacritic.com" title="Metacritic style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in ProximaNova
Other websites using ProximaNova as their main typefaceSimilar colours
Websites whose lead colour is closest to Metacritic’s
Tamino Design
taminodesign.com · 5 days ago
Save
ViV MGMT
vivmgmt.com · 2 days ago
Save
Tasting Table
tastingtable.com · 5 days ago
Save
cia.gov
cia.gov · 3 days ago
Save
Captured from metacritic.com on 24 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Metacritic; this guide describes the public website for reference.