Badges

Badges are non-interactive labels which hold small amounts of information.

Specifications

Badges come in 3 defined heights:

  • Small: 14px
  • Default: 20px
  • Large: 28px

Badges should be centered vertically inside of their containing element.

Font weight: 700

ExampleHeightUse Case
Small Badge 14pxInside lists or other elements
Default Badge 20pxStand-alone or inside lists
Large Badge 28pxStand-alone for emphasis

Colors

ElementPropertyColor
Badge (Primary)Background
#0063a3
#019aeb
Text
#ffffff
#ffffff
Badge (Secondary)Background
#6a6e79
#6a6e79
Text
#ffffff
#ffffff
Badge (Tertiary)Background
#cbcdd6
#cbcdd6
Text
#252a2e
#252a2e
Badge (High Contrast)Background
#252a2e
#f1f1f6
Text
#ffffff
#171c1e
Badge (Success)Background
#006638
#1e8a44
Text
#ffffff
#ffffff
Badge (Warning)Background
#fbad26
#fbad26
Text
#252a2e
#252a2e
Badge (Danger)Background
#da212c
#da212c
Text
#ffffff
#ffffff