Style Guide

Colors

All Sass color variables prefixed with $color-. This makes it easy to figure out what a variable is for later.

Use .bg- class name to control your background color.

Primary

.bg-vert-cascades
$color-vert-cascades
#00483c

.bg-vert-pale
$color-vert-pale
#0f774b

.bg-vert-lime
$color-vert-lime
#bbc406

.bg-vert-pomme
$color-vert-pomme
#84bd00

.bg-bleu-recyclage
$color-bleu-recyclage
#0064a8

.bg-bleu-emeraude
$color-bleu-emeraude
#006c81

.bg-bleu-profond
$color-bleu-profond
#254252

.bg-menthe
$color-menthe
#dbede4

.bg-bleu-pastel
$color-bleu-pastel
#b2dddf

.bg-creme
$color-creme
#eceae6

.bg-creme-pale
$color-creme-pale
#f6f5f2

.bg-rouge-rouille
$color-rouge-rouille
#cc472b

.bg-orange
$color-orange
#ff8400

.bg-gris-chaud
$color-gris-chaud
#b9bab2

.bg-blanc
$color-blanc
#ffffff

.bg-noir
$color-noir
#000000

.bg-aqua
$color-aqua
#2cd5c4

.bg-jaune
$color-jaune
#ffbf3f

.bg-texture
Textured background

Markup Details

                            <h3>Primary</h3>
<div class="kss-swatch bg-vert-cascades">
  <div class="kss-swatch__hex"><strong>.bg-vert-cascades</strong><br>$color-vert-cascades<br>#00483c</div>
</div>
<div class="kss-swatch bg-vert-pale">
  <div class="kss-swatch__hex"><strong>.bg-vert-pale</strong><br>$color-vert-pale<br>#0f774b</div>
</div>
<div class="kss-swatch bg-vert-lime">
  <div class="kss-swatch__hex"><strong>.bg-vert-lime</strong><br>$color-vert-lime<br>#bbc406</div>
</div>
<div class="kss-swatch bg-vert-pomme">
  <div class="kss-swatch__hex"><strong>.bg-vert-pomme</strong><br>$color-vert-pomme<br>#84bd00</div>
</div>
<div class="kss-swatch bg-bleu-recyclage">
  <div class="kss-swatch__hex"><strong>.bg-bleu-recyclage</strong><br>$color-bleu-recyclage<br>#0064a8</div>
</div>
<div class="kss-swatch bg-bleu-emeraude">
  <div class="kss-swatch__hex"><strong>.bg-bleu-emeraude</strong><br>$color-bleu-emeraude<br>#006c81</div>
</div>
<div class="kss-swatch bg-bleu-profond">
  <div class="kss-swatch__hex"><strong>.bg-bleu-profond</strong><br>$color-bleu-profond<br>#254252</div>
</div>
<div class="kss-swatch bg-menthe">
  <div class="kss-swatch__hex"><strong>.bg-menthe</strong><br>$color-menthe<br>#dbede4</div>
</div>
<div class="kss-swatch bg-bleu-pastel">
  <div class="kss-swatch__hex"><strong>.bg-bleu-pastel</strong><br>$color-bleu-pastel<br>#b2dddf</div>
</div>
<div class="kss-swatch bg-creme">
  <div class="kss-swatch__hex"><strong>.bg-creme</strong><br>$color-creme<br>#eceae6</div>
</div>
<div class="kss-swatch bg-creme-pale">
  <div class="kss-swatch__hex"><strong>.bg-creme-pale</strong><br>$color-creme-pale<br>#f6f5f2</div>
</div>
<div class="kss-swatch bg-rouge-rouille">
  <div class="kss-swatch__hex"><strong>.bg-rouge-rouille</strong><br>$color-rouge-rouille<br>#cc472b</div>
</div>
<div class="kss-swatch bg-orange">
  <div class="kss-swatch__hex"><strong>.bg-orange</strong><br>$color-orange<br>#ff8400</div>
</div>
<div class="kss-swatch bg-gris-chaud">
  <div class="kss-swatch__hex"><strong>.bg-gris-chaud</strong><br>$color-gris-chaud<br>#b9bab2</div>
</div>
<div class="kss-swatch bg-blanc">
  <div class="kss-swatch__hex"><strong>.bg-blanc</strong><br>$color-blanc<br>#ffffff</div>
</div>
<div class="kss-swatch bg-noir">
  <div class="kss-swatch__hex"><strong>.bg-noir</strong><br>$color-noir<br>#000000</div>
</div>
<div class="kss-swatch bg-aqua">
  <div class="kss-swatch__hex"><strong>.bg-aqua</strong><br>$color-aqua<br>#2cd5c4</div>
</div>
<div class="kss-swatch bg-jaune">
  <div class="kss-swatch__hex"><strong>.bg-jaune</strong><br>$color-jaune<br>#ffbf3f</div>
</div>
<div class="kss-swatch bg-texture">
  <div class="kss-swatch__hex"><strong>.bg-texture</strong><br>Textured background</div>
</div>
</div>