---
version: alpha
name: Xbox
description: A near-black arena where full-bleed game art does the talking, Segoe UI keeps the chrome quietly Microsoft-square, and the signature Xbox green ignites into an electric lime CTA — gaming-console marketing built for hype on a dark canvas.

colors:
  # Surface / canvas
  background: "#000000"        # the dominant near-black hero/arena canvas
  surface: "#262626"           # dark UI panels, header chrome
  surface-light: "#ffffff"     # the white content bands between dark heroes
  surface-muted: "#ebebeb"     # resting neutral button fill on light bands

  # Ink / text
  ink: "#ffffff"               # primary body text on the near-black arena canvas
  ink-on-light: "#000000"      # headings and body text on white/light bands
  ink-strong: "#262626"        # dark UI text, strong copy
  ink-secondary: "#616161"     # footer links, supporting copy
  on-dark: "#ffffff"           # text on the near-black canvas (alias)

  # Brand accent — Xbox green and its electric lime CTA
  primary: "#107c10"           # the signature Xbox green — nav icons, links, brand
  primary-hover: "#9bf00b"     # electric lime — link hover and the loud CTA fill
  primary-deep: "#054b16"      # deep forest green — text on the lime CTA
  primary-blue: "#0067b8"      # Microsoft action blue — utility links

  # Highlight
  highlight: "#ffd800"         # promo / "now available" badge yellow

  # Borders
  border: "#cccccc"            # control + flipper edges
  border-strong: "#dbdbdb"     # hover/focus neutral edge

typography:
  display-hero:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 62px
    fontWeight: 700
    lineHeight: 1.16
    letterSpacing: -0.62px
  display:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 46px
    fontWeight: 700
    lineHeight: 1.22
    letterSpacing: -0.46px
  heading:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.18
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body-small:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  link:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.11
    letterSpacing: 0px
  cta-loud:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 900
    lineHeight: 1.33
    letterSpacing: 0px
  badge:
    fontFamily: "Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 36px
  3xl: 48px
  4xl: 72px

rounded:
  none: 0px
  sm: 10px
  circle: 9999px

components:
  button-cta:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.cta-loud}"
    rounded: "{rounded.none}"
    padding: 5px 22px
  button-cta-hover:
    backgroundColor: "{colors.highlight}"
    textColor: "{colors.ink-on-light}"

  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-dark}"

  button-neutral:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 5px 16px
  button-neutral-hover:
    backgroundColor: "{colors.border-strong}"
    textColor: "{colors.ink-on-light}"

  flipper:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-strong}"
    rounded: "{rounded.circle}"
    padding: 12px
  flipper-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink-on-light}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: 24px
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    rounded: "{rounded.none}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 8px 12px
  input-focus:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-small}"
    padding: 12px 24px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.link}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary-hover}"
    typography: "{typography.link}"
    padding: 0px

  badge:
    backgroundColor: "{colors.highlight}"
    textColor: "{colors.ink-on-light}"
    typography: "{typography.badge}"
    rounded: "{rounded.none}"
    padding: 4px 7px
---

# Xbox Design System

## Overview

The Xbox site is dark on purpose. The dominant canvas is near-black (`{colors.background}`), and onto it the brand pours full-bleed key art — LEGO Batman crouched over a neon Gotham, console hardware lit like jewelry. The chrome itself almost disappears so the games can shout; the page is essentially a sequence of cinematic hero panels separated by clean white content bands (`{colors.surface-light}`). This dark-arena-plus-white-shelf rhythm is the structural signature: hype lives on black, browsing lives on white. The single most distinctive design move is what happens to the brand color under pressure — the calm, institutional Xbox green (`{colors.primary}`) used for nav icons and links suddenly detonates into an electric, almost radioactive lime (`{colors.primary-hover}`) the moment something wants to be clicked.

That CTA is the whole personality. "GET IT NOW", "JOIN GAME PASS" — these render as a loud lime block (`{colors.primary-hover}`) with deep-forest-green text (`{colors.primary-deep}`) set in Segoe UI at weight 900, with hard square corners. No radius, no gradient, no soft edges: it's a flat, high-voltage rectangle that reads as a button you press on a controller. Everything else inherits Microsoft's restraint. The typeface is Segoe UI top to bottom — the Microsoft system face — so the wrapper feels unmistakably like a first-party Microsoft property even when the content is pure consumer gaming hype. Headings go bold (700) and tight; body stays plainspoken.

