Colors

evalink cause provides the colors used in the evalink ecosystem. If the developed product is directly connected to the evalink ecosystem, these color definitions must be used.

If the developed product is directly connected to the evalink ecosystem, these color definitions must be used.

Make sure to respect the brand rules defined on brand.evalink.io

Import the "Colors" into your SCSS files

The colors can be imported into all SCSS files that are to make use of the colors using the following import statement.

@import 'node_modules/@evalink/cause/colors';

 .button__download {
   background-color: $primary-500;
   color: $text-emphasis--medium;
   padding: .75rem 1rem;
   &:hover {
     background-color: $primary-600;
   }
 }

Text Colors

evalink cause comes with a set of text colors for flexibility in different situations. The following sections describe the idea behind these options.

Emphasis

The different Emphasis provides a way to make a text more or less prominent and important to the user. It allows to create a visual hierarchy based on the contrast between the text and the background.

How it behaves:

To create more contrast use a higher emphasis (For example $text-emphasis--high)
To create less contrast use a lower emphasis (For example $text-emphasis--low)

Transparency

The text colors use different transparency levels to create a lower or stronger contrast, on the current background of the text element. The transparency allows the text color to adapt on various background colors. Because of the transparency, the text color will always be mixed with the background and create a good color harmony.

Light or dark Background

If you import the typography definitions into your global SCSS file the default text color is set for a light background color. Nevertheless, there is also an option for text on a dark background.

Text on a light colored background

Text on a dark colored background

Color Scales

The different color scales provide a rich and flexible range of colors, which can be used to react on user actions on websites and in digital products. For example when a user hover over a button we can change to a lighter or darker color value, within the color scale, to react on this action.