Xbox

Xbox's brand palette as captured from the live xbox.com stylesheet. The brand is built around a single, instantly recognizable signature: "Xbox Green" — declared as --brandColorPrimary (#107C10) and --green (#107C10) on the live site, with a hover state of #007738 and an alt darker #044E2A. The brand canvas is dual-mode: a paper canvas for product detail pages and a deep ink (#171717 hero, #201F24 header) for the gaming-focused chrome. The "Xbox Progress" green ramp (#107C10 → #44B01C → #65C914) and the bright lime-stripe accent (#9BF00B) appear on subscription / achievement / Game Pass affordances. Typography is Microsoft's Segoe UI family (--font-family- sans-serif / --uhf-font-family) with SegoeProBlack reserved for hero display modules.

24 swatches 15 light roles 15 dark roles xboxgamingconsolegreenmicrosoftsub-brand

Swatches

xbox-green
#107C10
The iconic Xbox Green — --brandColorPrimary, --green, --success, --primary, and --xboxProgressA. The single most identifiable element of the Xbox brand.
xbox-green-hover
#007738
Pressed / hover variant — --brandColorPrimaryHover, --colorBrandBackgroundHover, --colorNeutralBackground1Hover.
xbox-green-alt
#044E2A
Darker brand variant — --brandColorPrimaryAlt. Used for borders and quiet panel accents in the brand-green family.
xbox-progress-b
#65C914
Bright achievement / progress green — --xboxProgressB. Mid-stop of the progress-bar gradient.
xbox-progress-c
#44B01C
Mid achievement / progress green — --xboxProgressC.
gradient-start
#0A4F0A
Hero gradient start — --entryGradientStart. Deepest stop of the documented Xbox-green hero gradient.
gradient-mid
#107C10
Hero gradient mid — --entryGradientMid (same value as brand primary).
gradient-end
#054B16
Hero gradient end — --entryGradientEnd.
lime-stripe
#9BF00B
Bright lime accent — observed on the Xbox Game Pass promotional CTAs and the "AVAILABLE WITH GAME PASS" affordances. Inverts to a #054B16 (gradient-end) text fill on the live stripe.
ink-hero
#171717
Primary dark hero background — --pd-hero-bg. Used for the product-detail-page hero modules.
ink-header
#201F24
Header chrome dark — observed as the navigation bar computed backgroundColor (rgb(32, 31, 36)).
ink-card
#333333
Elevated dark card surface — observed on product card backgrounds inside hero modules.
graphite-text
#242424
Primary body text — --text-color (#242424). Used on the light marketing surfaces.
graphite-dark
#2F2F2F
Deep neutral — --gray-dark.
graphite
#505050
Mid neutral — --gray.
paper
#FFFFFF
Primary light canvas — --white.
paper-surface
#F5F5F5
Light elevated surface — --background-color and --color- neutral-background3.
paper-divider
#D2D2D2
Quiet divider — --info (#D2D2D2). Used for borders and divider lines on light chrome.
status-warning
#FFB900
Warning amber — --warning, --yellow.
status-danger
#DC3545
Danger red — --danger, --red.
status-info-blue
#0067B8
Microsoft information blue — --blue. Inherited from the Microsoft UHF layer; appears in inline links inside the Xbox chrome.
status-teal
#008575
Microsoft teal — --teal. UHF status accent.
gamepass-pink
#FF0088
Game Pass promotional CTA fill — observed on the live "JOIN GAME PASS" button. Not a brand primary; reserved for promotional subscription affordances.
hero-alert
#FFD800
Hero-banner alert background — --pd-hero-alert-bg. Reserved for time-sensitive launch banners.

Mode role mappings

Light mode (15 roles)

accent → xbox-green
accent-hover → xbox-green-hover
background → paper
border → paper-divider
error → status-danger
primary → xbox-green
primary-hover → xbox-green-hover
success → xbox-green
surface → paper-surface
surface-elevated → paper
text-primary → graphite-text
text-secondary → graphite-dark
text-tertiary → graphite
warning → status-warning
warning-hover → hero-alert

Dark mode (15 roles)

accent → lime-stripe
accent-hover → xbox-progress-b
background → ink-hero
border → graphite-dark
error → status-danger
primary → xbox-green
primary-hover → lime-stripe
success → xbox-progress-b
surface → ink-header
surface-elevated → ink-card
text-primary → paper
text-secondary → paper-divider
text-tertiary → graphite
warning → status-warning
warning-hover → hero-alert

Provenance

Source
https://www.xbox.com/
License
Proprietary — All Rights Reserved
Attribution
Microsoft Corporation / Microsoft Gaming — palette values captured from the deployed stylesheet on xbox.com (--brandColorPrimary, --xboxProgressA/B/C, --green, --entryGradientStart/Mid/End, --pd-hero-* CSS custom- property families). Xbox, the Xbox sphere logo, Xbox Series X|S, Xbox Game Pass, and associated marks are trademarks of Microsoft Corporation.
Imported
2026-05-19
Notes
Derived from live site CSS at https://www.xbox.com/en-us/ on 2026-05-19; Microsoft's public Xbox brand-guidelines documents are partner-portal-only (Xbox Partner Marketing Hub) and not publicly accessible. The captured tokens come from the Microsoft Universal Header Footer (UHF) layer plus Xbox-specific design tokens declared on the page chrome. The primary typeface is Segoe UI (--font-family-sans-serif = "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif), an open and licensed Microsoft font available in this catalog as segoe-ui@1. Xbox is a sub-brand of Microsoft (parent: microsoft@1) but stands on its own atom because the green identity is functionally independent.