Colors

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

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

All colors have tone variations from 5 to 95, jumping every 5 like var(--pink-5), var(--pink-10), var(--pink-15)...

Color Attribute

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

I`m a pink paragraph like 'var(--pink-50)'

I`m a lighter pink paragraph like 'var(--pink-30)'

I`m a aqua paragraph like 'var(--aqua-30)'

<p class='pink-50'>
  I`m a pink paragraph like 'var(--pink-50)'
</p>
<p class='pink-30'>
  I`m a lighter pink paragraph like 'var(--pink-30)'
</p>
<p class='aqua-50'>
  I`m a aqua paragraph like 'var(--aqua-30)'
</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 like 'var(--pink-50)'

I`m a paragraph with lighter background pink like 'var(--pink-30)'

I`m a paragraph with background aqua like 'var(--aqua-30)'

<p class='background-pink-50'>
  I`m a paragraph with background pink like 'var(--pink-50)'
</p>
<p class='background-pink-30'>
  I`m a paragraph with lighter background pink like 'var(--pink-30)'
</p>
<p class='background-aqua-50'>
  I`m a paragraph with background aqua like 'var(--aqua-30)'
</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 like 'var(--pink-50)'

I`m a paragraph with lighter border pink like 'var(--pink-30)'

I`m a paragraph with border aqua like 'var(--aqua-30)'

<p class='border-pink-50' style='border: 1px solid transparent'>
  I`m a paragraph with border pink like 'var(--pink-50)'
</p>
<p class='border-pink-30' style='border: 1px solid transparent'>
  I`m a paragraph with lighter border pink like 'var(--pink-30)'
</p>
<p class='border-aqua-50' style='border: 1px solid transparent'>
  I`m a paragraph with border aqua like 'var(--aqua-30)'
</p>