What font does xbox.com use?

xbox.com’s website uses four typefaces: Segoe UI (headings and body text), a system font; MWF-MDL2, self-hosted; Bahnschrift Light, self-hosted; SegoeProBlack, self-hosted.

What are xbox.com’s brand colours?

The main colours on xbox.com are Green (#107C10), Green Yellow (#9BF00B), Green (#054B16), Green (#0A4F0A), Light Green (#0E700E) and Steel Blue (#0078D4).

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

Body text is #000000 on a #FFFFFF background.

Where is xbox.com’s logo from?

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

Is this xbox.com’s official style guide?

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

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

Unofficial style guide

xbox.comstyle guide

xbox.com’s website (xbox.com) uses Segoe UI for its headings and body text. Its palette is led by Green (#107C10), Green Yellow (#9BF00B) and Green (#054B16), with #000000 text on #FFFFFF. Captured from the live site on 1 November 2026.

Website: xbox.com
Typefaces: Segoe UI, MWF-MDL2, Bahnschrift Light
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 1 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the xbox.com homepage on a desktop screen — Screenshot of xbox.com on a 1440 px desktop screen, 1 Nov 2026.

Screenshot of the xbox.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: XBOX Official Site (Australia): Play Games Anywhere | XBOX; ● 58 / 60 characters
Meta description: Play with XBOX on PC, console & more. Explore Game Pass. Discover thousands of games. Shop controllers, handhelds & consoles. Join players anywhere.; ● 148 / 160 characters
Site name: xbox.com
og:title: XBOX Official Site: Consoles, Games and Community | XBOX
og:description: Experience the new generation of games and entertainment with XBOX. Explore consoles, new and old XBOX games and accessories to start or add to your collection.
Language: en

In search results

xbox.comhttps://www.xbox.com/en-AU/

XBOX Official Site (Australia): Play Games Anywhere | XBOX

Play with XBOX on PC, console & more. Explore Game Pass. Discover thousands of games. Shop controllers, handhelds & consoles. Join players anywhere.

When shared

xbox.com

XBOX Official Site: Consoles, Games and Community | XBOX

Experience the new generation of games and entertainment with XBOX. Explore consoles, new and old XBOX games …

Logo & favicons

Found as: image in the header. PNG, 216 × 46.

Logo

On white

On black

On Green

Favicons

7 found

512 px · PNG icon
512 px · SVG icon
256 px · ICO icon
192 px · PNG icon
180 px · PNG apple-touch-icon
32 px · PNG icon
16 px · PNG icon

XBOX Official Site (Australia): Play Games Anywhere | XBOX

Light browser tab

XBOX Official Site (Australia): Play Games Anywhere | XBOX

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 34.3%
Black 32.1%
Green 10.6%
Off White 5.7%
Green Yellow 4%
Near Black 3.7%
Green 3.2%
Green 1.7%
Light Green 0.9%
Steel Blue 0.8%
Green 0.6%
Lime Green 0.5%
Gold 0.5%
Royal Blue 0.5%
Deep Green 0.4%
Yellow Green 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
21.00:1 AAA

On white
—

Background, text, border · body, .PageBarV2-module__stickyHeaderContainer___d9lHm .PageBarV2-module__stickyHeader
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
—

On white
21.00:1 AAA

Text, background, border · body, .m-rich-heading>picture.c-image:after
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 10

On text
16.83:1 AAA

On white
1.25:1 Fail

Background, text, border · .m-rich-heading.theme-light.f-brand-neutral-10, .Catalog-module__filtersAndSearch___6WEZA button.Catalog-module__cButton___sDdLc
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 91

On text
1.17:1 Fail

On white
17.93:1 AAA

Background, text, border · .PDHeroItem-module__hero___bYZVF, .m-rich-heading.theme-dark.f-brand-neutral-90

Colours

Brand colours and accents, most used first

Green

HEX

RGB

HSL

OKLCH

CMYK
87 0 87 51

On text
3.91:1 AA large

On white
5.37:1 AA

Background, text, border · div.c-toggle button[aria-checked=true], .m-rich-heading.theme-dark.f-accent
Green Yellow

HEX

RGB

HSL

OKLCH

CMYK
35 0 95 6

On text
14.86:1 AAA

On white
1.41:1 Fail

Text, background, border · .BnplDialog-module__providerOption___czi5U button.BnplDialog-module__providerBut, .CustomSnowHero a.c-call-to-action.green-brdr.dark
Green

HEX

RGB

HSL

OKLCH

CMYK
93 0 71 71

On text
2.02:1 Fail

On white
10.37:1 AAA

Text, background, border · a.c-call-to-action, button.c-button.f-primary
Green

HEX

RGB

HSL

OKLCH

CMYK
87 0 87 69

On text
2.14:1 Fail

On white
9.83:1 AAA

Text · .faq-mwf .c-drawer>button>p, a.c-button.f-lightweight
Light Green

HEX

RGB

HSL

OKLCH

CMYK
87 0 87 56

On text
3.34:1 AA large

On white
6.28:1 AA

Background, text, border · a.c-action-trigger.f-heavyweight:focus:not(.x-hidden-focus), a.c-button.f-primary:focus:not(.x-hidden-focus)
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 43 0 17

On text
4.64:1 AA

On white
4.53:1 AA

Background, text, border · uhf-site-promo-banner .uhf-site-promo-banner.theme-light, .c-combo div ul li span.active
Green

HEX

RGB

HSL

OKLCH

CMYK
87 0 87 61

On text
2.81:1 Fail

On white
7.48:1 AAA

Background, text · a.c-action-trigger.f-heavyweight:active, a.c-button.f-primary:active
Lime Green

HEX

RGB

HSL

OKLCH

CMYK
52 0 85 24

On text
9.20:1 AAA

On white
2.28:1 Fail

Text, background · .mwfButton-module__btn-primary-alt___853LH, .mwfButton-module__active___qSuIc.mwfButton-module__btn-outline-primary-alt___I1
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 15 100 0

On text
15.07:1 AAA

On white
1.39:1 Fail

Background, text · .PDHeroItem-module__alertBanner___RTjYC, .SubscriptionCardV2-module__promotionalTag___kDFMe
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 44 0 28

On text
3.63:1 AA large

On white
5.78:1 AA

Background, text, border · uhf-promo-banner .uhf-promo-banner__action, uhf-site-promo-banner .uhf-site-promo-banner.theme-dark
Deep Green

HEX

RGB

HSL

OKLCH

CMYK
87 0 87 75

On text
1.72:1 Fail

On white
12.18:1 AAA

Text · a.c-call-to-action.f-lightweight:active, .c-mosaic-placement a.c-call-to-action:active
Yellow Green

HEX

RGB

HSL

OKLCH

CMYK
36 0 95 15

On text
11.92:1 AAA

On white
1.76:1 Fail

Background, text · .Catalog-module__gameDivsWrapper___lgp0i button:not(.Catalog-module__hiddenFocus, button.c-button.f-primary:hover

Gradients

linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))
linear-gradient(0deg,rgba(0,0,0,.8),transparent 85%)
radial-gradient(circle at center center,#fff,hsla(0,0%,100%,0) 80%)

Dark mode

Switched on by the site

Aa Light · #000000 on #FFFFFF

Aa Dark · #FFFFFF on #000000 · 21.00:1 AAA

White

#FFFFFF
Black

#000000
Light Grey

#CCCCCC
Off White

#E6E6E6
Cool Near Black

#201F24
Green

#107C10
Green Yellow

#9BF00B
Grey

#999999
Dark Grey

#666666
Charcoal

#404040
Near Black

#1A1A1A
Dark Green

#054B16

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.

Segoe UI

Aa 400 Aa 700

Segoe UI

System font, or not loaded on this page · weights 400, 600, 700 · headings, body, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 700

MWF-MDL2

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

Aa 300 Aa 400

Bahnschrift Light

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

Aa 600 Aa 900

SegoeProBlack

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

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

Type scale

From the site’s CSS

Body 100% / 1.5 weight 400 · Segoe UI

Play with XBOX on PC, console & more. Explore Game Pass. Discover thousands of games. Shop controllers, handhelds & consoles. Join players …

Paragraph 100%

Play with XBOX on PC, console & more. Explore Game Pass. Discover thousands of games. Shop controllers, handhelds & consoles. Join players …

Small 100%

Play with XBOX on PC, console & more. Explore Game Pass. Discover thousands of games. Shop controllers, handhelds & consoles. Join players …

Button 15px / 16px weight 400 · none

Get started

Link 16px / 26px weight 400 · Segoe UI Semibold

Sizes in use

Most common across the site

24pxline 28px · 40 rules
20pxline 24px · 45 rules
18pxline 24px · 36 rules
16pxline 1 · 45 rules
15pxline 20px · 63 rules
14pxline 1.25rem · 40 rules
13pxline 16px · 41 rules
12pxline 1rem · 29 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.c-call-to-action · #107C10

Link

Read our latest news today.

a · #107C10

Corner radius

50% · 43×
.25rem · 19×
4px · 19×
.5rem · 15×
9px · 10×

Shadows

0 2px currentColor
unset
0 .125rem .25rem 0 rgba(0,0,0,.13),0 0 .0625rem 0 rgba(0,0,0,.11)

Layout

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

Grid

Breakpoints

539

540

767

768

1083

1084

1400

1920

On a scale of 0 to 1920 px.

Content widths (max-width)

1920 px

1600 px

800 px

668 px

608 px

368 px

Notes

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

Notes

● FineThe title is 58 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 xbox.com use?: xbox.com’s website uses four typefaces: Segoe UI (headings and body text), a system font; MWF-MDL2, self-hosted; Bahnschrift Light, self-hosted; SegoeProBlack, self-hosted.
What are xbox.com’s brand colours?: The main colours on xbox.com are Green (#107C10), Green Yellow (#9BF00B), Green (#054B16), Green (#0A4F0A), Light Green (#0E700E) and Steel Blue (#0078D4).
What colour is xbox.com’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is xbox.com’s logo from?: The logo shown in this guide was found on xbox.com’s homepage. For official logo files and usage rules, check xbox.com’s own brand or press page.
Is this xbox.com’s official style guide?: No. SiteStyleGuide made it from xbox.com’s public web pages on 1 November 2026, and isn’t affiliated with xbox.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

xbox-com-tokens.css

Download

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

/* xbox.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/xbox.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-off-white: #E6E6E6;
  --colour-near-black: #171717;
  --colour-green: #107C10;
  --colour-green-yellow: #9BF00B;
  --colour-green-2: #054B16;
  --colour-green-3: #0A4F0A;
  --colour-light-green: #0E700E;
  --colour-steel-blue: #0078D4;
  --colour-green-4: #0D630D;
  --colour-lime-green: #5DC21E;
  --colour-gold: #FFD800;
  --colour-royal-blue: #0067B8;
  --colour-deep-green: #083F08;
  --colour-yellow-green: #8BD80A;
  --gradient-1: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1));
  --gradient-2: linear-gradient(0deg,rgba(0,0,0,.8),transparent 85%);
  --gradient-3: radial-gradient(circle at center center,#fff,hsla(0,0%,100%,0) 80%);

  /* Typefaces */
  --font-headings: 'Segoe UI';
  --font-body: 'Segoe UI';
  --font-buttons: 'Segoe UI';

  /* Type scale */
  --text-body: 100%;
  --leading-body: 1.5;
  --text-p: 100%;
  --text-small: 100%;
  --text-button: 15px;
  --leading-button: 16px;
  --text-a: 16px;
  --leading-a: 26px;

  /* Shape */
  --radius-1: 50%;
  --radius-2: .25rem;
  --radius-3: 4px;
  --radius-4: .5rem;
  --radius-5: 9px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 539px;
  --breakpoint-2: 540px;
  --breakpoint-3: 767px;
  --breakpoint-4: 768px;
  --breakpoint-5: 1083px;
  --breakpoint-6: 1084px;
  --breakpoint-7: 1400px;
  --breakpoint-8: 1920px;
  --max-width-1: 1920px;
  --max-width-2: 1600px;
  --max-width-3: 800px;
  --max-width-4: 668px;
  --max-width-5: 608px;
  --max-width-6: 368px;
}

{
    "site": "xbox.com",
    "source": "https://sitestyleguide.com/xbox.com",
    "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": "#E6E6E6",
            "rgb": [
                230,
                230,
                230
            ]
        },
        {
            "name": "Near Black",
            "hex": "#171717",
            "rgb": [
                23,
                23,
                23
            ]
        },
        {
            "name": "Green",
            "hex": "#107C10",
            "rgb": [
                16,
                124,
                16
            ]
        },
        {
            "name": "Green Yellow",
            "hex": "#9BF00B",
            "rgb": [
                155,
                240,
                11
            ]
        },
        {
            "name": "Green",
            "hex": "#054B16",
            "rgb": [
                5,
                75,
                22
            ]
        },
        {
            "name": "Green",
            "hex": "#0A4F0A",
            "rgb": [
                10,
                79,
                10
            ]
        },
        {
            "name": "Light Green",
            "hex": "#0E700E",
            "rgb": [
                14,
                112,
                14
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#0078D4",
            "rgb": [
                0,
                120,
                212
            ]
        },
        {
            "name": "Green",
            "hex": "#0D630D",
            "rgb": [
                13,
                99,
                13
            ]
        },
        {
            "name": "Lime Green",
            "hex": "#5DC21E",
            "rgb": [
                93,
                194,
                30
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFD800",
            "rgb": [
                255,
                216,
                0
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#0067B8",
            "rgb": [
                0,
                103,
                184
            ]
        },
        {
            "name": "Deep Green",
            "hex": "#083F08",
            "rgb": [
                8,
                63,
                8
            ]
        },
        {
            "name": "Yellow Green",
            "hex": "#8BD80A",
            "rgb": [
                139,
                216,
                10
            ]
        }
    ],
    "fonts": [
        {
            "name": "Segoe UI",
            "stack": "Segoe UI",
            "weights": [
                400,
                600,
                700
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "MWF-MDL2",
            "stack": "MWF-MDL2",
            "weights": [
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Bahnschrift Light",
            "stack": "Bahnschrift Light",
            "weights": [
                300,
                400
            ],
            "source": "Self-hosted"
        },
        {
            "name": "SegoeProBlack",
            "stack": "SegoeProBlack, Segoe UI, SegoeUI, Helvetica, Arial, sans-serif",
            "weights": [
                600,
                700,
                900
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Bahnschrift Regular",
            "stack": "Bahnschrift Regular",
            "weights": [
                400,
                600
            ],
            "source": "Self-hosted"
        },
        {
            "name": "SegoeUI",
            "stack": "SegoeUI",
            "weights": [
                100,
                200,
                400,
                600,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Segoe UI as their main typeface

S

SORT

sort-office.com · set in Segoe UI
Save
CodeCanyon

codecanyon.net · set in Segoe UI
Save
orbitz

orbitz.com · set in Segoe UI
Save
wikiquote.org

wikiquote.org · set in Segoe UI
Save

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

Common Sense Media

commonsensemedia.org · 4 days ago
Save
GitHub

github.com · 23 hours ago
Save
Consumer Reports

consumerreports.org · 5 days ago
Save
Songkick

songkick.com · 5 days ago
Save

Captured from xbox.com on 1 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by xbox.com; this guide describes the public website for reference.

xbox.comstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Off White

Near Black

Colours

Green

Green Yellow

Green

Green

Light Green

Steel Blue

Green

Lime Green

Gold

Royal Blue

Deep Green

Yellow Green

Gradients

Dark mode

Segoe UI

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run xbox.com?

Also set in Segoe UI

SORT

CodeCanyon

orbitz

wikiquote.org

Similar colours

Common Sense Media

GitHub

Consumer Reports

Songkick

Title &
description