Theme Switcher

Colors

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 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-brand-primary-500. They can be directly accessed via var(--brand-primary-500) but do note that you'll need to wrap everything in hsl() like so: hsl(var(--brand-primary-500)). This allows for Tailwind operations like text-primary-500/25.

Brand Primary

ngrok's primary branding color is used in its logo as well as primary links. Use it sparingly to attract attention.

900
800
700
600
500
400
300
200
100
50

Brand Secondary

900
800
700
600
500
400
300
200
100
50

Gray

900
800
700
600
500
400
300
200
100
50

Red

900
800
700
600
500
400
300
200
100
50

Green

900
800
700
600
500
400
300
200
100
50

Yellow

900
800
700
600
500
400
300
200
100
50