Styleguide 0.30.11

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.

#D60000 rgb(214,0,0) $primary-color/$color-red
<div class="styleguide-color-bar bg-primary">#D60000 rgb(214,0,0) $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.

#E87E0A rgb(232,126,10) $color-orange
#F1CA3F rgb(241,202,63) $color-yellow
#8ABA56 rgb(138,186,86) $color-green
#23ACCC rgb(35,172,204) $color-blue
#5C3393 rgb(92,51,147) $color-purple
#862547 rgb(134,37,71) $color-burgundy
#F35D67 rgb(243,93,103) $color-pink
#ECECEC rgb(236,236,236) $secondary-color/$color-lightgrey
#C0C0C0 rgb(192,192,192) $color-grey
#767676 rgb(118,118,118) $color-darkgrey
#222222 rgb(34,34,34) $color-black
#569091 rgb(86,145,144) $color-teal
#1C1837 rgb(28,24,55) $color-navy
<div class="styleguide-color-bar bg-orange">#E87E0A rgb(232,126,10) $color-orange</div>
<div class="styleguide-color-bar bg-yellow">#F1CA3F rgb(241,202,63) $color-yellow</div>
<div class="styleguide-color-bar bg-green">#8ABA56 rgb(138,186,86) $color-green</div>
<div class="styleguide-color-bar bg-blue">#23ACCC rgb(35,172,204) $color-blue</div>
<div class="styleguide-color-bar bg-purple">#5C3393 rgb(92,51,147) $color-purple</div>
<div class="styleguide-color-bar bg-burgundy">#862547 rgb(134,37,71) $color-burgundy</div>
<div class="styleguide-color-bar bg-pink">#F35D67 rgb(243,93,103) $color-pink</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-black">#222222 rgb(34,34,34) $color-black</div>
<div class="styleguide-color-bar bg-teal">#569091 rgb(86,145,144) $color-teal</div>
<div class="styleguide-color-bar bg-navy">#1C1837 rgb(28,24,55) $color-navy</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

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

Red

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

Orange

  • 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-purple

Purple

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

Burgundy

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

Pink

  • 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.

#3768C9 rgb(55,104,201) $ui-color
<div class="styleguide-color-bar bg-ui">#3768C9 rgb(55,104,201) $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-orange

Orange

I'm a monster

.text-purple

Purple

I'm a monster

.text-burgundy

Burgundy

I'm a monster

.text-yellow

Yellow

I'm a monster

.text-pink

Pink

I'm a monster

.text-teal

Teal

I'm a monster

.text-navy

Navy

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>