Gray Palette

overview

Mantine's gray is a slate gray palette (blue tint), and is designed for light mode:

• It offers several whites for backgrounds (but doesn't include pure white, instead, it starts at #F8F9FA.)
• It offers a few dark grays for text. It doesn't include pure black.

note on light mode use

The following consideration usually apply for light-mode:

• The background can be pure white. It is the site global background or some controls background.

• The background can 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 its importance and role:

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