What font does Nike.com use?

Nike.com’s website uses three typefaces: VideoJS (headings), self-hosted; Helvetica Now Text (body text), self-hosted; Nike Futura ND, self-hosted.

What are Nike.com’s brand colours?

The main colours on nike.com are Light Slate Grey (#73859F), Deep Pink (#FF009E), Light Pink (#EC3EA7), Tomato (#FF623A), Orange (#FBAD22) and Gold (#FAD81B).

What colour is Nike.com’s text and background?

Body text is #111111 on a #FFFFFF background.

Where is Nike.com’s logo from?

The logo shown in this guide was found on nike.com’s homepage. For official logo files and usage rules, check Nike.com’s own brand or press page.

Is this Nike.com’s official style guide?

No. SiteStyleGuide made it from nike.com’s public web pages on 25 October 2026, and isn’t affiliated with Nike.com. Members can refresh a guide after 90 days to pick up changes.

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

Unofficial style guide

Nike.comstyle guide

Nike.com’s website (nike.com) sets its headings in VideoJS and its body text in Helvetica Now Text. Its palette is led by Light Slate Grey (#73859F), Deep Pink (#FF009E) and Light Pink (#EC3EA7), with #111111 text on #FFFFFF. Captured from the live site on 25 October 2026.

Website: nike.com
Typefaces: VideoJS, Helvetica Now Text, Nike Futura ND
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 25 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the nike.com homepage on a desktop screen — Screenshot of nike.com on a 1440 px desktop screen, 25 Oct 2026.

Screenshot of the nike.com 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: Nike. Just Do It. Nike AU; ● 25 / 60 characters
Meta description: Nike delivers innovative products, experiences and services to inspire athletes. Member free shipping on orders $80+ & free returns*.; ● 133 / 160 characters
Site name: Nike.com
og:title: Inspiring the world's athletes, Nike delivers innovative products, experiences and services.
og:description: Inspiring the world's athletes, Nike delivers innovative products, experiences and services.
Language: en-AU

In search results

Nike.comhttps://www.nike.com/au/

Nike. Just Do It. Nike AU

Nike delivers innovative products, experiences and services to inspire athletes. Member free shipping on orders $80+ & free returns*.

When shared

nike.com

Inspiring the world's athletes, Nike delivers innovative products, experiences and servic…

Inspiring the world's athletes, Nike delivers innovative products, experiences and services.

Logo & favicons

Found as: SVG in the header. SVG, 24 × 24.

Logo

On white

On black

On Light Slate Grey

Favicons

7 found

192 px · PNG icon
152 px · PNG apple-touch-icon
152 px · PNG apple-touch-icon
128 px · PNG icon
120 px · PNG apple-touch-icon
76 px · PNG apple-touch-icon
48 px · ICO icon

Nike. Just Do It. Nike AU

Light browser tab

Nike. Just Do It. Nike AU

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

Colour

Balance

How much each colour is used

Near Black 47.7%
White 40.4%
Cool Charcoal 2.8%
Light Slate Grey 2.2%
Dark Grey 1%
Deep Pink 0.6%
Light Pink 0.5%
Tomato 0.5%
Orange 0.5%
Gold 0.5%
Yellow Green 0.5%
Medium Sea Green 0.5%
Steel Blue 0.5%
Medium Violet Red 0.5%
Lime Green 0.5%
Red 0.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

Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 93

On text
—

On white
18.88:1 AAA

Text, background, border · body, a.ncss-btn-primary-dark
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
18.88:1 AAA

On white
—

Background, text, border · .vjs-track-settings-controls button, body
Cool Charcoal

HEX

RGB

HSL

OKLCH

CMYK
32 19 0 75

On text
1.48:1 Fail

On white
12.74:1 AAA

Background, text · .vjs-track-settings-controls button, .video-js .vjs-big-play-button
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
2 2 0 55

On text
3.82:1 AA large

On white
4.94:1 AA

Text · ._681Nxqpr.eK1RvDAU ._5Lc8LAgK._1Y-1RHwA span, ._2uC-gsTC ._5Lc8LAgK._1Y-1RHwA span

Colours

Brand colours and accents, most used first

Light Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
28 16 0 38

On text
5.02:1 AA

On white
3.76:1 AA large

Background · .vjs-track-settings-controls button, .vjs-track-settings-controls button:focus
Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 100 38 0

On text
5.17:1 AA

On white
3.65:1 AA large

Text · ._681Nxqpr .JSftBPEZ, ._2uC-gsTC .JSftBPEZ
Light Pink

HEX

RGB

HSL

OKLCH

CMYK
0 74 29 7

On text
5.23:1 AA

On white
3.61:1 AA large

Background · ._2minRfAM.HOP81Bid, ._2minRfAM.HOP81Bid:not([disabled]):not(.disabled):hover
Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 62 77 0

On text
6.35:1 AA

On white
2.97:1 Fail

Background · ._2minRfAM.HOP81Bid, ._2minRfAM.HOP81Bid:not([disabled]):not(.disabled):hover
Orange

HEX

RGB

HSL

OKLCH

CMYK
0 31 86 2

On text
9.98:1 AAA

On white
1.89:1 Fail

Background · ._2minRfAM.HOP81Bid, ._2minRfAM.HOP81Bid:not([disabled]):not(.disabled):hover
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 14 89 2

On text
13.40:1 AAA

On white
1.41:1 Fail

Background · ._2minRfAM.HOP81Bid, ._2minRfAM.HOP81Bid:not([disabled]):not(.disabled):hover
Yellow Green

HEX

RGB

HSL

OKLCH

CMYK
28 0 77 16

On text
10.72:1 AAA

On white
1.76:1 Fail

Background · ._2minRfAM.HOP81Bid, ._2minRfAM.HOP81Bid:not([disabled]):not(.disabled):hover
Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
74 0 55 30

On text
6.91:1 AA

On white
2.73:1 Fail

Background · ._2minRfAM.HOP81Bid, ._2minRfAM.HOP81Bid:not([disabled]):not(.disabled):hover
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
69 32 0 33

On text
3.76:1 AA large

On white
5.02:1 AA

Background · ._2minRfAM.HOP81Bid, ._2minRfAM.HOP81Bid:not([disabled]):not(.disabled):hover
Medium Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 66 20 19

On text
4.53:1 AA

On white
4.17:1 AA large

Background · ._2minRfAM.HOP81Bid, ._2minRfAM.HOP81Bid:not([disabled]):not(.disabled):hover
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
35 0 57 24

On text
8.83:1 AAA

On white
2.14:1 Fail

Background · ._1MMfoyv6, ._1MMfoyv6:not([disabled]):not(.disabled):active
Red

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 0

On text
4.72:1 AA

On white
4.00:1 AA large

Text · .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder, --podium-cds-color-gradient-brand-orange

Gradients

linear-gradient(-180deg, #fff 88%, #73859f 100%)
linear-gradient(145deg,#ec3ea7,#ff623a,#fbad22,#fad81b,#99d531,#2eb350,#3573aa,#ce46a4)
linear-gradient(0deg, #fff 88%, #73859f 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.

VideoJS

Aa 400

VideoJS

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

Aa 400

Helvetica Now Text

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

Aa 400

Nike Futura ND

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

Aa 400

Helvetica Neue

System font, or not loaded on this page · buttons · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Body — Helvetica Now Text

Nike delivers innovative products, experiences and services to inspire athletes. Member free shipping on orders $80+ & free returns*.

Paragraph 100%

Nike delivers innovative products, experiences and services to inspire athletes. Member free shipping on orders $80+ & free returns*.

Link — weight 500 · Helvetica Now Text Medium

Sizes in use

Most common across the site

24pxline inherit · 6 rules
22px2 rules
19pxline 1.5 · 2 rules
18pxline 1.2 · 2 rules
16pxline 24px · 32 rules
14pxline 10px · 6 rules
12pxline 18px · 10 rules
10pxline 1 · 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

a.ncss-btn-primary-dark · #111111 · radius 30px

Link

Read our latest news today.

a · #111111

Corner radius

30px · 22×
4px · 16×
50% · 10×
2px · 4×
24px · 4×
0.3em · 3×

Shadows

0 0 0 2px
0 0 0 2px rgba(39, 93, 197, 1)
0 0 0 2px #1151FF
0 0 0 12px rgba(17, 17, 17, 0.12)

Layout

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

Grid

Breakpoints

599

600

890

891

959

960

1440

1920

On a scale of 0 to 1920 px.

Content widths (max-width)

1920 px

1910 px

1824 px

920 px

884 px

400 px

Notes

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

Notes

● FineThe title is 25 characters, short enough to show in full in search results.
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Questions

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

Questions

What font does Nike.com use?: Nike.com’s website uses three typefaces: VideoJS (headings), self-hosted; Helvetica Now Text (body text), self-hosted; Nike Futura ND, self-hosted.
What are Nike.com’s brand colours?: The main colours on nike.com are Light Slate Grey (#73859F), Deep Pink (#FF009E), Light Pink (#EC3EA7), Tomato (#FF623A), Orange (#FBAD22) and Gold (#FAD81B).
What colour is Nike.com’s text and background?: Body text is #111111 on a #FFFFFF background.
Where is Nike.com’s logo from?: The logo shown in this guide was found on nike.com’s homepage. For official logo files and usage rules, check Nike.com’s own brand or press page.
Is this Nike.com’s official style guide?: No. SiteStyleGuide made it from nike.com’s public web pages on 25 October 2026, and isn’t affiliated with Nike.com. 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

nike-com-tokens.css

Download

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

/* nike.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/nike.com) */
:root {
  /* Colours */
  --text: #111111;
  --background: #FFFFFF;
  --colour-near-black: #111111;
  --colour-white: #FFFFFF;
  --colour-cool-charcoal: #2B333F;
  --colour-dark-grey: #707072;
  --colour-light-slate-grey: #73859F;
  --colour-deep-pink: #FF009E;
  --colour-light-pink: #EC3EA7;
  --colour-tomato: #FF623A;
  --colour-orange: #FBAD22;
  --colour-gold: #FAD81B;
  --colour-yellow-green: #99D531;
  --colour-medium-sea-green: #2EB350;
  --colour-steel-blue: #3573AA;
  --colour-medium-violet-red: #CE46A4;
  --colour-lime-green: #7EC354;
  --colour-red: #FF0000;
  --gradient-1: linear-gradient(-180deg, #fff 88%, #73859f 100%);
  --gradient-2: linear-gradient(145deg,#ec3ea7,#ff623a,#fbad22,#fad81b,#99d531,#2eb350,#3573aa,#ce46a4);
  --gradient-3: linear-gradient(0deg, #fff 88%, #73859f 100%);

  /* Typefaces */
  --font-buttons: 'VideoJS';
  --font-headings: 'VideoJS';
  --font-body: 'Helvetica Now Text', 'Helvetica', 'Arial', sans-serif;
  --font-other: 'Nike Futura ND', 'Helvetica Now Text Medium', 'Helvetica', 'Arial', sans-serif;

  /* Type scale */
  --text-p: 100%;

  /* Shape */
  --radius-1: 30px;
  --radius-2: 4px;
  --radius-3: 50%;
  --radius-4: 2px;
  --radius-5: 24px;
  --radius-6: 0.3em;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 599px;
  --breakpoint-2: 600px;
  --breakpoint-3: 890px;
  --breakpoint-4: 891px;
  --breakpoint-5: 959px;
  --breakpoint-6: 960px;
  --breakpoint-7: 1440px;
  --breakpoint-8: 1920px;
  --max-width-1: 1920px;
  --max-width-2: 1910px;
  --max-width-3: 1824px;
  --max-width-4: 920px;
  --max-width-5: 884px;
  --max-width-6: 400px;
}

{
    "site": "nike.com",
    "source": "https://sitestyleguide.com/nike.com",
    "text": "#111111",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Near Black",
            "hex": "#111111",
            "rgb": [
                17,
                17,
                17
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Cool Charcoal",
            "hex": "#2B333F",
            "rgb": [
                43,
                51,
                63
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#707072",
            "rgb": [
                112,
                112,
                114
            ]
        },
        {
            "name": "Light Slate Grey",
            "hex": "#73859F",
            "rgb": [
                115,
                133,
                159
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#FF009E",
            "rgb": [
                255,
                0,
                158
            ]
        },
        {
            "name": "Light Pink",
            "hex": "#EC3EA7",
            "rgb": [
                236,
                62,
                167
            ]
        },
        {
            "name": "Tomato",
            "hex": "#FF623A",
            "rgb": [
                255,
                98,
                58
            ]
        },
        {
            "name": "Orange",
            "hex": "#FBAD22",
            "rgb": [
                251,
                173,
                34
            ]
        },
        {
            "name": "Gold",
            "hex": "#FAD81B",
            "rgb": [
                250,
                216,
                27
            ]
        },
        {
            "name": "Yellow Green",
            "hex": "#99D531",
            "rgb": [
                153,
                213,
                49
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#2EB350",
            "rgb": [
                46,
                179,
                80
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#3573AA",
            "rgb": [
                53,
                115,
                170
            ]
        },
        {
            "name": "Medium Violet Red",
            "hex": "#CE46A4",
            "rgb": [
                206,
                70,
                164
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#7EC354",
            "rgb": [
                126,
                195,
                84
            ]
        },
        {
            "name": "Red",
            "hex": "#FF0000",
            "rgb": [
                255,
                0,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "VideoJS",
            "stack": "VideoJS",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Helvetica Now Text",
            "stack": "\"Helvetica Now Text\", Helvetica, Arial, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Nike Futura ND",
            "stack": "'Nike Futura ND', 'Helvetica Now Text Medium', Helvetica, Arial, sans-serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Helvetica Neue",
            "stack": "\"Helvetica Neue\"",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Arial",
            "stack": "Arial, Helvetica, sans-serif",
            "weights": [
                400
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Helvetica Now Text Medium",
            "stack": "\"Helvetica Now Text Medium\", Helvetica, Arial, sans-serif",
            "weights": [
                400,
                500
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using VideoJS as their main typeface

Fortune

fortune.com · set in VideoJS
Save
rivian.com

rivian.com · set in VideoJS
Save
teenage engineering

teenage.engineering · set in VideoJS
Save
Wise

wise.com · set in VideoJS
Save

Websites whose lead colour is closest to Nike.com’s

La Vanguardia

lavanguardia.com · 4 days ago
Save
PBS

pbs.org · 5 days ago
Save
vk.me

vk.me · 4 days ago
Save
Vine

vine.co · 4 days ago
Save

Captured from nike.com on 25 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Nike.com; this guide describes the public website for reference.

Nike.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Near Black

White

Cool Charcoal

Dark Grey

Colours

Light Slate Grey

Deep Pink

Light Pink

Tomato

Orange

Gold

Yellow Green

Medium Sea Green

Steel Blue

Medium Violet Red

Lime Green

Red

Gradients

VideoJS

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run nike.com?

Also set in VideoJS

Fortune

rivian.com

teenage engineering

Wise

Similar colours

La Vanguardia

PBS

vk.me

Vine

Title &
description