Colors
Colors are a key component of any design system. They convey meaning, attract attention, and give feedback. Mantle's color system is accessible and flexible, with a dark mode.
Tailwind
Mantle uses Tailwind under the hood for all its CSS styling. However, we differ from Tailwind when it comes to colors. Mantle ships a full color library with an automatic dark mode. This is different from standard Tailwind usage that requires dark class variations. Specify Mantle's light colors and you get dark mode for free. If you require additional customization, you can add dark variant classes as an override.
Variables
Mantle's colors are delivered as CSS variables via Tailwind's API e.g.
.text-blue-500. They can be directly accessed via var(--color-blue-500) and use oklch() color space.
Black and white color variables
Mantle overrides what "black" and "white" mean depending on the theme. They are semantic colors, not literal ones. In dark mode, we swap them so that white is actually black and vice versa. Pay attention to the example below when swapping between our themes!
This renders bg-white and color text-black.
The current applied theme is light
Overrides
Most colors should appropriately swap for sensible values in dark mode.
However, there are often cases where you'll need to specify an override. The
dark: variant is well-documented on Tailwind's website.
Functional colors
Mantle generally limits its color choices to the following functional colors for primary actions, and various states like danger and warnings.
Neutral
Accent
Info
Important
Success
Danger
Warning
Extended palette
Mantle also supports a curated subset of Tailwind's color palette in light, dark, and high contrast variants. These are to be used when there is no functional meaning behind the color choice. We've left out the extended collection of Tailwind's grays eg. slate, zinc, etc. since we only want to use our own custom branded gray.
Gray
Amber
Lime
Emerald
Sky
Purple
Fuchsia
Pink
Rose
Reserve palette
These additional colors are available when you need more color variety than the extended palette covers, such as for line charts, data visualization, or categorical distinctions. They are less harmonious with the rest of the Mantle palette, so prefer functional and extended colors first.