Xbox.com

The Xbox.com design system is a high-contrast, energetic experience that balances deep digital visuals with striking lime accents. Dominant dark imagery is anchored by a stark white background and punctuated by vivid green calls to action, creating an immediate sense of urgency and gaming excitement. A rigid, square aesthetic through hard edges pervades the interface, reflecting the precision and digital nature of console gaming. Prioritize Lumi Green (#107c10) for primary calls to action to maintain brand visibility and urgency. Use Electric Lime (#9bf00b) purely for secondary interactive backgrounds, such as 'Game Pass' buttons, ensuring high contrast with Rich Meadow (#054b16) text. Maintain a rigid 0px border-radius for all interactive components (buttons, badges) to reinforce the sharp, digital aesthetic. Employ Absolute Zero (#000000) for all main text and headings on light backgrounds to maximize readability and impact. Leverage the Segoe UI font family for most textual content, varying weights from 400 to 700 to establish hierarchy without introducing new typefaces. Utilize a compact spacing density, frequently using 4px to 12px for element gaps to keep information tightly packed and immersive. Avoid using rounded corners on any primary UI elements; the brand relies on a sharp, zero-radius aesthetic. Do not use generic blue as an interactive color; reserve Deep Space Blue (#0066ff) for specific illustration accents only. Refrain from using shadow-based elevation; depth is created through color contrast and layered sections, not drop shadows. Do not introduce additional font families beyond Segoe UI and SegoeProBlack; the type system is intentionally constrained for a consistent brand voice. Avoid using low-contrast text-on-background combinations; always ensure AAA or at least AA accessibility standards are met with high contrast pairs. Do not soften or desaturate brand greens; the vibrant, vivid nature of Lumi Green and Electric Lime is key to the energetic gaming feel.