Update severity badge with new designs in the Vulnerability charts
Background:
From this issue: #34352 (closed) we are redesigning our severity badges to be more clear, quickly identifiable, scaleable, and accessible.
Proposal:
Current design | Proposed Design |
---|---|
![]() |
![]() |
New badge designs:
Old badge | New badge | New badge color |
---|---|---|
![]() |
![]() |
#8B2615 |
![]() |
![]() |
#C0341D |
![]() |
![]() |
#FCA429 |
![]() |
![]() |
#FDBC60 |
![]() |
![]() |
#418CD8 |
![]() |
![]() |
#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:
- Group security dashboard
- Instance security dashboard
Edited by Andy Volpe