global

The global category defines visual elements such as color, font families, and motion. While not technically UI components, these elements are critical to document in the pattern library.

  • $color-brand-green
    #5C832F
  • $color-brand-brown
    #825534
  • $color-white
    #ffffff
  • $color-gray-02
    #f7f9f9
  • $color-gray-15
    #d9d9d9
  • $color-gray-35
    #a5a5a5
  • $color-gray-50
    #808080
  • $color-gray-65
    #595959
  • $color-gray-73
    #444444
  • $color-gray-87
    #222222
  • $color-black
    #000000
  • $color-utility-positive
    #03804d
  • $color-utility-positive-subtle
    #d4f3e6
  • $color-utility-caution
    #a59b15
  • $color-utility-caution-subtle
    #fffecf
  • $color-utility-negative
    #b12a0b
  • $color-utility-negative-subtle
    #fdded8
  • $color-utility-neutral
    #0192d0
  • $color-utility-neutral-subtle
    #d3f2ff
Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
Secondary font: Georgia, Times, "Times New Roman", serif;
Secondary font italic: Georgia, Times, "Times New Roman", serif;
Secondary font bold; Georgia, Times, "Times New Roman", serif;
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)