Skip to content

Update severity badges

Background:

From this issue: #34352 (closed) we are redesigning our severity badges to be more clear, quickly identifiable, scaleable, and accessible.

Proposal:

New badge designs:

Old badge New badge New badge color
Screen_Shot_2020-01-27_at_1.26.43_PM Severity_critical-label #8B2615
Screen_Shot_2020-01-27_at_1.27.21_PM Severity_high-label #C0341D
Screen_Shot_2020-01-27_at_1.25.38_PM Severity_medium-label #FCA429
Screen_Shot_2020-01-27_at_1.25.47_PM Severity_low-label #FDBC60
Screen_Shot_2020-01-27_at_1.28.21_PM Severity_info-label #418CD8
Screen_Shot_2020-01-27_at_1.25.53_PM Severity_unknown-label #919191

Text styling:

  • Severity label text is always in GitLab's default paragraph style and color (unless defined otherwise)
  • Severity label text is always sentence case (unless defined otherwise)
  • Severity label text always has 8px padding between the icon and the severity text

Severity icon:

  • Colors defined in table
  • Icon is 12px x 12px

Locations to change:

These locations use the same list styling/component

Note: In the Dependency list all the items should be left aligned.

Location Before After
Project, Group, and Instance security dashboard, Pipeline vulnerability list TBA
Vulnerability charts Screen_Shot_2020-01-27_at_4.06.52_PM new-severity-labels
Vulnerability modal vulnerability-modal-today vulnerability-modal-proposed
Dependency List all-tab all-tab-new-severities
Edited by Lukas Eipert