Palette

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Color

<Box color="primary.main">…
<Box color="secondary.main">…
<Box color="error.main">…
<Box color="text.primary">…
<Box color="text.secondary">…
<Box color="text.disabled">…
<Box color="text.hint">…

primary.main

secondary.main

error.main

text.primary

text.secondary

text.disabled

text.hint

Background color

<Box bgcolor="primary.main">…
<Box bgcolor="secondary.main">…
<Box bgcolor="error.main">…
<Box bgcolor="text.primary">…
<Box bgcolor="text.secondary">…
<Box bgcolor="text.disabled">…
<Box bgcolor="text.hint">…