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.
Overwatch League uses a fairly sparse color pallet consisting mostly of orange as a primary color, blue as an 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.
Primary brand coloring
Secondary brand coloring, used for accent colors
Neutral supporting color to help with page structure
Black color for darks
White color for lights
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.
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.