What is Xbox's primary brand color?

Xbox runs a two-green voltage split. Heritage Xbox green '#107c10' owns the '--primary', '--success', '--green', and '--pd-hero-checklist-icon' CSS variables — 20 uses on the homepage split across text (6), background (8), and border (6). It carries the trust slot: checklist icons, status pills, and the heritage logo green. Game Pass lime '#9bf00b' is the second green and the load-bearing CTA fill — the 'JOIN GAME PASS' anchor button renders as 191px-wide lime on '#054b16' deep-green text in SegoeProBlack 900. The two greens never mix on the same surface: heritage green is the brand stamp, Game Pass lime is the marketing voltage.

What typography does Xbox use, and what should I substitute?

Two typefaces work together. **Segoe UI** is the Microsoft brand sans-serif covering display and body — H2 hero at 62px / weight 700 / lineHeight 72px / letter-spacing -0.62px, secondary H2 at 46px / weight 700 / lineHeight 56px / letter-spacing -0.46px, h2 tile titles at 24px / weight 700 / 30px lineHeight, body paragraphs at 20px / weight 400 / 24px lineHeight, body-small at 13px / weight 400 / 19.5px lineHeight, and a chrome-link tier at 11px / weight 400 / 16px lineHeight. **SegoeProBlack** is the proprietary uppercase display face — 15px / weight 900 / lineHeight 18.5px on CTA labels and tile eyebrows. If Segoe UI is unavailable, Inter at the same weights substitutes cleanly; for SegoeProBlack, Inter Black 900 with text-transform uppercase is the closest match.

What does Xbox's shape vocabulary look like?

There is no card-radius rhythm — the captured page declares exactly one non-zero radius value, '50%', and that's reserved for circular feature icons. Every chrome surface (buttons, tiles, hero bands, alert ribbons, search input) renders at 0px corners. The JOIN GAME PASS CTA is a 32px-tall sharp rectangle, not a pill. Color-block tiles share a 0px corner family even when stacked or nested. The brand position is hard-edged industrial: where PlayStation pills round to 9999px and Nintendo cards anchor on 12px, Xbox refuses radius entirely and lets the tile fills do the visual separation work.

Does Xbox use dark mode?

The captured surface is a single dark-canvas commitment, not a light/dark toggle. The hero band sits at '#171717' (--pd-hero-bg), the deep ink runs '#000000' (--dark, --secondary), the workhorse gray is '#616161', and the body text on dark tiles renders in '#ffffff' (--white, --pd-hero-text, --light). The light-mode tiles that DO appear (yellow '#ffd800' alert ribbon, green '#107c10' Game Pass tile interior with black text) are scoped per-tile rather than triggered by a top-level theme — the entire page is one canvas, with tile fills providing the contrast steps. There is no system-level dark/light switch.

Can I use this DESIGN.md to build an Xbox-style React project?

Yes — the file is structured for AI tools that read design tokens. Feed it to Claude, Cursor, or Copilot and the agent will produce React components that match Xbox's actual chrome: 0px-corner color-block tiles on the dark '#171717' canvas, SegoeProBlack uppercase eyebrow labels at 15px / weight 900, lime '#9bf00b' CTAs on deep-green text, the yellow alert ribbon at '#ffd800', and the Segoe UI display ladder from 62px down to 11px. Every hex, font name, and spacing step is a quoted token ready to paste into Tailwind config, CSS custom properties, or a shadcn theme.

What's missing from this DESIGN.md spec?

