# Xbox

> `xbox@1.0.0`

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** · `xbox@1.0.0` · 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** `(segoe-ui@1.0.0)` | Proprietary — Microsoft Corporation, distributed with Windows | sans-serif |
| `body` | **Segoe UI** `(segoe-ui@1.0.0)` | Proprietary — Microsoft Corporation, distributed with Windows | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `xbox@1.0.0` from the encyclopedia.*