The geometry is the other tell: corners are square (`{rounded.none}`). This is Fluent-descended Microsoft design language, where rectangles and sharp edges signal system-level seriousness. The only round things are the circular nav flippers (`{rounded.circle}`) that page through carousels. Shadows are minimal — a single soft `0 4px 8px` drop used sparingly. Color does the work: green for brand and navigation, lime for action, a punchy promo yellow (`{colors.highlight}`) for "now available" badges, Microsoft blue (`{colors.primary-blue}`) for utility links. It is a system engineered to make game art look expensive and the buy button impossible to miss.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) as the dominant ground — a dark arena for full-bleed game art
- Alternating rhythm: cinematic dark hero panels broken by clean white content bands (`{colors.surface-light}`)
- Institutional Xbox green (`{colors.primary}`) for brand, nav icons, and links
- Electric lime CTA (`{colors.primary-hover}`) on deep-forest text (`{colors.primary-deep}`) — the signature high-voltage action color
- Segoe UI throughout (`{typography.body}`) — the Microsoft system face, first-party DNA
- Heavy weights: 700 headings, 900 on loud CTAs (`{typography.cta-loud}`)
- Square corners everywhere (`{rounded.none}`) — Fluent-descended, system-serious geometry
- Circular flippers (`{rounded.circle}`) as the only round element — carousel navigation
- Punchy promo yellow (`{colors.highlight}`) for "now available" badges; Microsoft blue (`{colors.primary-blue}`) for utility links
- Minimal shadow — a single soft `0 4px 8px` drop; color and contrast carry hierarchy

## Colors

### Surface & Canvas
- **Near-Black** (`{colors.background}`): The dominant arena canvas — full-bleed game art and hero panels.
- **Dark Panel** (`{colors.surface}`): Header chrome and dark UI panels.
- **White Band** (`{colors.surface-light}`): The clean content shelves between dark heroes.
- **Neutral Gray** (`{colors.surface-muted}`): Resting fill for neutral buttons on white bands.

### Ink / Text
- **Black** (`{colors.ink}`): Headings on white content bands.
- **Strong Ink** (`{colors.ink-strong}`): Dark UI text and emphatic copy.
- **Gray** (`{colors.ink-secondary}`): Footer links and supporting copy.
- **On-Dark White** (`{colors.on-dark}`): All text over the near-black arena.

### Brand Accent
- **Xbox Green** (`{colors.primary}`): The institutional brand green — nav icons, default links, logo lockups.
- **Electric Lime** (`{colors.primary-hover}`): The high-voltage CTA fill and link-hover color. The brand's loudest, most recognizable action signal.
- **Deep Forest** (`{colors.primary-deep}`): The readable text color on the lime CTA.
- **Microsoft Blue** (`{colors.primary-blue}`): Utility / corporate-footer links inherited from the Microsoft shell.

### Highlight & Borders
- **Promo Yellow** (`{colors.highlight}`): "Now available" / promotional badges — a punchy attention flag.
- **Border / Strong Border** (`{colors.border}`, `{colors.border-strong}`): Control and flipper edges, hover states.

## Typography

### Font Family
- **Everything**: `Segoe UI` (with `SegoeUI`, Helvetica Neue, Arial fallbacks) — the Microsoft system face used for display, body, and UI alike. There is no separate brand or mono face; the single-family discipline is what makes the site read as a first-party Microsoft property.
- **Weight behavior**: bold (700) for headings, an emphatic 900 for the loud CTAs, plain 400 for body. Weight, not a second typeface, creates contrast.
- **Tracking**: slight negative on large display (-0.62px at 62px); neutral elsewhere.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 62px / 700 / -0.62px — the marquee hero headline |
| `display` | 46px / 700 / -0.46px — large section headlines |
| `heading` | 34px / 700 — feature headings |
| `heading-sub` | 24px / 400 — sub-section headings |
| `body-large` | 20px / 400 — lead paragraphs |
| `body` | 18px / 400 — standard body copy |
| `body-small` | 16px / 400 — dense supporting copy, neutral buttons |
| `link` | 18px / 600 — navigation and inline links |
| `button` | 18px / 700 — primary button labels |
| `cta-loud` | 15px / 900 — the high-voltage lime CTA ("GET IT NOW") |
| `badge` | 13px / 700 — promo badge text |