Several surfaces fall outside the captured homepage. The Xbox Store flow (PDP, cart, checkout) and Xbox account sign-in pages use a denser data layout that this homepage extraction does not cover. The Xbox cloud-gaming player UI, the Game Bar / console dashboard chrome, and the per-game theming for first-party launches (Forza, Halo, Gears) are out of scope — those often borrow per-title brand colors outside the documented system. The Bootstrap-derived semantic palette ('--blue', '--red', '--orange', '--purple', '--teal', '--cyan', '--pink', '--indigo') is declared on ':root' but used at 0 places on the captured page; its real usage likely lives on error pages and form-validation surfaces not exercised here. Mobile responsive screenshots were not captured directly. Motion (the hover lifts on tiles, the auto-rotating hero carousel, the 200ms transitions) is not narrated. No cookie banner dismissal during capture means a small region of the bottom of the screenshot may include consent chrome rather than the live news strip.

Xbox Design System

Xbox.com's design system as a DESIGN.md file.

About Xbox DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source xbox.com

Gaming & Entertainment
Consumer Electronics

Xbox.com is what a console brand looks like when it commits to the color-block tile as the page's atomic unit. The home surface stacks a near-black "#171717" hero band over a vertical mosaic of large rectangular tiles — green Game Pass slabs, yellow ad alerts, red game-art panels, black product cards — each one capped in a 13px uppercase SegoeProBlack eyebrow ("XBOX GAME PASS", "GAMES", "ACCESSORIES") and titled at 24px weight 700 Segoe UI. Where PlayStation runs a three-canvas chapter rhythm and Nintendo runs a 12px-radius catalog grid on white, Xbox runs a hard-edged tile collage: every surface is a rectangle, every corner is 0px, and the tile fill colors do the structural work that hairlines and shadows would do elsewhere.

This file packages the chrome as a Google Labs DESIGN.md spec. Inside: 23 color tokens covering the two-green voltage (heritage "#107c10" and Game Pass lime "#9bf00b"), the dark canvas ladder ("#000000" / "#171717" / "#262626"), the gray ink ladder ("#616161" workhorse, "#333333" deep, "#505050" mid), the yellow alert "#ffd800", the Bootstrap-derived semantic palette (--blue "#0067b8", --red "#dc3545", --orange "#d83b01", --purple "#8661c5", --teal "#008575", --cyan "#30e5d0", --pink "#e83e8c", --indigo "#243a5e") declared as tokens but at 0 page uses; 12 typography roles split across Segoe UI body and SegoeProBlack display/CTA; a 4-step radius scale where 0px carries every surface and 50% appears only on circular feature icons; an 8-step spacing rhythm extracted from the page's actual padding values (2px, 4px, 5px, 8px, 16px, 24px, 36px, 43.2px, 72px); and 18 component recipes covering the JOIN GAME PASS lime button, the dark hero band, the color-block tile family, the yellow alert ribbon, and the SegoeProBlack uppercase eyebrow label.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will produce React components that match Xbox's actual chrome — lime CTAs on dark text, SegoeProBlack uppercase eyebrows, sharp 0px tiles on a dark canvas, and the yellow alert ribbon. Or reference the tokens directly when building any storefront where the product mosaic is the hero. The system's value as a study is that it proves a console brand can refuse Nintendo's white-canvas catalog AND PlayStation's chapter rhythm — the tile collage is its own grammar, and the two-green split (heritage versus Game Pass) is the named voltage move worth stealing.

What makes it distinct

Two-green voltage systemheritage Xbox green '#107c10' for trust slots, Game Pass lime '#9bf00b' for the load-bearing CTA fill on dark '#054b16' ink
SegoeProBlack at weight 900every CTA renders in proprietary uppercase 15px black with no tracking softening, the brand's typographic muscle move
Sharp 0px corners on every chrome surfaceonly '50%' radius appears (circular feature icons), no card-radius rhythm at all
Yellow alert eyebrow '#ffd800' on black inkthe persistent badge format that lets each color-block tile shout its product category
Bootstrap semantic palette tokenized but unused on chrome'--blue', '--red', '--orange', '--purple', '--teal' all declared at 0 page uses, scoped to error/dev surfaces only

Live at xbox.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

xbox.com

Explore Xbox

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Xbox design system FAQ

Common questions about Xbox's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Xbox — official site

The live source of this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Xbox in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→