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">#FFFFFF rgb(255,255,2555) $primary-color/$color-white</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">#07A7FF rgb(7,167,255) $color-blue</div> <div class="styleguide-color-bar bg-lightblue">#8FD8F8 rgb(143,216,248 ) $color-purple</div> <div class="styleguide-color-bar bg-lightgrey">#F8F8F8 rgb(248,248,248) $secondary-color/$color-lightgrey</div> <div class="styleguide-color-bar bg-grey">#D8D8D8 rgb(216,216,216) $color-grey</div> <div class="styleguide-color-bar bg-darkgrey">#9E9E9E rgb(158,158,158) $color-darkgrey</div> <div class="styleguide-color-bar bg-black">#20243D rgb(32,36,61) $color-black</div>
2.2.1 - Combinations
Combinations that work well together, also for common forms of color blindness. Combinations with checkmarks pass WCAG 2.0 level AA for headlines (large text).
<div class="styleguide-color-bar bg-red"><div class="styleguide-color-circle bg-orange"></div><div class="styleguide-color-circle bg-yellow valid"></div><div class="styleguide-color-circle bg-burgundy"></div><div class="styleguide-color-circle bg-pink"></div></div> <div class="styleguide-color-bar bg-orange"><div class="styleguide-color-circle bg-red"></div><div class="styleguide-color-circle bg-yellow"></div><div class="styleguide-color-circle bg-purple valid"></div><div class="styleguide-color-circle bg-burgundy valid"></div></div> <div class="styleguide-color-bar bg-yellow"><div class="styleguide-color-circle bg-red valid"></div><div class="styleguide-color-circle bg-orange"></div><div class="styleguide-color-circle bg-green"></div><div class="styleguide-color-circle bg-blue"></div><div class="styleguide-color-circle bg-purple valid"></div><div class="styleguide-color-circle bg-burgundy valid"></div><div class="styleguide-color-circle pink"></div></div> <div class="styleguide-color-bar bg-green"><div class="styleguide-color-circle bg-yellow"></div><div class="styleguide-color-circle bg-purple valid"></div><div class="styleguide-color-circle bg-burgundy valid"></div></div> <div class="styleguide-color-bar bg-blue"><div class="styleguide-color-circle bg-yellow"></div><div class="styleguide-color-circle bg-purple valid"></div><div class="styleguide-color-circle bg-burgundy valid"></div></div> <div class="styleguide-color-bar bg-purple"><div class="styleguide-color-circle bg-orange valid"></div><div class="styleguide-color-circle bg-yellow valid"></div><div class="styleguide-color-circle bg-green valid"></div><div class="styleguide-color-circle bg-blue valid"></div><div class="styleguide-color-circle bg-pink"></div></div> <div class="styleguide-color-bar bg-burgundy"><div class="styleguide-color-circle bg-orange valid"></div><div class="styleguide-color-circle bg-yellow valid"></div><div class="styleguide-color-circle bg-green valid"></div><div class="styleguide-color-circle bg-pink"></div></div> <div class="styleguide-color-bar bg-pink"><div class="styleguide-color-circle bg-yellow"></div><div class="styleguide-color-circle bg-purple"></div><div class="styleguide-color-circle bg-burgundy"></div></div>
2.2.2 - Tints and shades
.bg-red
Red
.bg-orange
Orange
.bg-yellow
Yellow
.bg-green
Green
.bg-blue
Blue
.bg-purple
Purple
.bg-burgundy
Burgundy
.bg-pink
Pink
<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">#3768C9 rgb(55,104,201) $ui-color</div>