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.

  • $fedora-blue
    #3c6eb4
  • $fedora-dark-blue
    #294172
  • $fedora-magenta
    #db3279
  • $fedora-orange
    #e59728
  • $fedora-green
    #79db32
  • $fedora-purple
    #a07cbc
  • $color-white
    #ffffff
  • $gray-lightest
    #f7f7f9
  • $gray-lighter
    #eceeef
  • $gray-light
    #d5d5d5
  • $gray-medium
    #808080
  • $gray
    #55595c
  • $gray-dark
    #373a3c
  • $color-black (TODO: not upstream)
    #000000
  • $brand-primary
    #428bca
  • $brand-success
    #79db32
  • $brand-warning
    #e59728
  • $brand-danger
    #db3279
  • $brand-info
    #a07cbc
  • Blue Pattern
    pattern-blue.png
  • Light Gray Pattern
    pattern-gray.png
  • Medium Gray Pattern
    pattern-medium-gray.png
  • Dark Gray Pattern
    pattern-dark-gray.png
  • Workstation Pattern
    pattern-workstation.png
  • Server Pattern
    pattern-server.png
  • Atomic Pattern
    pattern-atomic.png

Primary Font

Primary font: "Open Sans", "Helvetica", "Arial", sans-serif;
Primary font italic: "Open Sans", "Helvetica", "Arial", sans-serif;
Primary font bold: "Open Sans", "Helvetica", "Arial", sans-serif;
900 weight
700 weight
500 weight
300 weight

Headline Font

Headline font: "Montserrat", sans-serif;
Headline font italic: "Montserrat", sans-serif;
Headline font bold: "Montserrat", sans-serif;
900 weight
800 weight
700 weight
600 weight
400 weight
300 weight
200 weight
100 weight
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)