Untappd
untappd.com · set in SFMono-Regular
SaveUnofficial A style guide made by SiteStyleGuide from nfl.com’s public web pages. Not affiliated with or endorsed by NFL International Homepage. The real site is nfl.com ↗
Unofficial style guide
NFL International Homepagestyle guide
NFL International Homepage’s website (nfl.com) uses SFMono-Regular for its headings and body text. Its palette is led by Royal Blue (#004FFF), Slate Grey (#626C80) and Light Fire Brick (#D50A0A), with #172029 text on #FFFFFF. Captured from the live site on 27 October 2026.
- Website
- nfl.com
- Typefaces
- SFMono-Regular, fontDisplay, fontSans
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 27 Oct 2026 · added by @sitestyleguide
https://www.nfl.com/international
Screenshot
nfl.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
- NFL International Homepage | NFL.com Official Site of the National Football League
- ▲ 82 / 60 characters
- Meta description
- The official home for the NFL's International fans.
- ● 51 / 160 characters
- og:title
- NFL International Homepage | NFL.com Official Site of the National Football League
- og:description
- The official home for the NFL's International fans.
- Language
- en
In search results
NFL International Homepagehttps://www.nfl.com/international
NFL International Homepage | NFL.com Official Site of the Nat…
The official home for the NFL's International fans.
When shared
nfl.com
NFL International Homepage | NFL.com Official Site of the National Football League
The official home for the NFL's International fans.
Logo & favicons
Found as: image in the header. SVG, 22 × 10.
Logo
On white
On black
On Royal Blue
Favicons
1 found-
2000 px · PNG
icon
NFL International Homepage | NFL.com Official Site of the National Football League
Light browser tab
NFL International Homepage | NFL.com Official Site of the National Football League
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 (#172029) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 24.4%
- Cool Near Black 15.4%
- Black 10.4%
- Cool Off White 10.4%
- Royal Blue 9.6%
- Slate Grey 7.5%
- Light Fire Brick 3.3%
- Deep Red 2.5%
- Medium Sea Green 2.3%
- Sea Green 2.3%
- Midnight Blue 2.3%
- Medium Violet Red 2.3%
- Light Red 1.9%
- Fire Brick 1.9%
- Deep Fire Brick 1.8%
- Blue 1.5%
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
- 16.47:1 AAA
- On white
- —
Background, text, graphic · --tw-mask-linear, --tw-mask-radial
-
Cool Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 44 22 0 84
- On text
- —
- On white
- 16.47:1 AAA
Text, background, border · .story-part-rich-text-editor-wrapper h1, .story-part-rich-text-editor-wrapper h2
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 100
- On text
- 1.28:1 Fail
- On white
- 21.00:1 AAA
Text, border, background · .\!bg-black, .bg-black
-
Cool Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 7 3 0 12
- On text
- 11.65:1 AAA
- On white
- 1.41:1 Fail
Border, background, graphic · .story-part-rich-text-editor-wrapper hr, .placeholder
Colours
Brand colours and accents, most used first-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 69 0 0
- On text
- 2.79:1 Fail
- On white
- 5.89:1 AA
Background, text, border · .bg-plus-primary, .group-data-\[accent-variant\=\'plus\'\]\/card\:bg-plus-primary:is(:where(.group
-
Slate Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 23 16 0 50
- On text
- 3.12:1 AA large
- On white
- 5.28:1 AA
Text, background, border · .bg-ls-600, .disabled\:bg-ls-600:disabled
-
Light Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 95 95 16
- On text
- 3.04:1 AA large
- On white
- 5.42:1 AA
Background, border, text · .bg-afc-500, .bg-nfl-secondary
-
Deep Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 92 92 6
- On text
- 3.77:1 AA large
- On white
- 4.37:1 AA large
Background, border, text · .bg-error-500, .text-error-500
-
Medium Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 97 0 47 28
- On text
- 6.30:1 AA
- On white
- 2.61:1 Fail
Text, background, graphic · .bg-success-500, .text-success-500
-
Sea Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 91 0 44 55
- On text
- 2.74:1 Fail
- On white
- 6.01:1 AA
Border, background, text · .bg-success-750, .text-success-750
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 99 51 0 59
- On text
- 1.32:1 Fail
- On white
- 12.51:1 AAA
Background, text · .bg-nfc-500, .bg-nfl-primary
-
Medium Violet Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 89 39 15
- On text
- 3.49:1 AA large
- On white
- 4.72:1 AA
Border, graphic · --color-ls-accessibility-focused, :is(button,a,.markdown [role=link],.markdown a):focus-visible
-
Light Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 85 97 3
- On text
- 4.09:1 AA large
- On white
- 4.03:1 AA large
Graphic, background, text · .bg-live-500, .text-live-500
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 92 92 25
- On text
- 2.61:1 Fail
- On white
- 6.32:1 AA
Background, text, graphic · .bg-error-750, .text-error-750
-
Deep Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 95 95 33
- On text
- 2.15:1 Fail
- On white
- 7.64:1 AAA
Background, text · .bg-afc-650, .text-afc-650
-
Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 69 0 20
- On text
- 2.03:1 Fail
- On white
- 8.13:1 AAA
Text · .story-part-table-v2-wrapper a, .text-plus-650
Gradients
-
linear-gradient(initial)
-
linear-gradient(90deg,#fff0,#ffffffe6 .5%,#fff 1.5%,#ffffffe6 2.5%,#fff0 3%)
-
radial-gradient(70% 75px at top,#c1ff6b99 0,#c1ff6b00 100%)
Dark mode
Switched on by the site-
Cool Light Grey
#C6CBD7
-
Cool Charcoal
#393E4A
-
White
#FFFFFF
-
Cool Charcoal
#272731
-
Cool Dark Grey
#545A68
-
Cornflower Blue
#6695FF
-
Deep Pink
#FF0090
-
Cool Near Black
#172029
-
Cool Off White
#D2DAE1
-
Light Sky Blue
#6CB8FF
-
Cool Near Black
#13141D
-
Black
#000000
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.
SFMono-Regular
Aa
400
SFMono-Regular
System font, or not loaded on this page · shown in a stand-in if you don’t have it
Aa
700
fontDisplay
Self-hosted · weights 700 · shown in a stand-in if you don’t have it
Aa
400
Aa
700
fontSans
Self-hosted · weights 400, 700 · shown in a stand-in if you don’t have it
Aa
400
Aa
700
fontStats
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
Heading 1
1.25rem · 20 px / calc(100% + .25rem)
weight 700 · uppercase
NFL International Homepage
Heading 2
1.25rem · 20 px / calc(100% + .25rem)
weight 700
NFL International Homepage | NFL.com Official S…
Heading 3
1rem · 16 px / calc(100% + .25rem)
weight 700
NFL International Homepage | NFL.com Official S…
Heading 4
.875rem · 14 px / calc(100% + .25rem)
weight 700
NFL International Homepage | NFL.com Official S…
Heading 5
.75rem · 12 px / calc(100% + .25rem)
weight 700
NFL International Homepage | NFL.com Official S…
Heading 6
.75rem · 12 px / calc(100% + .25rem)
weight 700
NFL International Homepage | NFL.com Official S…
Paragraph
.875rem · 14 px / calc(100% + .25rem)
The official home for the NFL's International fans.
Small
80%
The official home for the NFL's International fans.
Sizes in use
Most common across the site- 52pxline 1 · 2 rules
- 32pxline calc(100% + .25rem) · 2 rules
- 24pxline calc(100% + .25rem) · 3 rules
- 20pxline calc(100% + .25rem) · 8 rules
- 16pxline calc(100% + .25rem) · 5 rules
- 14pxline calc(100% + .25rem) · 12 rules
- 12pxline calc(100% + .25rem) · 15 rules
- 10pxline calc(100% + .25rem) · 7 rules
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
- .25rem · 11×
- .5rem · 8×
- 3.40282e+38px · 6×
- .125rem · 3×
- 1rem · 2×
- 1.5rem · 2×
Shadows
- 0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
640
760
768
1024
1280
1296
1536
On a scale of 0 to 1536 px.
Content widths (max-width)
1296 px
824 px
768 px
640 px
459 px
360 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 82 characters. Google usually cuts titles near 60, so the end may not show in results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does NFL International Homepage use?
- NFL International Homepage’s website uses four typefaces: SFMono-Regular (headings and body text), a system font; fontDisplay, self-hosted; fontSans, self-hosted; fontStats, self-hosted.
- What are NFL International Homepage’s brand colours?
- The main colours on nfl.com are Royal Blue (#004FFF), Slate Grey (#626C80), Light Fire Brick (#D50A0A), Deep Red (#F01313), Medium Sea Green (#05B862) and Sea Green (#0A7240).
- What colour is NFL International Homepage’s text and background?
- Body text is #172029 on a #FFFFFF background.
- Where is NFL International Homepage’s logo from?
- The logo shown in this guide was found on nfl.com’s homepage. For official logo files and usage rules, check NFL International Homepage’s own brand or press page.
- Is this NFL International Homepage’s official style guide?
- No. SiteStyleGuide made it from nfl.com’s public web pages on 27 October 2026, and isn’t affiliated with NFL International Homepage. 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
nfl-com-tokens.css
/* nfl.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/nfl.com) */
:root {
/* Colours */
--text: #172029;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-cool-near-black: #172029;
--colour-black: #000000;
--colour-cool-off-white: #D2DAE1;
--colour-royal-blue: #004FFF;
--colour-slate-grey: #626C80;
--colour-light-fire-brick: #D50A0A;
--colour-deep-red: #F01313;
--colour-medium-sea-green: #05B862;
--colour-sea-green: #0A7240;
--colour-midnight-blue: #013369;
--colour-medium-violet-red: #DA1884;
--colour-light-red: #F72407;
--colour-fire-brick: #C01010;
--colour-deep-fire-brick: #AA0808;
--colour-blue: #003FCC;
--gradient-1: linear-gradient(initial);
--gradient-2: linear-gradient(90deg,#fff0,#ffffffe6 .5%,#fff 1.5%,#ffffffe6 2.5%,#fff0 3%);
--gradient-3: radial-gradient(70% 75px at top,#c1ff6b99 0,#c1ff6b00 100%);
/* Typefaces */
--font-other: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono';
/* Type scale */
--text-h1: 1.25rem;
--leading-h1: calc(100% + .25rem);
--text-h2: 1.25rem;
--leading-h2: calc(100% + .25rem);
--text-h3: 1rem;
--leading-h3: calc(100% + .25rem);
--text-h4: .875rem;
--leading-h4: calc(100% + .25rem);
--text-h5: .75rem;
--leading-h5: calc(100% + .25rem);
--text-h6: .75rem;
--leading-h6: calc(100% + .25rem);
--text-p: .875rem;
--leading-p: calc(100% + .25rem);
--text-small: 80%;
/* Shape */
--radius-1: .25rem;
--radius-2: .5rem;
--radius-3: 3.40282e+38px;
--radius-4: .125rem;
--radius-5: 1rem;
--radius-6: 1.5rem;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 640px;
--breakpoint-2: 760px;
--breakpoint-3: 768px;
--breakpoint-4: 1024px;
--breakpoint-5: 1280px;
--breakpoint-6: 1296px;
--breakpoint-7: 1536px;
--max-width-1: 1296px;
--max-width-2: 824px;
--max-width-3: 768px;
--max-width-4: 640px;
--max-width-5: 459px;
--max-width-6: 360px;
}
{
"site": "nfl.com",
"source": "https://sitestyleguide.com/nfl.com",
"text": "#172029",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Cool Near Black",
"hex": "#172029",
"rgb": [
23,
32,
41
]
},
{
"name": "Black",
"hex": "#000000",
"rgb": [
0,
0,
0
]
},
{
"name": "Cool Off White",
"hex": "#D2DAE1",
"rgb": [
210,
218,
225
]
},
{
"name": "Royal Blue",
"hex": "#004FFF",
"rgb": [
0,
79,
255
]
},
{
"name": "Slate Grey",
"hex": "#626C80",
"rgb": [
98,
108,
128
]
},
{
"name": "Light Fire Brick",
"hex": "#D50A0A",
"rgb": [
213,
10,
10
]
},
{
"name": "Deep Red",
"hex": "#F01313",
"rgb": [
240,
19,
19
]
},
{
"name": "Medium Sea Green",
"hex": "#05B862",
"rgb": [
5,
184,
98
]
},
{
"name": "Sea Green",
"hex": "#0A7240",
"rgb": [
10,
114,
64
]
},
{
"name": "Midnight Blue",
"hex": "#013369",
"rgb": [
1,
51,
105
]
},
{
"name": "Medium Violet Red",
"hex": "#DA1884",
"rgb": [
218,
24,
132
]
},
{
"name": "Light Red",
"hex": "#F72407",
"rgb": [
247,
36,
7
]
},
{
"name": "Fire Brick",
"hex": "#C01010",
"rgb": [
192,
16,
16
]
},
{
"name": "Deep Fire Brick",
"hex": "#AA0808",
"rgb": [
170,
8,
8
]
},
{
"name": "Blue",
"hex": "#003FCC",
"rgb": [
0,
63,
204
]
}
],
"fonts": [
{
"name": "SFMono-Regular",
"stack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
"weights": [],
"source": "System font, or not loaded on this page"
},
{
"name": "fontDisplay",
"stack": "fontDisplay, fontDisplay Fallback",
"weights": [
700
],
"source": "Self-hosted"
},
{
"name": "fontSans",
"stack": "fontSans, fontSans Fallback",
"weights": [
400,
700
],
"source": "Self-hosted"
},
{
"name": "fontStats",
"stack": "fontStats, fontStats Fallback",
"weights": [
400,
500,
700
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run nfl.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/nfl.com" title="NFL International Homepage 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 SFMono-Regular
Other websites using SFMono-Regular as their main typeface
Similar colours
Websites whose lead colour is closest to NFL International Homepage’s
Interia
interia.pl · 20 hours ago
Save
WordPress.com
wp.me · 19 hours ago
Save
WordPress.org
wordpress.org · 1 day ago
Save
CTV News
ctvnews.ca · 5 days ago
Save
Captured from nfl.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by NFL International Homepage; this guide describes the public website for reference.