Overwatch League 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 coloring

blue brand

Secondary brand coloring, used for accent colors

gray brand

Neutral supporting color to help with page structure

black brand

Black color for darks

white brand

White color for lights

Hero Colors

Each hero has a primary and secondary color specific to them, and a gradient that moves from top to bottom of the primary to secondary color.

Ana
Bastion
Doomfist
D.Va
Genji
Hanzo
Junkrat
Lúcio
McCree
Mei
Mercy
Orisa
Pharah
Reaper
Reinhardt
Roadhog
Soldier: 76
Sombra
Symmetra
Torbjörn
Tracer
Widowmaker
Winston
Zarya
Zenyatta

Typography

The Overwatch League 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