Global
The global category defines visual elements such as colour, font families, and motion. While not technically UI components, these elements are critical to document in the pattern library.
-
$cape-code
rgb(63, 80, 76) -
$wild-watermelon
rgb(255, 81, 115) -
$fire-bush
rgb(237, 160, 52) -
$bitter-lemon
rgb(198, 225, 0) -
$cerulean
rgb(36, 165, 212)
-
$color-white
#fff -
$colour-grey-lightest -
$colour-grey-lighter -
$colour-grey-light -
$colour-grey
#55595c -
$colour-grey-dark -
$colour-black
#000
-
$colour-utility-alert -
$colour-utility-error -
$colour-utility-notice -
$colour-utility-sucess
-
$colour-corp-facebook -
$colour-corp-twitter -
$colour-corp-google-plus -
$colour-corp-linkedin -
$colour-corp-pinterest -
$colour-corp-tumblr -
$colour-corp-youtube -
$colour-corp-instagram
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Sans Serif font: "Proxima Nova", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
Sans Serif font italic: "Proxima Nova", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
Sans Serif font bold: "Proxima Nova", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
Serif font: "Baskerville", "Libre Baskerville", Georgia, "Times New Roman", Times, serif;
Serif font italic: "Baskerville", "Libre Baskerville", Georgia, "Times New Roman", Times, serif;
Serif font bold: "Baskerville", "Libre Baskerville", Georgia, "Times New Roman", Times, serif;
Monospace font: "Hack", Menlo, Monaco, Consolas, "Courier New", monospace;
Serif font italic: "Hack", Menlo, Monaco, Consolas, "Courier New", monospace;
Serif font bold: "Hack", Menlo, Monaco, Consolas, "Courier New", monospace;
Slab font: "Sigmar One";