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.
- #ffffff
- #cccccc
- #999999
- #666666
- #333333
- #000000
- rgb(255,64,129)
- #b3d4fc
- rgb(63,81,181)
- #46B6AC
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;
-
$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
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)
-
$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