03-colour-palette.html

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css" media="screen">
      .container { width: 960px; margin: 20px auto; }
      p { color: #fff; font-family: HelveticaNeue; margin: 120px 0 0 10px; }
      .box { display: block; width: 150px; height: 150px; float: left; margin-right: 10px; }
      .box.main { background: #3352a1; }
      .box.bold { background: #1946bb; }
      .box.accent { background: #8e19bb; }
      .box.main-gray { background: #6a6a6a; }
      .box.highlight { background: #6a87d0; }
      .box.shadow { background: rgba(26, 43, 84, 0.8); }
    </style>
  </head>

  <body>
    <div class='container'>
      <div class='box main'><p>$main-color</p></div>
      <div class='box bold'><p>$bold-color</p></div>
      <div class='box accent'><p>$accent-color</p></div>
      <div class='box main-gray'><p>$main-gray-color</p></div>
      <div class='box highlight'><p>$highlight-color</p></div>
      <div class='box shadow'><p>$shadow-color</p></div>
    </div>
  </body>
</html>