Styleguide 0.28.5

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.

#CC3612 rgb(204,54,18) $primary-color/$color-red
<div class="styleguide-color-bar bg-primary">#CC3612 rgb(204,54,18) $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.

#0064b4 rgb(0,100,180) $color-blue
#ffd861 rgb(255,216,97) $color-yellow
#E5E1D9 rgb(229,225,217) $color-sand
#839D63 rgb(131,157,99) $color-green
#ECECEC rgb(236,236,236) $secondary-color/$color-lightgrey
#C0C0C0 rgb(192,192,192) $color-grey
#767676 rgb(118,118,118) $color-darkgrey
#666666 rgb(102,102,102) $color-dark
#555555 rgb(85,85,85) $color-darker
#444444 rgb(68,68,68) $color-darkest
#333333 rgb(51,51,51) $color-black
<div class="styleguide-color-bar bg-blue">#0064b4 rgb(0,100,180) $color-blue</div>
<div class="styleguide-color-bar bg-yellow">#ffd861 rgb(255,216,97) $color-yellow</div>
<div class="styleguide-color-bar bg-sand">#E5E1D9 rgb(229,225,217) $color-sand</div>
<div class="styleguide-color-bar bg-green">#839D63 rgb(131,157,99) $color-green</div>
<div class="styleguide-color-bar bg-lightgrey">#ECECEC rgb(236,236,236) $secondary-color/$color-lightgrey</div>
<div class="styleguide-color-bar bg-grey">#C0C0C0 rgb(192,192,192) $color-grey</div>
<div class="styleguide-color-bar bg-darkgrey">#767676 rgb(118,118,118) $color-darkgrey</div>
<div class="styleguide-color-bar bg-dark">#666666 rgb(102,102,102) $color-dark</div>
<div class="styleguide-color-bar bg-darker">#555555 rgb(85,85,85) $color-darker</div>
<div class="styleguide-color-bar bg-darkest">#444444 rgb(68,68,68) $color-darkest</div>
<div class="styleguide-color-bar bg-black">#333333 rgb(51,51,51) $color-black</div>

2.2.1 - Tints and shades

  • darker
  • dark
  •  
  • light
  • lighter
.bg-red

Red

  • darker
  • dark
  •  
  • light
  • lighter
.bg-yellow

Yellow

  • darker
  • dark
  •  
  • light
  • lighter
.bg-green

Green

  • darker
  • dark
  •  
  • light
  • lighter
.bg-blue

Blue

  • darker
  • dark
  •  
  • light
  • lighter
.bg-sand

Sand

  • darker
  • dark
  •  
  • light
  • lighter
<ul class="styleguide-color-bar">
  <li class="{$modifiers}-darker">darker</li>
  <li class="{$modifiers}-dark">dark</li>
  <li class="{$modifiers}">&nbsp;</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.

$success-color
$alert-color
$warning-color
<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.

#0064b4 rgb(0,100,180) $ui-color
<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>

2.6 - Shadows

.z-shadow-1

z-shadow-1

.z-shadow-2

z-shadow-2

.z-shadow-3

z-shadow-3

.z-shadow-4

z-shadow-4

.z-shadow-5

z-shadow-5

<div class="{$modifiers}" style="width:100px;height:100px;text-align:center;"></div>