2 - Colors
Color plays an important part in our expression. Especially our fontpage. Some of our colors are bright and bold and thus should be used wisely.
2.1 - Primary color
Learn the hex by heart.
<div class="styleguide-color-bar bg-primary">#E20613 rgb(226,6,19) $primary-color/$color-red</div>
2.2 - Supporting colors
We have a wide range of supporting colors. Shades of grey is used extensively throught our site, but don't be shy, throw some color in the mix.
<div class="styleguide-color-bar bg-blue">#455C7B rgb(69,92,123) $color-blue</div> <div class="styleguide-color-bar bg-yellow">#FFCB3B rgb(255,203,59) $color-yellow</div> <div class="styleguide-color-bar bg-green">#1FA975 rgb(31,169,117) $color-green</div> <div class="styleguide-color-bar bg-lightgrey">#ECECEC rgb(236,236,236) $secondary-color/$color-lightgrey</div>
2.2.1 - Tints and shades
.bg-red
Red
.bg-blue
Blue
.bg-yellow
Yellow
.bg-green
Green
<ul class="styleguide-color-bar"> <li class="{$modifiers}-darker">darker</li> <li class="{$modifiers}-dark">dark</li> <li class="{$modifiers}"> </li> <li class="{$modifiers}-light">light</li> <li class="{$modifiers}-lighter">lighter</li> </ul>
2.3 - Contextual colors
Some supporing colors also double as contextual colors used to empasize meaning. These are mainly visible as error or success messages in forms or elements that in provide feedback to the user.
<div class="styleguide-color-bar bg-success">$success-color</div> <div class="styleguide-color-bar bg-alert">$alert-color</div> <div class="styleguide-color-bar bg-warning">$warning-color</div>
2.4 - Interaction
We have a color dedicated to elements that the user can interact with e.g. links, buttons and navigation. This color sould not be used for any other pupose.
<div class="styleguide-color-bar bg-ui">#0064b4 rgb(0,100,180) $ui-color</div>
2.5 - Text
I'm a monster
.text-red
Red
I'm a monster
.text-blue
Blue
I'm a monster
.text-green
Green
I'm a monster
.text-yellow
Yellow
I'm a monster
.text-lightgrey
Lightgrey
I'm a monster
.text-grey
Grey
I'm a monster
.text-darkgrey
Darkgrey
I'm a monster
<p class="{$modifiers}"><strong>I'm a monster</strong></p>