Gray Palette

overview

Mantine's gray palette is specifically designed for light mode:

• It offers a large number of whites and light grays (6) for backgrounds. It starts at #F8F9FA, not pure white.
• It offers very few dark grays (3-4) for text. It doesn't include pure black.

It has a blue tint (slate gray).

values

use in backgrounds

• Backgrounds can be pure white, such as the site's global background or controls' background.

• Controls' background can go darker on hover. This is the case for buttons, and Select's options: gray.1

use in text

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 (optional)
  • some headings
  • body text
  • input label
  • button label