Go one step further with our solutions for creating an intuitive, personalized experience.
Compose and manage your identity with different colors.
Use the following classes to change the text color: text_primary, text_accent, text_danger, text_light, text_dark, text_background}.
primary
accent
danger
light
dark
background
<p class="text_primary">primary</p>
<p class="text_accent">accent</p>
<p class="text_danger">danger</p>
<p class="text_light">light</p>
<p class="text_dark">dark</p>
<p class="text_background">background</p>
To change the background color of an element, use these: bg_primary, bg_accent, bg_danger, bg_light, bg_background.
primary
accent
danger
light
dark
background
<p class="bg_primary">primary</p>
<p class="bg_accent">accent</p>
<p class="bg_danger">danger</p>
<p class="bg_light">light</p>
<p class="bg_dark">dark</p>
<p class="bg_background">background</p>
By adding -invert to some of the above classes, you will automatically apply white or black. This automatic choice will take into account the contrast ratio.
For example, if text_primary is a light color, then you will get black. If it is dark, you will get white (this can be useful when choosing a text color that is on top of another).
Also, the choice of this color is smart and automatic, so you can change the colors in your library without worrying about future contrast ratio issues.
primary invert
accent invert
danger invert
background invert
primary invert
accent invert
danger invert
background invert
<p class="text_primary-invert">primary invert</p>
<p class="text_accent-invert">accent invert</p>
<p class="text_danger-invert">danger invert</p>
<p class="text_background-invert">background invert</p>
<p class="bg_primary-invert">primary invert</p>
<p class="bg_accent-invert">accent invert</p>
<p class="bg_danger-invert">danger invert</p>
<p class="bg_background-invert">background invert</p>
You can go even further with color variations using this bg_[C]-[T][V] structure :
-C is one of the previously seen colors: primary, accent or danger.
-T is the type of variation: d for darken or l for lighten.
-V is the intensity value: 10, 20, 30, 40, 50, 60, 70, 80, 90.
Here are a few examples.
primary
primary
primary
danger
<p class="bg_primary-d90">primary</p>
<p class="bg_primary-d50">primary</p>
<p class="bg_primary-d30">primary</p>
<p class="bg_danger-l10">danger</p>
You can use bg_[C]-[V] or text_[C]-[V] to manage opacity.
primary
primary
accent
danger
<p class="bg_primary-90">primary</p>
<p class="text_primary-50">primary</p>
<p class="bg_accent-30">accent</p>
<p class="text_danger-20">danger</p>
primary
accent
danger
light
dark
background
<p class="text_primary">primary</p>
<p class="text_accent">accent</p>
<p class="text_danger">danger</p>
<p class="text_light">light</p>
<p class="text_dark">dark</p>
<p class="text_background">background</p>
primary
accent
danger
light
dark
background
<p class="bg_primary">primary</p>
<p class="bg_accent">accent</p>
<p class="bg_danger">danger</p>
<p class="bg_light">light</p>
<p class="bg_dark">dark</p>
<p class="bg_background">background</p>
primary invert
accent invert
danger invert
background invert
primary invert
accent invert
danger invert
background invert
<p class="text_primary-invert">primary invert</p>
<p class="text_accent-invert">accent invert</p>
<p class="text_danger-invert">danger invert</p>
<p class="text_background-invert">background invert</p>
<p class="bg_primary-invert">primary invert</p>
<p class="bg_accent-invert">accent invert</p>
<p class="bg_danger-invert">danger invert</p>
<p class="bg_background-invert">background invert</p>
primary
primary
accent
danger
<p class="bg_primary-90">primary</p>
<p class="text_primary-50">primary</p>
<p class="bg_accent-30">accent</p>
<p class="text_danger-20">danger</p>
| Class | Definition |
|---|---|
| text_primary | Add a primary text color. |
| text_accent | Add an accent text color. |
| text_danger | Add a danger text color. |
| bg_primary | Add a primary background-color. |
| bg_accent | Add an accent background-color. |
| bg_danger | Add a danger background-color. |
| text_primary-invert | Add an inverted primary text color. |
| text_accent-invert | Add an inverted accent text color. |
| text_danger-invert | Add an inverted danger text color. |
| bg_primary-invert | Add an inverted primary background-color. |
| bg_accent-invert | Add an inverted accent background-color. |
| bg_danger-invert | Add an inverted danger background-color. |
| text_primary-d[V] | Add a primary dark text color. |
| text_accent-d[V] | Add an accent dark text color. |
| text_danger-d[V] | Add a danger dark text color. |
| bg_primary-d[V] | Add a primary dark background color. |
| bg_accent-d[V] | Add an accent dark background color. |
| bg_danger-d[V] | Add a danger dark background color. |
| text_primary-l[V] | Add a primary light text color. |
| text_accent-l[V] | Add an accent light text color. |
| text_danger-l[V] | Add a danger light text color. |
| bg_primary-l[V] | Add a primary light background color. |
| bg_accent-l[V] | Add an accent light background color. |
| bg_danger-l[V] | Add a danger light background color. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings