Gray Palette

the gray palette

the gray palette is used in light mode. It has a blue tint (slate gray). It goes from white to very dark gray.

• gray.0 white: #F8F9FA
• gray.1 white: #F1F3F5
• gray.2 white gray: #E9ECEF
• ...
• gray.6 gray: #868e96
• gray.7 dark gray: #495057
• gray.8 very dark gray: #343A40
• gray.9: very dark gray: #212529

use in light mode

• The background is usually pure white. This is the case for the app background, for buttons and for inputs.

• The background may go darker on hover. This is the case for buttons, and for the options of a select: gray.1

• The text is black:

  • pure black text:
    • some headings
    • body text
    • input label
    • button label
  • gray 9 (readable black for body text)
  • gray 8 (readable black)
  • dark 7 (dimmed black)
  • gray 6 (gray) for secondary text, and input description