Design system samples

In order to provide a standard quality for The Coalition Web team, below are requirement that should be met. The design system is reusable, scalable, shareable among teams, and meets Microsoft Content Accessibility standards. This helps ship web MVP features faster and increase the design efficiency as the video game websites evolve. Components are shared among Engineers, QA, Esports, Partners, and Product Managers.

Typography

Create the right size of font and font design that is suitable for each website and space the text accordingly so that it’s easy to read in different languages.

Gears Tactics typeface: Industry

Desktop scale converted to em.

  • body { font-size: 18px; }
  • h1 { font-size: 3.33em; line-height: 1.1; } /*60/18*/
  • h2 { font-size: 2.22em; line-height: 1.2; } /*40/18*/
  • h3 { font-size: 1.66em; line-height: 1.2; } /*30/18*/
  • h4 { font-size: 1.11em; line-height: 1.5; } /*20/18*/
  • h5 { font-size: 1em; line-height: 1.5; } /*18/18*/
  • h6 { font-size: 0.88em; line-height: 1.6; } /*16/18*/
  • p { font-size: 1em; line-height: 1.6; } /*18/18*/

Mobile scale converted to em.

  • h1 { font-size: 2.5em; line-height: 1.1; } /*40/16*/
  • h2 { font-size: 1.875em; line-height: 1.2; } /*30/16*/
  • h3 { font-size: 1.25em; line-height: 1.4; } /*20/16*/
  • h4 { font-size: 1.125em; line-height: 1.5; } /*18/16*/
  • h5 { font-size: 1em; line-height: 1.5; } /*16/16*/
  • h6 { font-size: 0.75em; line-height: 1.6; } /*12/16*/
  • p { font-size: 1em; line-height: 1.6; } /*16/16*/

Text

Where breakpoint is one of

  • xs - set styles from 0px and up (phones)
  • sm - set styles from and up (large phone)
  • md - set styles from 600px and up (tablet)
  • lg - set styles from 958px and up (desktop)
  • xl - set styles from and up (large desktop)

Where alignment is one of:

  • left
  • right
  • center

Iconography

Mobile icons

Opt for minimalistic user interfaces and interactions to avoid clutter, since about half of our users are viewing from a small screen on mobile. Web icons are simpler than the game's to keep it clean and distraction-free.

Icons are designed to be modern, simple, bold, and geometric to ensure clarity and readability at very small sizes. Stroke weight, shapes, and corner radiuses must be consistent.

Icons

Colors

These colors are added to the asset panel in Adobe XD and can easily be changed to your custom brand colors. Color contrast ratio requires 4.5 and design must be AA compliant.

Gears 5 color palette

Gears 5 colors

Gears Tactics color palette

Gears Tactics colors

Gears Franchise and Esports color palette

Gears of War and Esports colors

Hero

Desktop image

16:9 aspect ratio images at least 2560 x 1440 pixels JPEG, 72 pixels/inch. 3840 x 2160 4K is nice to have.

Mobile image

1:1 aspect ratio images 2000 x 2000 pixels JPEG, 72 pixels/inch (9:16 centered safe zone).

Copy

  • Desktop line length of 75 character width.
  • Try to limit paragraph to five lines – not sentences. Two to three sentences is often enough.
  • The headlines is to grab the reader instantly and the body toward readability.

Mobile controls

Native iOS and Android keyboard pushes assets differently. Use native mobile controls for web components, such as control pickers for ESRB mature +17 age gate.

Touch targets

Use 45px touch target with minimum space between elements of 8px. This is about 48 x 48 decimal places (dp) or 44 x44 point conversions (pt) touch target.

Gestures

User interface and gestures satisfy both iOS and Android users. Using standard hand gestures, such as tap, drag, flick (scroll or pan), swipe, double tap, pinch, and touch and hold on keyboard.

Action menu

Apply action menu triggers that slides up from the bottom. This interaction works similar to iOS human interface and Android material design.

Tab bars

Fixed bottom tab bar displaying up to five tabs for global navigation. A More tab is used to display extra tabs and slides up a drawer when triggered. Tablet amd mobile screens tab bar consists maximum of five icons per row.

Buttons

Full-width and disabled buttons.

Gears 5 buttons

Coming soon.

  • Primary
  • Secondary
  • Tertiary
  • Quaternary

Gears Tactics buttons

Coming soon.

  • Primary
  • Secondary
  • Tertiary
  • Quaternary

Franchise and Esports buttons

Coming soon.

  • Primary
  • Secondary
  • Tertiary
  • Quaternary

My Account

Mobile signed in dropdown

Mobile not signed in dropdown

Footers

The Xbox brand logos utilize a bold, flat, 1-color design. Do not modify the Xbox logo. The logo is available in horizontal and stacked versions in either green or white. Do not make the logo black.

Desktop and mobile specification

Light theme

Dark theme

Notification banner

Display notification call-to-action (CTA) banner at end of each news post. The action button goes to the Manage Notifications Settings page.

Gears 5 - show

Gears 5 - hide

Push notification

Ensure web progressive enhancement functions works as designed especially for Chrome, Edge, and Safari browsers on iOS and Android devices. When designing mobile-first, make sure that it feels like an iOS and Android app while using progressive web application (PWA) push notifications.

Gears5.com, Gearstactics.com, and Gears.gg have push notifications for users to subscribe on most platforms and browsers. This engages our users without a native app and increases our traffic. Gears5.com push notifications was released in October 2020 and subscriptions has increased by 25% in December 2020.

If web push notifications is not supported, hide all notification features.

Push notifcation

Push not subscribed

If not subscribed, display notification with plus icon and off switch toggle.

Push notifcation

Permission prompt

Browser support notifications: Edge, Firefox, Chrome, Safari MacOS, Opera, Android Browser, and Opera mini.

Push notifcation

Push subscribed

If subscribed, display notification with checkmark icon and on switch toggle.

Push notifcation

Disabled - block

Display disabled switch toggle. If the user clicks/taps the "Block" button in the permission prompt, the web app will not be able to ask the user for permission again. They will have to manually "unblock" the app by changing its permission state, which is buried in a settings panel.

Xbox banner

Xbox brand logos

  • Xbox brand logos utilize a bold, flat, 1-color design.
  • Do not modify the Xbox logo.
  • The logo is available in horizontal and stacked versions in either green or white.
  • Do not make the logo black.
  • Xbox green HEX #107C10, RBG (16,124,16).

Xbox Game Pass digital button label options

Always provide arial-label, such as "Join now, learn more about joining Xbox Game Pass Ultimate".

  • "Join Now"
  • "Buy Now"
  • "Play with Game Pass"
  • "Join Xbox Game Pass"
  • "Get it Now"
Xbox Game Pass in most instances uses the short "GAME PASS" logo. There is an alternate version of the Xbox Game Pass logo for use in some cases detailed in the Xbox Game Pass portion of the guidelines.

Desktop 1920 and mobile 414 specifications

Light theme

Dark theme

Cover sign in

  • Always display current Operation background image and lockup.
  • 130 x 130 px XBL profile image, 2px solid border line #FFFFFF.

Desktop and mobile - not signed in

Desktop and mobile - signed in

Next case study