Gray Palette

description and use

It is a slate gray: it has a blue tint.

Mantine's light-mode theme makes use of this palette: it offers several whites for backgrounds, and a few dark grays for text. It does not include pure white, instead, it starts at #F8F9FA.

The following consideration usually apply for light-mode:

• The background may be pure white. It may be the app/site global background of the controls background.

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

• The text is black-ish or gray-ish depending on importance and role:

  • 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

values

• 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