Guidelines

Design
Code
keyboardshortcuts
d
Design
c
Code
,
Previous Section
.
Next Section
/
Toggle Preview Environment
[
Previous Platform
]
Next Platform
command +
Scroll to Top
command +
Scroll to Bottom

Allow for practical identification in tagging features.

Tagging colors represent the teams participating in a tagged event. It’s up to the user to assign those colors for an updated tagging interface.

These colors were chosen to effectively associate on-screen colors with team uniforms.

Usage

Text Color Contrast

Each tagging color passes accessibility standards when used with the appropriate content color.

  • Use Content White with most tagging colors: Grey, Black, Red, Green, Blue and Purple
  • Use Content Black with lighter tagging colors: White, Yellow and Orange
colors-tagging-content-dont

Don'tuse Content White on lighter tagging colors.

colors-tagging-content-do

Douse Content Black on White, Yellow and Orange.

Font Weight

Even with the appropriate text color, some tagging base colors only pass accessibility at a lower threshold (3:1). Because of this, stick to bold text on base tagging colors.

Shade tagging colors are suitable for all text weights and sizes.

colors-tagging-bold-dont

Don'tuse regular weighted text on base colors.

colors-tagging-bold-do

Douse bold text on base colors and regular weighted text on shades.

Values

ColorNameRGBA
Tagging Content White255, 255, 255, 1.0
Tagging Content Black0, 0, 0, 1.0
Tagging White252, 251, 252, 1.0
Tagging White Shade197, 197, 197, 1.0
Tagging Grey114, 116, 118, 1.0
Tagging Grey Shade89, 90, 92, 1.0
Tagging Black60, 60, 60, 1.0
Tagging Black Shade41, 41, 41, 1.0
Tagging Yellow255, 221, 0, 1.0
Tagging Yellow Shade227, 192, 0, 1.0
Tagging Orange255, 144, 0, 1.0
Tagging Orange Shade219, 123, 0, 1.0
Tagging Red201, 26, 26, 1.0
Tagging Red Shade160, 20, 20, 1.0
Tagging Green85, 167, 52, 1.0
Tagging Green Shade59, 131, 29, 1.0
Tagging Blue45, 131, 201, 1.0
Tagging Blue Shade36, 104, 160, 1.0
Tagging Purple98, 18, 150, 1.0
Tagging Purple Shade72, 11, 111, 1.0