### Principles
- **One face, many weights**: Segoe UI everywhere; hierarchy comes from weight (400 → 700 → 900), not type pairing.
- **Loud where it counts**: the 900-weight CTA is the typographic exclamation point of the whole system.
- **System-serious headings**: bold and tight, in keeping with Microsoft's Fluent lineage.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. The dominant rhythm is a tight 12px (by far the most-counted value) for component internals, scaling through 24px and 36px to large 72px section gaps. The page alternates full-bleed dark hero sections with padded white content bands.

### Grid & Container
- Full-bleed hero panels run edge-to-edge with game art; copy and CTA overlay the lower-left
- White content bands use a centered max-width grid of game/category cards
- A top Microsoft universal header (UHF) and footer wrap every page in the corporate shell

### Whitespace Philosophy
- **Art fills the frame**: heroes go edge-to-edge; the game imagery is the layout
- **Shelves breathe**: white content bands use generous padding so cards read as a tidy catalog
- **Black for drama, white for browsing**: the alternation is the page's structural beat

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; flat color blocks and square edges | Most CTAs, badges, content bands |
| Card (Level 1) | `0 4px 8px` soft drop (`{colors.ink}` tint) | Hover-lifted game cards, floating panels |
| Overlay (Level 2) | Stronger drop + dark scrim over art | Hero copy legibility over busy key art |

**Shadow Philosophy**: Xbox barely uses shadow. The system relies on a single soft `0 4px 8px` drop for card lift and on dark scrims to keep white text legible over busy game imagery. Depth is communicated by contrast and full-bleed layering, not by stacked elevation. The flat, square CTAs deliberately read as physical console buttons — no shadow softening their edges.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, CTAs, cards, inputs, badges — the default Fluent-square geometry |
| `sm` | 10px | The occasional softened chip or tag |
| `circle` | 9999px | Carousel flipper buttons — the only fully round element |

