Overwatch Game Site Styleguide - Overview

This UI toolkit is a highly-modular design system for rapid web page development. It contains different materials that can be assembled into more complex page layouts.

This guide contains real working examples, code snippets, documentation, and style guidelines.

Brand Colors

Overwatch uses a fairly sparse color pallet with a primary color, accent, and gray, white and black for structure. The colors are used at various transparency levels to create depth and layering, and are detailed below. The first four columns are the colors overlayed across a background of orange, blue, gray and white, while the second set of columns are a secondary gradiation of over the same background colors.

orange brand

Primary brand color

blue brand

Secondary brand color

plumb brand

Tertiary brand color


The Overwatch Game Site Styleguide uses mod-scale to create natural ratios of text sizes, in order to create a pleasing look and enforce consistency. As a baseline, all <h1> through <h6> tags will lay out correctly, and .u-h1 through .u-h6 classes are available to mimic the same look and feel for any element.

For text elements, .u-ui1 through .u-ui6 can create UI elements of the appropriate text size, though the modifier classes should not be used for raw text as they also change line-heights to be appropriate. The standard text size is the same as .u-ui4.

This is an h1

This is an h2

This is an h3

This is an h4

This is an h5
This is an h6

This is a ui1

This is a ui2

This is a ui3

This is a ui4

This is a ui5
This is a ui6