W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Xbox
Xbox is Microsoft's gaming brand cluster — covering the Xbox console family (original Xbox / 360 / One / Series S|X), Xbox Game Pass (the multi-tier subscription service), Xbox Cloud Gaming, Xbox Game Studios first-party publishing (Bethesda, Activision Blizzard, 343 Industries, The Coalition, Mojang, Obsidian, inXile, Compulsion, Double Fine, Rare, Turn 10, Playground, World's Edge, undead Labs, and others), and the PC Game Pass / Xbox app on Windows. The brand voice is loud, inclusive, and player-first — "Power Your Dreams" and "When everyone plays, we all win" frame the marketing posture. Visually, Xbox is the most chromatically committed gaming identity: the entire brand reads on the single signature hue, "Xbox Green" (#107C10), with the achievement / Game Pass lime stripe (#9BF00B) as a secondary energy accent. Xbox is a sub-brand of Microsoft (parent: microsoft@1) but stands on its own atom because the green identity is functionally independent of the Microsoft corporate identity and Microsoft Gaming operates as a distinct visual brand cluster.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/xbox/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/xbox/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Xbox
Xbox is Microsoft's gaming brand cluster — covering the Xbox console family (original Xbox / 360 / One / Series S|X), Xbox Game Pass (the multi-tier subscription service), Xbox Cloud Gaming, Xbox Game Studios first-party publishing (Bethesda, Activision Blizzard, 343 Industries, The Coalition, Mojang, Obsidian, inXile, Compulsion, Double Fine, Rare, Turn 10, Playground, World's Edge, undead Labs, and others), and the PC Game Pass / Xbox app on Windows. The brand voice is loud, inclusive, and player-first — "Power Your Dreams" and "When everyone plays, we all win" frame the marketing posture. Visually, Xbox is the most chromatically committed gaming identity: the entire brand reads on the single signature hue, "Xbox Green" (#107C10), with the achievement / Game Pass lime stripe (#9BF00B) as a secondary energy accent. Xbox is a sub-brand of Microsoft (parent: microsoft@1) but stands on its own atom because the green identity is functionally independent of the Microsoft corporate identity and Microsoft Gaming operates as a distinct visual brand cluster.
Tags: xbox, microsoft, gaming, console, green, sub-brand
Atoms
Palette
Xbox · [email protected] · Proprietary — All Rights Reserved
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.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Segoe UI ([email protected]) |
Proprietary — Microsoft Corporation, distributed with Windows | sans-serif |
body |
Segoe UI ([email protected]) |
Proprietary — Microsoft Corporation, distributed with Windows | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
xbox-green |
Xbox Green | #107C10 |
xbox-green-hover |
Xbox Green Hover | #007738 |
xbox-green-alt |
Xbox Green Alt | #044E2A |
xbox-progress-b |
Xbox Progress B | #65C914 |
xbox-progress-c |
Xbox Progress C | #44B01C |
gradient-start |
Gradient Start | #0A4F0A |
gradient-mid |
Gradient Mid | #107C10 |
gradient-end |
Gradient End | #054B16 |
lime-stripe |
Lime Stripe | #9BF00B |
ink-hero |
Ink Hero | #171717 |
ink-header |
Ink Header | #201F24 |
ink-card |
Ink Card | #333333 |
graphite-text |
Graphite Text | #242424 |
graphite-dark |
Graphite Dark | #2F2F2F |
graphite |
Graphite | #505050 |
paper |
Paper | #FFFFFF |
paper-surface |
Paper Surface | #F5F5F5 |
paper-divider |
Paper Divider | #D2D2D2 |
status-warning |
Status Warning | #FFB900 |
status-danger |
Status Danger | #DC3545 |
status-info-blue |
Status Info Blue | #0067B8 |
status-teal |
Status Teal | #008575 |
gamepass-pink |
Game Pass Pink | #FF0088 |
hero-alert |
Hero Alert | #FFD800 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
paper |
#FFFFFF |
surface |
paper-surface |
#F5F5F5 |
surface-elevated |
paper |
#FFFFFF |
text-primary |
graphite-text |
#242424 |
text-secondary |
graphite-dark |
#2F2F2F |
text-tertiary |
graphite |
#505050 |
primary |
xbox-green |
#107C10 |
primary-hover |
xbox-green-hover |
#007738 |
accent |
xbox-green |
#107C10 |
accent-hover |
xbox-green-hover |
#007738 |
warning |
status-warning |
#FFB900 |
warning-hover |
hero-alert |
#FFD800 |
error |
status-danger |
#DC3545 |
success |
xbox-green |
#107C10 |
border |
paper-divider |
#D2D2D2 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
ink-hero |
#171717 |
surface |
ink-header |
#201F24 |
surface-elevated |
ink-card |
#333333 |
text-primary |
paper |
#FFFFFF |
text-secondary |
paper-divider |
#D2D2D2 |
text-tertiary |
graphite |
#505050 |
primary |
xbox-green |
#107C10 |
primary-hover |
lime-stripe |
#9BF00B |
accent |
lime-stripe |
#9BF00B |
accent-hover |
xbox-progress-b |
#65C914 |
warning |
status-warning |
#FFB900 |
warning-hover |
hero-alert |
#FFD800 |
error |
status-danger |
#DC3545 |
success |
xbox-progress-b |
#65C914 |
border |
graphite-dark |
#2F2F2F |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
ink-hero |
#171717 |
on-identity |
xbox-green |
#107C10 |
primary |
xbox-green |
#107C10 |
primary-hover |
xbox-green-hover |
#007738 |
accent |
lime-stripe |
#9BF00B |
accent-hover |
xbox-progress-b |
#65C914 |
mark |
xbox-green |
#107C10 |
success |
xbox-green |
#107C10 |
warning |
status-warning |
#FFB900 |
error |
status-danger |
#DC3545 |
text-primary-light |
graphite-text |
#242424 |
text-primary-dark |
paper |
#FFFFFF |
background-light |
paper |
#FFFFFF |
background-dark |
ink-hero |
#171717 |
surface-light |
paper-surface |
#F5F5F5 |
surface-dark |
ink-header |
#201F24 |
text-secondary-light |
graphite-dark |
#2F2F2F |
text-tertiary-light |
graphite |
#505050 |
border-light |
paper-divider |
#D2D2D2 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → roles.colors.primary
- allowed: xbox-green, xbox-green-hover, xbox-green-alt
- forbidden: lime-stripe, status-info-blue, status-danger, status-warning, gamepass-pink
The Xbox brand is the single committed Xbox Green (#107C10) — declared on the live site as --brandColorPrimary, --green, --success, and --primary simultaneously. The lime stripe (#9BF00B) is the achievement / Game Pass accent, the blue is Microsoft's inherited UHF link affordance, and the pink is a promotional subscription-CTA. Substituting any of them for the brand primary breaks the most identifiable element of the Xbox identity.
colorChoice → roles.colors.mark
- allowed: xbox-green, paper, graphite-text
- forbidden: lime-stripe, status-info-blue, status-danger, gamepass-pink, status-warning
The Xbox sphere logo renders in Xbox Green on light backgrounds, in white on dark backgrounds, and in monochrome graphite for ink-on-paper contexts. The lime stripe, Microsoft blue, pink, and warning yellow are not mark fills — they are content affordances or Microsoft-corporate inheritances. Substituting any of them as the Xbox mark fill misrepresents the brand.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted
The Xbox sphere is a fixed-proportion identity. Microsoft Gaming's published partner-portal guidelines require the sphere to render only in approved color and on plain or approved-photo backgrounds with documented clearspace. Skewing, rotating, drop-shadowing, or placing the sphere on a busy photo violates the partner-portal requirements.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Paper (#FFFFFF) on Ink Hero (#171717) measures ~18:1 and Graphite Text (#242424) on Paper (#FFFFFF) measures ~15:1 — both clear WCAG AA decisively. Xbox's product- detail pages carry dense system-requirements tables, multi-tier Game Pass pricing comparisons, and achievement lists; AA is the body-text floor across both modes.
contextRestriction → roles.colors.accent
- forbiddenContexts: logo, hero-headline, error-state, destructive-action
- allowedContexts: achievement, game-pass, active-state, focus-ring, subscription-cta
The Lime Stripe (#9BF00B) is a Game Pass / achievement / active-state accent on the live Xbox surfaces — observed with a #054B16 (gradient-end) text fill on its stripe treatment. It must not appear as the Xbox logo fill or as a hero headline color (those roles belong to the Xbox-green family), and it must not appear in error or destructive contexts (those use --danger / --red).
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Xbox's surfaces carry dense product information (game titles, ratings, system requirements, multi-tier Game Pass pricing) across both light and dark modes; AA is the floor. The mark-on-canvas pairings (Xbox Green on Paper, white-on-Ink-Hero) clear AA comfortably.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 400, 600, 700
Xbox uses Segoe UI at Regular (400), SemiBold (600), and Bold (700) for the marketing chrome — observed on the live Universal Header Footer (UHF) and Xbox-specific navigation. The SegoeProBlack cut (font-weight: 900) is reserved for hero display modules ("JOIN GAME PASS" and similar promo CTAs) and lives under typography.display, not typography.heading.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: ink-hero, ink-header, paper, paper-surface
- doesNotPairWith: gamepass-pink, status-warning, hero-alert
Xbox Green reads cleanest against the deep ink hero canvas or the paper canvas. Placing it directly adjacent to the Game Pass promotional pink, the warning amber, or the hero-alert yellow produces chromatic conflict — the live site separates these accent surfaces with neutral chrome.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Xbox hero modules pair SegoeProBlack (display) with Segoe UI Regular (prose). Maintain at least a 1.5× display-to- prose size ratio to preserve hierarchy between the heavy display cut and the body text — the live "JOIN GAME PASS" hero / supporting-text combinations sit comfortably above this floor.
Provenance
- Source: https://www.xbox.com/
- License:
Proprietary — All Rights Reserved - Attribution: Microsoft Corporation / Microsoft Gaming — visual identity captured from the deployed stylesheet on xbox.com (--brandColorPrimary, --xboxProgressA/B/C, --entryGradient*, --pd-hero-* CSS custom-property families plus the Microsoft UHF / Bootstrap status tokens). Xbox, the Xbox sphere logo, Xbox Series X|S, Xbox Game Pass, Xbox Live, Xbox Cloud Gaming, 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 (Xbox Partner Marketing Hub) are partner-portal- only and not publicly accessible. The primary typeface is Segoe UI (--font-family-sans-serif), supplemented by SegoeProBlack for hero display modules (observed on the live "JOIN GAME PASS" promo CTA). Segoe UI is available in this catalog as segoe-ui@1. The Xbox sphere logo is a central identity element but is not enumerated as a separate asset variant per the encyclopedia's trademark-redistribution policy. assets: [] applies.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Xbox
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Xbox
A clear hierarchy in Xbox's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Xbox
[email protected]font · heading
Segoe UI
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Segoe UI
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ lime-stripe #9BF00B accent-hover
→ xbox-progress-b #65C914 background-dark
→ ink-hero #171717 background-light
→ paper #FFFFFF border-light
→ paper-divider #D2D2D2 error
→ status-danger #DC3545 identity
→ ink-hero #171717 mark
→ xbox-green #107C10 on-identity
→ xbox-green #107C10 primary
→ xbox-green #107C10 primary-hover
→ xbox-green-hover #007738 success
→ xbox-green #107C10 surface-dark
→ ink-header #201F24 surface-light
→ paper-surface #F5F5F5 text-primary-dark
→ paper #FFFFFF text-primary-light
→ graphite-text #242424 text-secondary-light
→ graphite-dark #2F2F2F text-tertiary-light
→ graphite #505050 warning
→ status-warning #FFB900 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Segoe UI prose
→ body Segoe UI Palette mode mappings (from xbox)
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 Rules (9 typed constraints)
error · 6 rules
colorChoice roles.colors.primary allowed xbox-green, xbox-green-hover, xbox-green-alt forbidden lime-stripe, status-info-blue, status-danger, status-warning, gamepass-pink The Xbox brand is the single committed Xbox Green (#107C10) — declared on the live site as --brandColorPrimary, --green, --success, and --primary simultaneously. The lime stripe (#9BF00B) is the achievement / Game Pass *accent*, the blue is Microsoft's inherited UHF link affordance, and the pink is a promotional subscription-CTA. Substituting any of them for the brand primary breaks the most identifiable element of the Xbox identity.
colorChoice roles.colors.mark allowed xbox-green, paper, graphite-text forbidden lime-stripe, status-info-blue, status-danger, gamepass-pink, status-warning The Xbox sphere logo renders in Xbox Green on light backgrounds, in white on dark backgrounds, and in monochrome graphite for ink-on-paper contexts. The lime stripe, Microsoft blue, pink, and warning yellow are *not* mark fills — they are content affordances or Microsoft-corporate inheritances. Substituting any of them as the Xbox mark fill misrepresents the brand.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted The Xbox sphere is a fixed-proportion identity. Microsoft Gaming's published partner-portal guidelines require the sphere to render only in approved color and on plain or approved-photo backgrounds with documented clearspace. Skewing, rotating, drop-shadowing, or placing the sphere on a busy photo violates the partner-portal requirements.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Paper (#FFFFFF) on Ink Hero (#171717) measures ~18:1 and Graphite Text (#242424) on Paper (#FFFFFF) measures ~15:1 — both clear WCAG AA decisively. Xbox's product- detail pages carry dense system-requirements tables, multi-tier Game Pass pricing comparisons, and achievement lists; AA is the body-text floor across both modes.
contextRestriction roles.colors.accent forbiddenContexts logo, hero-headline, error-state, destructive-action allowedContexts achievement, game-pass, active-state, focus-ring, subscription-cta The Lime Stripe (#9BF00B) is a Game Pass / achievement / active-state accent on the live Xbox surfaces — observed with a #054B16 (gradient-end) text fill on its stripe treatment. It must not appear as the Xbox logo fill or as a hero headline color (those roles belong to the Xbox-green family), and it must not appear in error or destructive contexts (those use --danger / --red).
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Xbox's surfaces carry dense product information (game titles, ratings, system requirements, multi-tier Game Pass pricing) across both light and dark modes; AA is the floor. The mark-on-canvas pairings (Xbox Green on Paper, white-on-Ink-Hero) clear AA comfortably.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 400, 600, 700 Xbox uses Segoe UI at Regular (400), SemiBold (600), and Bold (700) for the marketing chrome — observed on the live Universal Header Footer (UHF) and Xbox-specific navigation. The SegoeProBlack cut (font-weight: 900) is reserved for hero display modules ("JOIN GAME PASS" and similar promo CTAs) and lives under typography.display, not typography.heading.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith ink-hero, ink-header, paper, paper-surface doesNotPairWith gamepass-pink, status-warning, hero-alert Xbox Green reads cleanest against the deep ink hero canvas or the paper canvas. Placing it directly adjacent to the Game Pass promotional pink, the warning amber, or the hero-alert yellow produces chromatic conflict — the live site separates these accent surfaces with neutral chrome.
fontPairing typography.display requires prose minSizeRatio 1.5 Xbox hero modules pair SegoeProBlack (display) with Segoe UI Regular (prose). Maintain at least a 1.5× display-to- prose size ratio to preserve hierarchy between the heavy display cut and the body text — the live "JOIN GAME PASS" hero / supporting-text combinations sit comfortably above this floor.
Provenance
- Source
- https://www.xbox.com/
- License
Proprietary — All Rights Reserved- Attribution
- Microsoft Corporation / Microsoft Gaming — visual identity captured from the deployed stylesheet on xbox.com (--brandColorPrimary, --xboxProgressA/B/C, --entryGradient*, --pd-hero-* CSS custom-property families plus the Microsoft UHF / Bootstrap status tokens). Xbox, the Xbox sphere logo, Xbox Series X|S, Xbox Game Pass, Xbox Live, Xbox Cloud Gaming, 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 (Xbox Partner Marketing Hub) are partner-portal- only and not publicly accessible. The primary typeface is Segoe UI (--font-family-sans-serif), supplemented by SegoeProBlack for hero display modules (observed on the live "JOIN GAME PASS" promo CTA). Segoe UI is available in this catalog as segoe-ui@1. The Xbox sphere logo is a central identity element but is not enumerated as a separate asset variant per the encyclopedia's trademark-redistribution policy. assets: [] applies.