The system is overwhelmingly square. Sharp corners are the Microsoft Fluent signature, signaling system-level seriousness. The only round shapes are the circular flippers that page through content carousels.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-cta`** — The signature loud CTA: electric lime (`{colors.primary-hover}`) fill, deep-forest text (`{colors.primary-deep}`), 900 weight, square corners. "GET IT NOW", "JOIN GAME PASS". Hover flips to promo yellow.
- **`button-primary`** — Xbox green (`{colors.primary}`) fill, white text, square. Standard branded action. Hover deepens to forest green.
- **`button-neutral`** — Neutral-gray fill, black text, square — the "Accept" / utility button on white bands.

### Flippers
- **`flipper`** — Circular (`{rounded.circle}`) white nav buttons that page through carousels — the only round control in the system.

### Cards
- **`card`** / **`card-light`** — Square panels. The dark variant sits on the black arena; the light variant lives on white content bands.

### Inputs
- **`input`** — White fill, square corners. **`input-focus`** keeps it square and high-contrast.

### Navigation
- **`nav-bar`** — Near-black Microsoft universal header, white text, green icons, square.

### Accent & Markers
- **`link`** / **`link-hover`** — Xbox green text that brightens to electric lime on hover — a core interaction signature.
- **`badge`** — Promo-yellow fill, black text, square — the "now available" flag.

## Do's and Don'ts

### Do
- Use a near-black canvas (`{colors.background}`) for hero/arena sections and let full-bleed game art fill the frame
- Alternate dark cinematic heroes with clean white content bands (`{colors.surface-light}`)
- Reserve electric lime (`{colors.primary-hover}`) for the loud CTA — fill with lime, set text in deep forest (`{colors.primary-deep}`), weight 900
- Use Xbox green (`{colors.primary}`) for brand, nav icons, and default links; brighten to lime on hover
- Set everything in Segoe UI (`{typography.body}`) — one face, weight does the hierarchy
- Keep corners square (`{rounded.none}`) on buttons, cards, badges, inputs — it's the Fluent signature
- Use the promo yellow (`{colors.highlight}`) sparingly for "now available" badges
- Make the only round element the circular carousel flippers (`{rounded.circle}`)

### Don't
- Don't lighten the hero canvas to white — the dark arena is the drama
- Don't round the CTA — the flat square lime block is the brand's button language
- Don't make the lime CTA text white-on-lime — use deep forest green for the punchy, readable contrast
- Don't introduce a second display typeface — Segoe UI with varied weight carries everything
- Don't soften the geometry with large radii — square corners signal Microsoft system-seriousness
- Don't drown the page in shadows — depth comes from contrast and full-bleed art, not elevation stacks
- Don't let the institutional green do the CTA job — that's the electric lime's role

---

## Responsive Behavior

### Breakpoints
*(Dembrandt surfaced many UHF breakpoint values; the table below maps to the standard Microsoft shell stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <540px | Single column; hero art crops to portrait with copy stacked below; nav collapses to a menu; CTA goes full-width |
| Tablet | 540–1083px | Two-up card shelves; hero copy overlays art at reduced size |
| Desktop | 1084–1399px | Full layout; edge-to-edge heroes, multi-column white card shelves |
| Large | ≥1400px | Max centered container for content bands; heroes stay full-bleed |

### Touch Targets
- CTAs and buttons run comfortably tall with `5px 22px`–`12px 24px` padding
- Circular flippers are sized for thumb taps on carousels

### Collapsing Strategy
- **Navigation**: the Microsoft universal header collapses to a hamburger; the green nav icons stack
- **Hero**: full-bleed art reframes for portrait; overlaid copy moves below the image on small screens
- **Cards**: multi-column shelves reflow to one or two columns
- **Type**: hero display drops from 62px toward ~32px while keeping bold weight

### Image Behavior
- Game key art is the layout — heroes are full-bleed and art-directed per title; on mobile they crop to a portrait focal point rather than letterboxing
- Card thumbnails maintain box-art aspect ratios within the white shelves

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-Black (`{colors.background}`) — the dominant arena
- Text on dark: White (`{colors.on-dark}`)
- Brand: Xbox Green (`{colors.primary}`)
- CTA: Electric Lime (`{colors.primary-hover}`) fill + Deep Forest (`{colors.primary-deep}`) text
- Promo flag: Yellow (`{colors.highlight}`)
- Corners: Square (`{rounded.none}`)

### Example Component Prompts

- "Create a full-bleed hero on near-black (`{colors.background}`) with edge-to-edge game art, a 62px bold (700) white (`{colors.on-dark}`) Segoe UI headline overlaying the lower-left, a yellow (`{colors.highlight}`) 'NOW AVAILABLE' square badge, and a loud lime CTA"
- "Build the signature CTA: electric lime (`{colors.primary-hover}`) fill, deep-forest-green (`{colors.primary-deep}`) text in Segoe UI weight 900, square corners (`{rounded.none}`), 5px 22px padding — e.g. 'GET IT NOW'; hover flips the fill to promo yellow (`{colors.highlight}`)"
- "Create a green primary button: Xbox green (`{colors.primary}`) fill, white text, square, 12px 24px padding; hover deepens to forest green (`{colors.primary-deep}`)"
- "Build a white content band (`{colors.surface-light}`) with a centered multi-column grid of square game cards and circular flipper nav buttons (`{rounded.circle}`) on the sides"
- "Render an inline link: Xbox green (`{colors.primary}`) Segoe UI weight 600 that brightens to electric lime (`{colors.primary-hover}`) on hover, no underline"

### Iteration Guide

1. Start the hero on near-black (`{colors.background}`) with full-bleed art. If your hero is white, you've lost the arena drama — darken it.
2. The CTA must be the loud electric lime (`{colors.primary-hover}`) with deep-forest text (`{colors.primary-deep}`) at weight 900. If it's the institutional green, it's not loud enough.
3. Square every corner (`{rounded.none}`) — buttons, cards, badges, inputs. The only round thing is the circular flipper.
4. Set all type in Segoe UI; reach for weight (700, 900), never a second typeface, to build hierarchy.
5. Alternate dark hero panels with white content bands (`{colors.surface-light}`) — that rhythm is the page.
6. Keep shadows minimal — a single soft `0 4px 8px` drop at most; let contrast and full-bleed art carry depth.
7. Use promo yellow (`{colors.highlight}`) only for "now available" flags, and Microsoft blue (`{colors.primary-blue}`) only for corporate utility links.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Xbox. Brand names and trademarks belong to their respective owners.