Skip to main content

Colors

Below you can find a list of colors used in our system with a proper class name from TailwindCSS. Please, be sure that you have done everything which is stated install first @mercell/tailwind documentation so all necessary styling is already in your project

By clicking on color you can copy it to your clipboard.

As an example of usage you can style a div like this:

<div className="bg-alto">
  <p>Some text</p>
</div>

or just text

<p className="text-alto">Some text</p>

Background and main text color

Copy
White
Main background color, Text color for dark
Copy
Athens
Background color for separation of things
Copy
Concrete
Background color for separation of things
Copy
Hover grey
Used for hover states
Copy
Dove
Text color
Copy
Mirage
Text and dark background color

Brand and UI colors

Copy
Valhalla
UI color on light backgrounds
Copy
Martinique
Selected color on dark background like valhalla
Copy
Cerulean
Copy

cerulean-80

Copy

cerulean-60

Copy

cerulean-40

Copy

cerulean-20

Logo (100%) and UI color on dark backgrounds (80%)
Copy
Minsk
Logo color
Copy
Studio
Logo color
Copy
Snuff
Selected colour for menus
Copy
Alto
Use on hairlines, never on backgrounds

Feedback colors

Copy
Frostee
Positive Feedback colour
Copy
Tropical Rain Forest
Positive Feedback colour
Copy
California
Important Feedback colour for icons
Copy
Colonial
Important Feedback colour
Copy
Cognac
Important Feedback colour for text
Copy
Pippin
Critical Feedback colour
Copy
Well Read
Critical Feedback colour
Copy
Foam
Information Feedback colour
Copy
Matisse
Information Feedback colour

Other colors

Copy
Magnolia
Decoration, background, other UI elements
Copy
Polar
Decoration, background, other UI elements