Skip to content

Visual updates to severity badges

Problem

Until now in devopssecure we've been using a set of colors for our vulnerability scale that don't conform to the Pajamas use of color https://design.gitlab.com/product-foundations/colors. There multiple problems to resolve with how we indicate vulnerability severity, and status.

  1. use of brand colors in badge designs
Metric Badge
Screen_Shot_2019-10-17_at_12.09.26_PM Screen_Shot_2019-10-17_at_12.10.55_PM
  1. Inconsistent badge design vs design system badges makes for using gitlab-ui components difficult and any change we want to make will take longer and require more effort.
Security Badge Gilab variant
Screen_Shot_2019-10-17_at_12.22.21_PM Screen_Shot_2019-10-17_at_12.23.46_PM

  1. Lack of color ramp / scale makes identifying criticality difficult and the lack a defined scale will cause issues in the future as we mature.

  2. The current color documentation in pajamas does not meet our scale needs and should be adjusted or have an alternate for severity.

Pajamas documentation:

Blue indicates a current or active state. It communicates: management, progress, connectivity, or organization. Green indicates success. It communicates: save, create, add, available, done, approved, or resolved. Orange indicates ‘attention-required.’ It communicates: warning, pending, missing, or impeded progress. Red indicates a problem. It communicates: critical states, destructive actions, errors, fails, removals, or declines.

Secure color usage:

Red: indicates a critical severity / new vulnerability in the MR / blacklisted license Orange: indicates a high severity / dependency has a vulnerability Blue: All severities in the history chart Green: fixed vulnerability in the MR / approved license / no vulnerabilities associated with a dependency Dark Gray: Unknown / Experimental / Undefined severity / New license Light Gray: Low severity

Goals:

  • Solution uses a color scale but does not solely rely on color
  • Solution includes a text label
  • Solution is accessible
  • Solution does not conflict with our iconography system
  • Solution is simple and easily understandable
  • Solution considers size and scale and should drive for compactness if possible

Proposal:

Let's look at our color usage as a system that can grow to fit our needs as both devopssecure ~"devops::defend" mature. We should achieve this by using the current colors and design elements defined in the gitlab pattern-library and Pajamas so as not to create unnecessary components unless they are absolutely needed.

Badges

New severity badges
Final_symbols
Secure + Defend badge and color system
AppSec_Symbol___Color_system
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

In use examples

Dashboard lists / Pipeline list (today)
In_use__IRL__small
Modal
In_use__Vuln_modal
MR widget
In_use__MR_Widget

Areas that need to be addressed

Location Area Change Issue #
Project list Severity column swap current badges for new labels #199134 (closed)
Project list Severity counters consider new design that aligns with new colors #199109 (closed)
Group dashboard Severity column swap current badges for new labels #199134 (closed)
Group dashboard Vulnerability chart swap badges for new labels #199179 (closed)
Group dashboard Project status grades Consider UI treatment for the Grades #199126 (closed)
Group dashboard Project status grades Swap current badge for new labels #199126 (closed)
Instance dashboard Severity column swap current badges for new labels #199134 (closed)
Instance dashboard Vulnerability chart swap badges for new labels #199179 (closed)
Instance dashboard Project status grades Consider UI treatment for the Grades #199126 (closed)
Instance dashboard Project status grades Swap current badge for new labels #199126 (closed)
Dependency list Dependency line expanded Swap current badge for new labels #199187 (closed)
Pipeline list Severity column swap current badges for new labels #199134 (closed)
MR Report Severity column swap current text labels for new labels #199145 (closed)
Vulnerability info modal Severity row swap current badges for new labels #199188 (closed)
Vulnerability page Details > severity row swap current text labels for new labels -
Docs Projects > Application Security Document labels and definitions of or new Severitys -
Design kit Sketch>Pattern-library>icons Add new symbols to icons sheet gitlab-design#912 (closed)
Design kit Sketch>pattern-library create severity molecules as symbols gitlab-design#912 (closed)
Design kit Figma>Symbols>icons Add symbols to figma/icons -
Design kit Figma>Symbols create severity molecules as symbols -

Steps to implementation

  • Collect a consensus on this direction
  • Identify all areas that need to be changed in the product
  • Align with PMs on this change
  • Create issue to add symbols to GitLab-Svgs
    • Merge additions to GitLab-Svgs
  • Create issues to update the UI
  • Create issues to update the Design kit
Edited by Andy Volpe