0.16.1

Theme Switcher

Colors

Colors are a key component of any design system. They are used to convey meaning, attract attention, and provide feedback. Mantle’s color system is designed to be accessible and flexible with dark and high contrast modes.

Tailwind

Mantle uses Tailwind under the hood for all its CSS styling. However, we differ from Tailwind when it comes to colors. Mantle provides a full color library that automatically provides a dark and high contrast modes. This is different from standard Tailwind usage that requires dark class variations. By simply specifying light colors provided by Mantle, you’ll get dark and high contrast modes for free. If you require additional customization, you can provide dark variant classes as an override.

Variables

Mantle’s colors are delivered as CSS variables via Tailwind’s API eg. .text-blue-500. They can be directly accessed via var(--blue-500) but do note that you’ll need to wrap everything in hsl() like so: hsl(var(--blue-500)). This allows for Tailwind operations like text-blue-500/25.

Overrides

Most colors should appropriately swap for sensible values in dark and high contrast modes. However, there are often cases where you’ll need to specify an override. The dark: variant is well-documented on Tailwind’s website. Mantle provides additional variants for high contrast and dark high contrast mode with high-contrast: and dark-high-contrast: respectively.

Functional Colors

Mantle generally limits its color choices to the following functional colors for primary actions, and various states like danger and warnings.

Neutral

950
900
800
700
600
500
400
300
200
100
50

Accent

950
900
800
700
600
500
400
300
200
100
50

Success

950
900
800
700
600
500
400
300
200
100
50

Danger

950
900
800
700
600
500
400
300
200
100
50

Warning

950
900
800
700
600
500
400
300
200
100
50

Extended Palette

Mantle also supports the entirety 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. However, 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

950
900
800
700
600
500
400
300
200
100
50

Red

950
900
800
700
600
500
400
300
200
100
50

Orange

950
900
800
700
600
500
400
300
200
100
50

Amber

950
900
800
700
600
500
400
300
200
100
50

Yellow

950
900
800
700
600
500
400
300
200
100
50

Lime

950
900
800
700
600
500
400
300
200
100
50

Green

950
900
800
700
600
500
400
300
200
100
50

Emerald

950
900
800
700
600
500
400
300
200
100
50

Teal

950
900
800
700
600
500
400
300
200
100
50

Cyan

950
900
800
700
600
500
400
300
200
100
50

Sky

950
900
800
700
600
500
400
300
200
100
50

Blue

950
900
800
700
600
500
400
300
200
100
50

Indigo

950
900
800
700
600
500
400
300
200
100
50

Violet

950
900
800
700
600
500
400
300
200
100
50

Purple

950
900
800
700
600
500
400
300
200
100
50

Fuchsia

950
900
800
700
600
500
400
300
200
100
50

Pink

950
900
800
700
600
500
400
300
200
100
50

Rose

950
900
800
700
600
500
400
300
200
100
50