---
title: "Xbox design system"
variant: extended
source: https://www.xbox.com/en-US/
captured_at: 2026-10-12
theme: dark
industry: gaming
generator: Design DNA (https://four.wiralomi.com/style/xbox-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Xbox · Design System

> Cinematic game worlds on a bold black canvas

**Theme:** dark · **Industry:** gaming · **Source:** https://www.xbox.com/en-US/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Xbox pairs a near-black interface with cinematic game imagery and vivid red promotional accents. Full-bleed hero media leads into an irregular grid of game, hardware, and membership stories before a light, multi-column footer.

## North star

Let cinematic, full-bleed game imagery carry the emotion, and use the black canvas with restrained high-contrast CTAs to keep the interface clear.

## Overview

The homepage is anchored by a black canvas (#000000), letting dark cinematic game imagery blend into the page rather than sit inside obvious containers. White (#ffffff) carries navigation and headlines; the bright red (#f00000) appears as a focused promotional signal on the hero label and primary Game Pass CTA. The measured green tones belong to the wider Xbox palette, while the screenshots show the first viewport led more strongly by black, white, red, and media artwork. Segoe UI provides readable navigation and flexible editorial hierarchy, with SegoeProBlack reserved for emphatic action labels. A full-bleed hero gives way to a dense, asymmetric mosaic of large image-led cards and smaller text panels. Most content stays flat against black, while select light cards and the pale gray footer create contrast. Spacing is comfortable around major sections but compact inside the promotional grid, keeping the page energetic without sacrificing scannability.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Screen White | `#ffffff` | `--color-screen-white` | neutral | Navigation, hero and card headings, button text, links, and thin borders against dark media and the black canvas. |
| Console Black | `#000000` | `--color-console-black` | brand | Primary page canvas and dark text on white cards; provides the continuous backdrop for full-bleed game artwork. |
| Slate Panel | `#333333` | `--color-slate-panel` | surface | Dark card and section surface used behind selected game-content tiles. |
| Quiet Gray | `#616161` | `--color-quiet-gray` | neutral | Muted navigation, heading, and footer text where secondary information should recede. |
| Xbox Green | `#107c10` | `--color-xbox-green` | brand | Brand accent for links and green gradient details; use sparingly alongside the page's dominant red campaign imagery. |
| Signal Red | `#f00000` | `--color-signal-red` | accent | Primary Game Pass CTA and hero availability label; also appears in campaign artwork and promotional details. |
| Deep Green | `#054b16` | `--color-deep-green` | accent | Dark green accent within the measured Xbox gradient and green button text, not a dominant page surface. |
| Forest Glow | `#0a4f0a` | `--color-forest-glow` | accent | Intermediate stop in the measured green gradient; use for gradient treatment rather than a broad standalone interface area. |
| Lime Signal | `#9bf00b` | `--color-lime-signal` | accent | Bright green SHOP NOW button fill, with deep green text; keep to select commerce actions. |
| Footer Mist | `#f2f2f2` | `--color-footer-mist` | surface | Light footer band that separates compact browse, resources, and Microsoft Store link columns from the dark page. |

### Semantic aliases

`--color-canvas` → `#000000` (Console Black) · `--color-surface` → `#ffffff` (Screen White) · `--color-surface-2` → `#333333` (Slate Panel) · `--color-surface-3` → `#f2f2f2` (Footer Mist) · `--color-text` → `#ffffff` (Screen White) · `--color-text-muted` → `#616161` (Quiet Gray) · `--color-text-subtle` → `#000000` (Console Black) · `--color-border` → `#ffffff` (Screen White) · `--color-accent` → `#f00000` (Signal Red) · `--color-accent-2` → `#107c10` (Xbox Green) · `--color-accent-3` → `#054b16` (Deep Green) · `--color-on-accent` → `#ffffff` (Screen White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#333333` | 12.63:1 | AAA |
| `#ffffff` | `#f2f2f2` | 1.12:1 | fail |
| `#616161` | `#000000` | 3.39:1 | AA-large |
| `#616161` | `#ffffff` | 6.19:1 | AA |
| `#616161` | `#333333` | 2.04:1 | fail |
| `#616161` | `#f2f2f2` | 5.53:1 | AA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#333333` | 1.66:1 | fail |
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |

### Gradients

- `linear-gradient(275.43deg, rgb(10, 79, 10) 14.09%, rgb(16, 124, 16) 46.66%, rgb(5, 75, 22) 84.29%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Segoe UI | `--font-body` | webfont | 400, 700, 600 | Primary interface and editorial type for navigation, headings, body copy, links, and footer content. | Roboto |
| SegoeProBlack | `--font-segoeproblack` | webfont | 900, 600 | Heavy display treatment for prominent campaign and commerce action labels. | Roboto Black |

- **Segoe UI:** Measured weights 400, 600, and 700; use sentence case, with bold headings and compact small navigation labels.
- **SegoeProBlack:** Measured weights 600 and 900; use sparingly for emphatic CTA labels, often uppercase.

### Type scale — Perfect Fourth (ratio ≈ 1.327, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62px | 700 | 1.16 | -0.01em | — | Segoe UI | Large campaign display headline treatment where the hero needs maximum emphasis. |
| h1 | 46px | 700 | 1.22 | -0.01em | — | Segoe UI | Primary hero or major page headline, notably the featured game title. |
| h2 | 34px | 400 | 1.18 | 0 | — | Segoe UI | Section-level headings introducing content stories or broad page areas. |
| h3 | 24px | 700 | 1.25 | 0 | — | Segoe UI | Card titles for featured games, hardware, and editorial promotions. |
| body | 20px | 400 | 1.2 | 0 | — | Segoe UI | Hero descriptions and supporting copy within image-led content cards. |
| caption | 11px | 400 | 1.45 | 0 | — | Segoe UI | Small availability labels, metadata, and compact supporting details. |
| button | 13px | 400 | 1.5 | 0 | — | Segoe UI | Compact button labels for primary promotional and shopping actions. |
| nav | 11px | 400 | 1.45 | 0 | — | Segoe UI | Small top navigation labels and supporting navigation items. |
| link | 16px | 400 | 1.5 | 0 | — | Segoe UI | Inline action links and secondary navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 16, 20, 24, 36, 43, 72 px.
- Section rhythm 72px · element gap 5px · card padding — · max content width 1296px.

Use a full-width black canvas with a measured page max width of 1296px for contained content. The first section is a full-bleed, single-column media hero, with text aligned left over the image; below it, compact category links lead into a dense asymmetric card mosaic. Mix wide image-led features with smaller text-and-image tiles, rather than imposing a uniform catalog grid. Preserve generous separation between major sections, while keeping card interiors and navigation compact. Finish with a pale gray, three-column footer.

## Shape & elevation

- Radius: button `50%`
- Shadow `sm` (link, button): `rgba(0, 0, 0, 0) 0px 4px 8px 0px`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The page is primarily flat: black canvas, image tiles, and text panels define structure without prominent shadows. Keep card corners square as measured, and use thin white borders only for small controls such as the circular account affordance. Separate areas through tonal contrast, image boundaries, and spacing rather than stacked elevation.

## Imagery

Lead with full-bleed cinematic game video or photography, framed to leave a readable text zone over darker image areas. The rest of the page relies on richly colored game, controller, console, and apparel imagery arranged in large, varied tiles. Keep the art crisp and dramatic; red campaign artwork belongs to the featured game content, not to a universal interface tint.

## Components

### Top navigation

Compact white Xbox and destination links sit over the dark hero; keep the header unobtrusive so the media remains dominant.

### Campaign hero

Full-bleed gameplay media with a left-aligned text block, a red availability label, a large bold title, supporting line, and paired actions.

### Primary CTA

Use the measured #f00000 fill and white label for JOIN GAME PASS; the action is compact, rectangular, and visually prominent.

### Secondary action link

Set GET IT NOW in white, heavy uppercase lettering beside the primary button, with a small directional chevron.

### Category shortcuts

A horizontal strip of red line icons and labels provides quick paths to Game Pass, games, devices, accessories, play, and sign-in.

### Editorial tile mosaic

Arrange game and product stories in unequal image-led cards, alternating dark text panels, bright imagery, and occasional white content surfaces.

### Footer directory

End with a #f2f2f2 band containing compact link lists in three measured columns, plus brand and utility details.

### Measured component styles

- **Primary button** (“JOIN GAME PASS”): background #f00000 · text #ffffff · border 1px solid · radius 0px · padding 5px 20px 5px 22px · 900 15px SegoeProBlack · shadow rgba(0, 0, 0, 0) 0px 4px 8px 0px
- **Secondary button** (“SHOP NOW”): background #9bf00b · text #054b16 · border 1px solid · radius 0px · padding 5px 20px 5px 22px · 900 15px SegoeProBlack · shadow rgba(0, 0, 0, 0) 0px 4px 8px 0px
- **Link** (“GET IT NOW”): transparent background · text #ffffff · border 2px solid · radius 0px · padding 10px 3px 7px 0px · 900 15px SegoeProBlack · shadow rgba(0, 0, 0, 0) 0px 4px 8px 0px
- **Card** (“Gears of War: E-Day Controllers Survive ”): background #333333 · text #ffffff · radius 0px · padding 0px · 400 16px Segoe UI
- **Navigation item** (“Game Pass Games Devices Play Store Commu”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Segoe UI

## Do

- Keep the main canvas black and let campaign media fill the available space.
- Use white for primary navigation, headlines, and actions on dark backgrounds.
- Reserve #f00000 for high-priority campaign labels and primary CTAs.
- Use #9bf00b for occasional shopping actions, paired with #054b16 text.
- Build varied, image-led tiles instead of a uniform card grid.
- Use Segoe UI for interface and editorial copy, with heavy display labels used selectively.

## Don't

- Don't add gradients to the hero unless the artwork itself contains them.
- Don't turn every card into a rounded, elevated surface.
- Don't use red as a blanket page background or tint over unrelated content.
- Don't let text overlays compete with busy areas of the game imagery.
- Don't make navigation or secondary copy as prominent as the hero headline.
- Don't replace the dark-to-light footer contrast with an all-black ending.

## Agent prompt

Build a new Xbox-style gaming page around a #000000 Console Black canvas, using #ffffff Screen White for navigation and readable content. Start with a full-bleed cinematic image or video and place concise, left-aligned campaign copy over a quiet dark area. Give the primary action a compact #f00000 Signal Red fill with white text; reserve #9bf00b Lime Signal and #054b16 Deep Green for a secondary shopping moment. Use Segoe UI-style typography for clear hierarchy and heavy uppercase labels only for key actions. After the hero, compose an asymmetric, image-led mosaic of game, hardware, or membership stories, mixing dark text panels with occasional light cards. Keep surfaces mostly flat and square-edged, use spacing rather than shadows to define groups, and conclude with a #f2f2f2 Footer Mist directory band.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed, single-column video hero with left-aligned copy layered over cinematic gameplay. | Top-level navigation, Primary and secondary actions, Video pause control | Dark image overlay, Red availability label, White headline, Red primary button |
| 2 | category-nav | Single horizontal strip of icon-led links on the black canvas. | Direct category shortcuts, Account sign-in entry | Red line icons, Compact uppercase labels, Dark background |
| 3 | footer | Light footer band with three link columns and compact brand utilities. | Grouped destination links, Policy and region utilities | #f2f2f2 background, Small gray text, Column headings |

## Source CSS custom properties (selected)

```css
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59,130,246,.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--primary: #107c10;
--secondary: #000;
--font-family-sans-serif: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
--font-family-monospace: Consolas,"Courier New",Courier,monospace;
--tooltip-color: #fff;
--tooltip-bg: #404040;
--subscription-card-border: #6b7584;
--subscription-card-shadow: #0000004d;
--subscription-card-dark-background: #25282c;
--subscription-card-banner-background: #1a1b1e66;
--subscription-card-text-secondary: #ffffffa6;
--subscription-card-action-button-background: #3e434b;
--text-color: #242424;
--ubisoft-card-bg: #25282c;
--ubisoft-card-border: #6b7584;
--ubisoft-card-text: #fff;
--ubisoft-card-text-secondary: #ffffffa6;
--ubisoft-card-button-bg: #3e434b;
--my-plan-text-color: #fff;
--card-container-border-color: #6b7584;
--card-container-box-shadow: #0000004d;
--ubisoft-plus-card-background: #020028;
--my-plan-capsule-background: #64646466;
--ea-play-card-background: linear-gradient(246deg,#ff4647 -23.99%,#0e1042 76.42%);
--actionButton-background: #3e434b;
--mosaic-tile-bg: #e6e6e6;
--mosaic-copy-color: #000;
--video-fragment-btn-bg: rgba(0,0,0,.6);
--video-fragment-btn-bg-hover: rgba(0,0,0,.8);
--video-fragment-btn-color: #fff;
--pd-hero-bg: #171717;
--pd-hero-text: #fff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/xbox-com