Colors

We use a relatively extensive set of cores within CSS.
All colors in addition to being SASS variables (like $pink) are also CSS variables to use globally like var(--pink).

To see all the colors and their variations go to the Styleguide page

All colors have three types of auxiliary classes.

Color Attribute

To change the color rule just use the color name as class.

I`m a pink paragraph

I`m a pink light paragraph

I`m a blue paragraph

<p class='pink'>
  I`m a pink paragraph
</p>
<p class='pink-light'>
  I`m a pink light paragraph
</p>
<p class='blue'>
  I`m a blue paragraph
</p>

Background Color Attribute

To change the background-color rule just use the color name as class with the prefix background-.

I`m a paragraph with background pink

I`m a paragraph with background pink light

I`m a paragraph with background blue

<p class='background-pink'>
  I`m a paragraph with background pink
</p>
<p class='background-pink-light'>
  I`m a paragraph with background pink light
</p>
<p class='background-blue'>
  I`m a paragraph with background blue
</p>

Border Color Attribute

To change the border-color rule just use the color name as class with the prefix border-. The element needs to have the border property set, the example below is using border: 1px solid transparent. The transparent will be overwritten by the color class.

I`m a paragraph with border pink

I`m a paragraph with border pink light

I`m a paragraph with border blue

<p class='border-pink' style='border: 1px solid transparent'>
  I`m a paragraph with border pink
</p>
<p class='border-pink-light' style='border: 1px solid transparent'>
  I`m a paragraph with border pink light
</p>
<p class='border-blue' style='border: 1px solid transparent'>
  I`m a paragraph with border blue
</p>