Xbox Brand Design System Deep Dive

1. Brand Overview

Xbox’s design language is exactly what you’d expect from a brand that sits at the intersection of gaming culture, Microsoft’s corporate design DNA, and the entertainment industry. It’s bold but not garish, clean but not sterile. The vibe is confident, slightly aggressive in its use of high-contrast color, and unapologetically digital-first.

The primary audience here is gamers — console loyalists, PC gamers, and cloud gaming adopters — but the site also caters to parents, casual players, and tech shoppers. That’s why the system balances heavy gamer cues (deep greens, high-contrast buttons, aggressive hover states) with Microsoft’s accessibility and clarity benchmarks.

Xbox leans into a dark-neutral base with bursts of green. This isn’t just “green” — the main brand green (#107c10) is deep, saturated, and earthy, paired with a high-energy accent (#9bf00b) that practically glows. This is the same psychological play you see in sports branding: a stable base color that signals reliability, with a neon accent that screams “action.”

Typography is corporate-modern — Segoe UI everywhere — which ties Xbox back to Microsoft’s broader ecosystem. The result is consistent cross-product identity: Windows, Office, Xbox all feel like they live in the same visual universe.

Interactions are not shy. Hover states change colors dramatically, active states scale down with visible dashed borders, focus states have full outlines. This is a tactile, gamepad-friendly design language translated into web UI. It’s accessible, but it also feels like you’re “pressing” something.

If you’re building for Xbox, you’re building for speed, clarity, and high-impact visuals. This is not a brand that rewards subtlety in interactive elements. If a button is clickable, it’s going to look clickable — with hover, active, and focus states that make it impossible to miss.

2. Color System

2.1 Primary Colors

The primary brand color is #107c10 (rgb(16, 124, 16)). It’s a deep green — darker than Nintendo Switch’s red, less corporate than PlayStation’s blue. It has weight. It anchors the interface.

Psychologically, deep green is associated with stability, balance, and nature — but in the Xbox context, it’s more about identity. Green has been Xbox’s signature since the original console. Competitors go saturated primary (red for Nintendo, blue for PlayStation), Xbox stays green, giving them a unique color space in gaming.

The secondary “energy” accent is #9bf00b (rgb(155, 240, 11). This is bright, almost neon. It’s used for hover states, link highlights, and call-to-action buttons. It’s the “press me” color.

They also use a deeper accent green #054b16 (rgb(5, 75, 22)) for certain text and CTA states — more muted, works well on light neon backgrounds.

2.2 Complete Palette

2.3 Color Relationships

Contrast is high. Black (#000) with white (#fff) is obvious. The bright accent (#9bf00b) against black or dark gray passes WCAG AAA easily. Deep green (#107c10) against white is borderline AAA for large text, solid for UI elements.

Light-on-dark is the default. Dark backgrounds dominate, with white or neon text. Accessibility is clearly considered — hover states don’t just change color; they often change brightness and opacity to ensure visibility.

Dark mode? Essentially yes — the base palette is dark-first, with light text. They don’t have a light theme variant.

2.4 Usage Guide

• Works: Bright neon (#9bf00b) on black — maximum gamer energy.
• Works: Deep green (#107c10) with white text — brand-consistent and readable.
• Avoid: Neon yellow (#ffd800) on white — fails contrast.
• Avoid: Medium gray text (#616161) on dark gray — low contrast unless used for secondary meta info.

3. Typography

3.1 Font Families

Fonts are Microsoft-standard:

• Primary: Segoe UI
• Fallbacks: SegoeUI, Helvetica Neue, Helvetica, Arial
• Some headings/links use SegoeProBlack (heavier, 900 weight).
• Icon font: MWF-MDL2 — Microsoft’s web glyph set.

No Google or Adobe fonts — all custom/OS-native.

3.2 Type Scale

3.3 Hierarchy

Headline sizes jump dramatically — 62px hero H1s drop to 34px for subheads, then down to 20px/16px for body-level headings. SegoeProBlack is used for heavy emphasis — big, bold links or section titles. Body copy sits at 16px or 13px depending on context.

This scale reads well on both desktop and console-screen sizes. Large titles feel game-like, smaller text keeps UI compact. The low line heights for big headings make them feel tight and aggressive — no airy spacing here.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px scale. Common values:

4.2 Layout

Breakpoints are extensive — they’ve defined dozens of exact pixel triggers (319px, 360px, 768px, 1080px, 1366px, 1920px, etc.). This suggests highly responsive, pixel-tuned layouts — probably to match console screen sizes and specific device resolutions.

5. Visual Elements

Border Radius

Only two values observed:

• 10px — rare, on spans
• 50% — circular buttons, avatars

Mostly square corners — Xbox doesn’t do rounded rectangles much. Full circles are for avatars or specific icon buttons.

Shadows

Two shadows:

• rgba(0, 0, 0, 0) 0px 4px 8px 0px — transparent? Used as a placeholder for consistent layout.
• rgb(119, 119, 119) 2px 2px 2px 0px — subtle shadow, rare.

The UI is essentially flat — depth is created with borders, color changes, and state changes.

Borders

Common combos:

• 1px solid rgba(0,0,0,0.05) — light dividers
• 2px dashed rgb(255,255,255) — active/focus states on buttons
• Occasional solid grays (#d2d2d2, #cccccc) for inputs/tooltips.

6. Components

6.1 Buttons

Variant 1 — Text Button (Dark Gray Text)

Default:

• Background: transparent
• Text: #262626
• Padding: 16px 30px 16px 16px
• Border: transparent
• Radius: 0

Hover:

• Background: #505050
• Text: white
• Border: 1px solid rgba(0,0,0,0.2)
• Opacity: 0.7

Active:

• Background: #666666
• Text: white
• Border: 2px dashed white
• Transform: scale(0.9)

Focus:

• Background: #505050
• Border: 2px dashed white
• Outline: dashed black

Variant 2 — Action Toggle

Default:

• Background: rgba(0,0,0,0.4)
• Text: white
• Padding: 6px 0 8px

Hover/Active/Focus similar to Variant 1, but heavier font (700) at 18px.

Variant 3 — Circular Flipper Button

Default:

• Background: #2e2e2e
• Text: #cccccc
• Radius: 50%
• Transform: translateY(-22px)
• Opacity: 0

Active/Focus bring opacity to 1, with dashed borders.

Variant 4 — Call-to-Action Button

Default:

• Background: #9bf00b
• Text: #054b16
• Padding: 5px 20px 5px 22px
• Shadow: transparent 0 4px 8px

Hover:

• Color: white
• Transform: translateY(-4px)
• Opacity: 0.7

Active:

• Transform: scale(0.9)
• Color: white

Focus:

• Border: 2px dashed white
• Outline: dashed black

6.2 Links

Multiple styles:

• Black (#000) default, neon hover.
• Dark gray (#262626) default, neon hover.
• Deep green (#054b16) heavy weight, neon hover.
• White (#fff) heavy weight, hover keeps white.
• Medium gray (#616161) default, neon hover.

No underlines by default. Hover sometimes inherits text decoration.

6.3 Forms

Text inputs, checkbox, radio, select — none styled in extracted data (likely native or hidden). Borders for tooltips and listboxes use light grays.

6.4 Cards

Not explicitly defined, but shadows suggest flat cards with light borders.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-dark-gray: #262626;
  --color-medium-gray: #616161;
  --color-xbox-green: #107c10;
  --color-charcoal-gray: #333333;
  --color-deep-forest-green: #054b16;
  --color-bright-yellow: #ffd800;
  --color-bright-accent-green: #9bf00b;

  /* Typography */
  --font-primary: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial;
  --font-heavy: "SegoeProBlack", "Segoe UI", SegoeUI, Helvetica, Arial;
  --font-icon: "MWF-MDL2";
  --font-size-h1-hero: 62px;
  --font-size-h1-large: 46px;
  --font-size-h1-medium: 34px;
  --font-size-body: 16px;
  --font-size-small: 13px;
  --font-size-caption: 11px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-36: 36px;
  --space-48: 48px;

  /* Radius */
  --radius-md: 10px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-none: rgba(0,0,0,0) 0px 4px 8px 0px;
  --shadow-subtle: rgb(119,119,119) 2px 2px 2px 0px;
}

8. AI Coding Assistant Prompt

# Xbox Design System Specification

You are an Xbox design expert. Build UIs matching their visual language exactly.

## Brand Context
Xbox’s design language is dark, high-contrast, and gamer-centric. It uses deep greens with bright neon accents, square corners, and bold typography. Interactions are tactile and obvious — hover states change dramatically, focus states use dashed outlines.

## Color Palette
- Black: #000000 — Base backgrounds, header/nav
- White: #ffffff — Text on dark backgrounds
- Dark Gray: #262626 — UI text, logos
- Medium Gray: #616161 — Secondary text, footer links
- Xbox Green: #107c10 — Brand anchor, logos, accents
- Charcoal Gray: #333333 — Header text, profile pics
- Deep Forest Green: #054b16 — CTA text color
- Bright Yellow: #ffd800 — Rare highlights/promos
- Bright Accent Green: #9bf00b — CTAs, hover highlights

## Typography
- Primary: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial
- Heavy: "SegoeProBlack", "Segoe UI", SegoeUI, Helvetica, Arial
- Icon font: "MWF-MDL2"

| Level   | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| H1 Hero | 62px | 700    | 1.16        | Page titles |
| H1 Large| 46px | 700    | 1.22        | Section titles |
| H1 Med  | 34px | 400/700| 1.18        | Subheads |
| Body    | 16px | 400/600| 1.50/1.40   | Paragraphs |
| Link    | 15px | 900    | 1.30        | Nav links |
| Small   | 13px | 400-900| varies      | Captions, labels |
| Caption | 11px | 400    | 1.45        | Meta info |

## Spacing & Grid
Base: 8px grid. Scale: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 18px, 24px, 36px, 48px.
Map:
- Button vertical padding: 18px
- Button horizontal padding: 16px–30px
- Section gaps: 24px–36px

## Border Radius
- md: 10px — rare spans
- full: 50% — circular buttons, avatars
Mostly square components.

## Shadows & Depth
- shadow-none: rgba(0,0,0,0) 0px 4px 8px
- shadow-subtle: rgb(119,119,119) 2px 2px 2px
Depth mostly via borders and color changes.

## Component Specifications

### Primary Button
Default:
- background: #9bf00b
- color: #054b16
- padding: 5px 20px 5px 22px
- border-radius: 0
- border: 1px solid transparent
- font-weight: 900
- font-size: 15px
Hover:
- color: #ffffff
- transform: translateY(-4px)
- opacity: 0.7
Active:
- transform: scale(0.9)
- color: #ffffff
Focus:
- border: 2px dashed #ffffff
- outline: 2px dashed #000000

### Secondary Button (Text Button)
Default:
- background: transparent
- color: #262626
- padding: 16px 30px 16px 16px
- font-weight: 400
Hover:
- background: #505050
- color: #ffffff
- opacity: 0.7
Active:
- background: #666666
- border: 2px dashed #ffffff
Focus:
- outline: 2px dashed #000000

### Navigation Links
Default: no underline, palette color
Hover: neon green (#9bf00b), text-decoration: inherit

### Inputs
Tooltip/listbox border: 1px solid #cccccc or #d2d2d2
Focus states likely use dashed outline (consistent with buttons)

### Cards
Flat background, square corners, light borders

## Layout & Responsive Rules
- Breakpoints: multiple fixed pixel values: 360px, 768px, 1080px, 1366px, 1920px
- Page padding: multiples of 8px
- Grid gap: 8px–24px

## Interaction Rules
- Transitions: 150ms ease for hover/active states
- Focus indicators: dashed borders in contrasting colors
- Active states: scale down to 0.9 for press feedback

## DO List
- Use ONLY colors from palette
- Maintain 8px spacing grid
- Use Segoe UI for all text
- Make interactive states obvious
- Keep corners square unless full-circle avatar/button
- Use neon green for hover highlights
- Use dashed borders for focus/active

## DON'T List
- Don’t use shadows for depth — use borders
- Don’t round corners arbitrarily
- Don’t invent new greens — stick to #107c10 and #9bf00b
- Don’t hide focus indicators
- Don’t mix font families outside specified stack

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #9bf00b;
  color: #054b16;
  padding: 5px 20px 5px 22px;
  border: 1px solid transparent;
  border-radius: 0;
  font-weight: 900;
  font-size: 15px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: #ffffff;
  transform: translateY(-4px);
  opacity: 0.7;
}
.btn-primary:focus {
  border: 2px dashed #ffffff;
  outline: 2px dashed #000000;
}
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #262626;
  padding: 16px 30px 16px 16px;
  border: 1px solid transparent;
  font-weight: 400;
  font-size: 13px;
}
.btn-secondary:hover {
  background: #505050;
  color: #ffffff;
  opacity: 0.7;
}
```

Card:
```css
.card {
  background: #262626;
  border: 1px solid rgba(0,0,0,0.05);
  padding: 16px;
}
```

9. Summary

TL;DR — Xbox’s design system is dark, square, and unapologetically bold. Deep greens anchor the brand, neon greens pull you into action, and Segoe UI keeps it clean and legible. States are obvious, spacing is tight, and everything feels like it belongs on a game console.

Brand Keywords — gamer-bold, microsoft-clean, high-contrast, dark-first, tactile-interactive