diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ceab7e12f..36faf6074 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -39,7 +39,7 @@
 
 @mixin logo {
   color: white;
-  font-family: 'Lato' !important;
+  font-family: $font-logo;
   font-weight: lighter;
 
   @media (min-width: $small-breakpoint) {
@@ -60,6 +60,103 @@
   }
 }
 
+@mixin title {
+  font-size: $title-font-size;
+  font-weight: $font-bold;
+}
+
+@mixin h1 {
+  font-family: $font-sans;
+  font-size: $h2-font-size;
+  font-weight: $font-bold;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: $h1-font-size;
+  }
+}
+
+@mixin h2 {
+  font-family: $font-sans;
+  font-size: $h3-font-size;
+  font-weight: $font-bold;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: $h2-font-size;
+  }
+}
+
+@mixin h3 {
+  font-family: $font-sans;
+  font-size: $h4-font-size;
+  font-weight: $font-bold;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: $h3-font-size;
+  }
+}
+
+@mixin h4 {
+  font-family: $font-sans;
+  font-size: $h5-font-size;
+  font-weight: $font-bold;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: $h4-font-size;
+  }
+}
+
+@mixin h5 {
+  font-family: $font-sans;
+  font-size: $h6-font-size;
+  font-weight: $font-bold;
+
+  @media (min-width: $small-breakpoint) {
+    font-size: $h5-font-size;
+  }
+}
+
+@mixin h6 {
+  font-family: $font-sans;
+  font-size: $h6-font-size;
+  font-weight: $font-normal;
+  text-transform: uppercase;
+}
+
+h1 {
+  @include h1();
+}
+
+h2 {
+  @include h2();
+}
+
+h3 {
+  @include h3();
+}
+
+h4 {
+  @include h4();
+}
+
+h5 {
+  @include h5();
+}
+
+h6 {
+  @include h6();
+}
+
+h1, h2, h3, h4, h5, h6 {
+
+  &.lead {
+    border-bottom: rem-calc(6) solid $brand;
+  }
+
+  &.secondary {
+    color: $text-medium;
+  }
+}
+
 // 03. Global styles
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -74,8 +171,9 @@ html, body {
 
 body {
   background: white;
-  font-family: $font-family-sans-serif;
-  font-size: rem-calc(13);
+  color: $text;
+  font-family: $font-serif;
+  font-size: $base-font-size;
   font-weight: normal;
   text-rendering: optimizeLegibility;
 
@@ -85,52 +183,47 @@ body {
   }
 }
 
+p, ul, table {
+  font-family: $font-serif;
+}
+
 p {
-  font-size: rem-calc(15);
-  line-height: $line-height*1.25;
-  margin-bottom: rem-calc(12);
+  color: $text;
+  line-height: $base-line-height;
+  margin: rem-calc(6) 0;
+}
+
+ol, ul, li, p {
+  font-size: $small-font-size;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  clear: both;
+  font-family: $font-sans;
+  line-height: $heading-line-height;
+  margin: rem-calc(12) 0 rem-calc(6);
 }
 
 a {
   color: $link;
 
-  &:hover {
+  &:hover, &:active {
     color: $link-hover;
+    text-decoration: underline;
+
+    h1, h2, h3, h4, h5, h6 {
+      color: $link-hover;
+    }
   }
-}
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: $font-family-sans-serif;
-  font-weight: bold;
-}
-
-h1 {
-  font-size: rem-calc(30);
-}
-
-h2 {
-  font-size: rem-calc(24);
-}
-
-h3 {
-  font-size: rem-calc(20);
-}
-
-h4 {
-  font-size: rem-calc(18);
-}
-
-h5 {
-  font-size: rem-calc(16);
-}
-
-h6 {
-  font-size: rem-calc(14);
+  &:focus {
+    outline: 0;
+  }
 }
 
 .button {
   background: $brand;
-  font-size: rem-calc(14);
+  font-size: $small-font-size;
   font-family: $font-family-sans-serif !important;
   padding: rem-calc(15) rem-calc(32);
 }
@@ -253,11 +346,6 @@ h6 {
   min-height: rem-calc(288);
 }
 
-.footer {
-  background: #DEE0E2;
-  border-top: rem-calc(6) solid $brand;
-}
-
 .ie-alert-box {
   position: absolute;
   top: 0;
@@ -281,31 +369,18 @@ h6 {
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 header {
-  background: image-url('header_bg.jpg');
-  background-position: bottom;
-  background-repeat: no-repeat;
-  background-size: cover;
-  color: $text;
-  min-height: rem-calc(552);
-  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/header_bg.jpg', sizingMethod='scale');
-  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/header_bg.jpg',sizingMethod='scale')";
+  background: #E7F2FC;
+  border-bottom: rem-calc(1) solid $border;
 
-  &.results {
-    border-bottom: rem-calc(1) solid $border;
-    min-height: rem-calc(48);
+  a {
+    font-family: $font-sans;
   }
 
   h1 {
-    color: white;
-    font-size: rem-calc(36);
-    font-weight: bolder;
-    line-height: $line-height*2;
     margin: rem-calc(24) 0;
-    padding: 0;
   }
 
   h2 {
-    color: white;
     font-size: rem-calc(16);
     font-weight: normal;
     line-height: rem-calc(30);
@@ -336,9 +411,7 @@ header {
   }
 
   .more-info {
-    color: white;
     display: block;
-    font-size: rem-calc(14);
     margin-bottom: rem-calc(24);
     text-decoration: underline;
 
@@ -347,21 +420,17 @@ header {
       margin-bottom: 0;
       margin-left: rem-calc(12);
     }
-
-    &:hover {
-      opacity: .75;
-    }
   }
 
   .icon-home-big {
-    color: white;
+    color: $brand;
     font-size: rem-calc(300);
     line-height: rem-calc(300);
     opacity: .75;
   }
 
   .icon-home-small {
-    color: white;
+    color: $brand;
     font-size: rem-calc(100);
     opacity: .75;
     position: absolute;
@@ -391,15 +460,15 @@ header {
 
   .locale {
     float: none;
+    font-family: $font-sans;
 
     @media (min-width: $small-breakpoint) {
       float: left;
+      margin-left: rem-calc(12);
     }
 
     .icon-language {
-      font-size: rem-calc(16);
-      line-height: rem-calc(24);
-      vertical-align: middle;
+      vertical-align: text-top;
     }
   }
 
@@ -414,12 +483,14 @@ header {
   }
 
   .search-form {
-    padding-top: rem-calc(14);
+    padding-top: rem-calc(6);
+    margin-bottom: 0 !important;
 
     .postfix {
       background: $brand;
       border: 0;
       color: white;
+      margin-bottom: 0;
     }
   }
 }
@@ -508,14 +579,13 @@ header {
   }
 
   ul li > a {
-    font-size: rem-calc(14);
+    font-size: $small-font-size;
 
     &.button {
       border-radius: 0;
       line-height: $line-height*1.5;
       text-align: left;
       background: none;
-      padding-left: rem-calc(6);
     }
 
     @media (min-width: $small-breakpoint) {
@@ -532,7 +602,7 @@ header {
   }
 
   ul li > a {
-    font-size: rem-calc(14);
+    font-size: $small-font-size;
   }
 
   ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
@@ -558,7 +628,6 @@ header {
     li:not(.has-form) a:not(.button) {
       background: none;
       color: white;
-      padding: rem-calc(12) 0;
 
       @media (min-width: $small-breakpoint) {
         line-height: rem-calc(80);
@@ -584,7 +653,7 @@ header {
 .top-links {
   background: $dark;
   color: white;
-  font-size: rem-calc(14);
+  font-size: $small-font-size;
   padding-right: rem-calc(12);
 
   a {
@@ -595,9 +664,6 @@ header {
       text-decoration: underline;
     }
   }
-  .social {
-    padding-top: rem-calc(6);
-  }
 }
 
 .subnavigation-container {
@@ -607,9 +673,11 @@ header {
 .subnavigation {
   background: white;
   clear: both;
-  min-height: rem-calc(72);
+  padding-left: rem-calc(12);
 
   @media (min-width: $small-breakpoint) {
+    padding-left: 0;
+
     & > .column {
       padding-left: 0;
     }
@@ -618,14 +686,12 @@ header {
   a {
     color: $text;
     display: inline-block;
-    font-size: rem-calc(14);
     font-weight: bold;
     line-height: $line-height*2;
     position: relative;
     text-align: left;
 
     @media (min-width: $small-breakpoint) {
-      line-height: $line-height*3;
       margin-left: rem-calc(12);
       margin-right: rem-calc(36);
       margin-right: 12px\9;
@@ -655,7 +721,6 @@ header {
 
       @media (min-width: $small-breakpoint) {
         border-bottom: 2px solid $brand;
-        line-height: rem-calc(24);
       }
     }
   }
@@ -666,7 +731,6 @@ header {
 
 footer {
   color: #171819;
-  padding: rem-calc(48) 0;
 
   .logo {
     @include logo;
@@ -680,7 +744,7 @@ footer {
   }
 
   p {
-    font-size: rem-calc(14);
+    font-size: $small-font-size;
   }
 
   a, a:active, a:focus {
@@ -701,13 +765,17 @@ footer {
     a {
       border-bottom: 1px solid #BFC1C3;
       display: block;
-      margin-bottom: rem-calc(6);
       padding-bottom: rem-calc(6);
       text-decoration: none;
     }
   }
 }
 
+.footer {
+  background: #DEE0E2;
+  border-top: rem-calc(6) solid $brand;
+}
+
 .subfooter {
   border-top: 1px solid #BFC1C3;
   opacity: .75;
@@ -719,14 +787,14 @@ footer {
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .tags, .tag-cloud {
+  font-family: $font-sans;
 
   a {
     background: $border;
     border-radius: rem-calc(6);
     color: #4d4d4d;
     display: inline-block;
-    font-size: rem-calc(13);
-    line-height: rem-calc(22);
+    font-size: $small-font-size;
     margin-bottom: rem-calc(8);
     padding: 0 rem-calc(8);
 
@@ -785,7 +853,7 @@ footer {
   }
 
   p {
-    font-size: rem-calc(14);
+    font-size: $small-font-size;
   }
 
   h1 {
@@ -853,8 +921,10 @@ form.locale-form {
 }
 
 form {
+  font-family: $font-sans;
 
   label {
+    font-size: $base-font-size;
     font-weight: bold;
     line-height: $line-height;
   }
@@ -918,7 +988,7 @@ form {
 
   .checkbox {
     display: inline-block;
-    font-size: rem-calc(14);
+    font-size: $small-font-size;
     font-weight: normal;
     line-height: $line-height;
     vertical-align: middle;
@@ -949,6 +1019,8 @@ form {
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 .alert-box {
+  font-family: $font-sans;
+  font-size: $small-font-size;
 
   &.success {
     background-color: $success-bg;
@@ -1120,7 +1192,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
     margin-left: 0;
 
     li {
-      font-size: rem-calc(14);
+      font-size: $small-font-size;
       margin-bottom: rem-calc(12);
 
       span {
@@ -1168,7 +1240,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
     }
 
     optgroup {
-      font-size: rem-calc(14);
+      font-size: $small-font-size;
     }
 
     option {
@@ -1406,7 +1478,9 @@ table {
 
 .social {
   margin-top: rem-calc(24);
+  padding-top: rem-calc(6);
   text-align: center;
+  vertical-align: middle;
 
   @media (min-width: $small-breakpoint) {
     margin-top: 0;
@@ -1581,7 +1655,7 @@ table {
         span {
           color: $text-medium;
           display: block;
-          font-size: rem-calc(14);
+          font-size: $small-font-size;
           font-weight: normal;
         }
 
@@ -1780,8 +1854,9 @@ table {
 
     .comment-votes {
       color: $text-medium;
-      font-weight: lighter;
-      line-height: rem-calc(24);
+      font-family: $font-sans;
+      font-size: $small-font-size;
+      line-height: $line-height;
       margin: rem-calc(10) rem-calc(12) rem-calc(6) 0;
 
       a {
@@ -1804,12 +1879,13 @@ table {
       margin-left: rem-calc(42);
 
       p {
-        font-size: rem-calc(14);
+        font-size: $small-font-size;
       }
 
       .reply {
         background: white;
         border: 1px solid $border;
+        font-family: $font-sans;
         font-size: rem-calc(12);
         margin: rem-calc(6) 0;
         padding: rem-calc(6);
@@ -1875,9 +1951,9 @@ table {
     }
 
     .comment-info {
-      color: $text-light;
-      font-size: rem-calc(13);
-      font-weight: lighter;
+      color: $text-medium;
+      font-family: $font-sans;
+      font-size: $small-font-size;
       margin-top: rem-calc(6);
       vertical-align: middle;
 
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 70ed1d621..d7021ef23 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -13,6 +13,7 @@
 @mixin votes {
   background: $votes-bg;
   border-top: 1px solid $votes-border;
+  font-family: $font-sans;
   margin: 0 rem-calc(-12);
   padding: rem-calc(14) rem-calc(12);
   position: relative;
@@ -73,7 +74,6 @@
       color: white;
       display: inline-block;
       font-size: rem-calc(16);
-      font-weight: lighter;
       line-height: $line-height*2;
       padding-left: rem-calc(8);
       vertical-align: top;
@@ -115,8 +115,6 @@
     color: white;
     height: 100%;
     left: 0;
-    line-height: $line-height*2;
-    padding-top: rem-calc(12);
     position: absolute;
     text-align: center;
     top: 0;
@@ -158,6 +156,7 @@
 @mixin supports {
   background: $proposals;
   border-top: 1px solid $proposals-border;
+  font-family: $font-sans;
   margin: 0 rem-calc(-12);
   padding: rem-calc(14) rem-calc(12);
   position: relative;
@@ -229,8 +228,6 @@
     color: white;
     height: 100%;
     left: 0;
-    line-height: $line-height*2;
-    padding-top: rem-calc(12);
     position: absolute;
     text-align: center;
     top: 0;
@@ -379,19 +376,18 @@
   .debate-info, .proposal-info {
     clear: both;
     color: $text-medium;
-    font-weight: lighter;
+    font-family: $font-sans;
     line-height: $line-height*2;
     position: relative;
-    text-align: justify;
 
     a {
-        color: $text-medium;
+      color: $text-medium;
     }
 
     p {
       font-size: rem-calc(15);
       line-height: $line-height;
-      margin-bottom: 0;
+      margin: 0;
     }
 
     .author-deleted {
@@ -592,6 +588,7 @@
       background: none;
       clear: both;
       display: block;
+      font-family: $font-sans;
       font-size: rem-calc(12);
       font-weight: bold;
       line-height: $line-height;
@@ -612,19 +609,9 @@
     h3 {
       font-weight: bold;
       margin: 0;
-      min-height: rem-calc(48);
 
       a {
-        clear: both;
         color: $text;
-        display: block;
-        font-size: rem-calc(16);
-        line-height: $line-height;
-        text-transform: lowercase;
-
-        &:first-letter {
-          text-transform: uppercase;
-        }
       }
     }
 
@@ -656,8 +643,8 @@
 
     .debate-info, .proposal-info {
       color: $text-medium;
-      font-weight: lighter;
-      margin-bottom: 0;
+      font-family: $font-sans;
+      margin: rem-calc(6) 0 0;
 
       .icon-comments {
         font-size: rem-calc(16);
@@ -703,13 +690,6 @@
 
     p {
       color: $text;
-      font-size: rem-calc(14);
-      line-height: $line-height;
-      margin-bottom: rem-calc(12);
-
-      &.debate-info {
-        font-size: rem-calc(13);
-      }
     }
   }
 
@@ -752,11 +732,11 @@
       display: block;
       border-style: solid;
       border-color: #166387 transparent transparent transparent;
-      bottom: rem-calc(-14);
+      bottom: -14px;
       border-left-width: 0;
       border-right-color: transparent;
-      right: rem-calc(-1);
-      border-width: 1em 1em 0 0;
+      right: -1px;
+      border-width: 13px 13px 0 0;
 
       @media (min-width: $small-breakpoint) {
         content: "";
@@ -937,50 +917,6 @@
   }
 }
 
-.debate-featured {
-  background: $votes-bg;
-  margin: rem-calc(12) 0 !important;
-
-  .panel h3 a {
-    color: #0D3F54;
-
-    text-transform: none;
-
-    &:first-letter {
-      text-transform: none;
-    }
-  }
-
-  .info, .info a {
-    color: white !important;
-  }
-
-  .content {
-    height: auto;
-  }
-}
-
-.proposal-featured {
-  background: #FED900;
-
-  .panel h3 a {
-    color: $text;
-    text-transform: lowercase;
-
-    &:first-letter {
-      text-transform: uppercase;
-    }
-  }
-
-  .info {
-    color: #806C00 !important;
-  }
-
-  .content {
-    height: rem-calc(60);
-  }
-}
-
 .debate-featured, .proposal-featured {
   margin-bottom: 0;
   margin-top: 0;
@@ -1085,4 +1021,42 @@
       }
     }
   }
+}
+
+.debate-featured {
+  background: $votes-bg;
+  margin-bottom: rem-calc(12) !important;
+
+  .panel h3 a {
+    color: #0D3F54;
+    font-size: $h3-font-size;
+    margin: 0;
+  }
+
+  .info, .info a {
+    color: white !important;
+    font-size: $small-font-size;
+  }
+
+  .content {
+    height: auto;
+  }
+}
+
+.proposal-featured {
+  background: #FED900;
+
+  .panel h3 a {
+    color: $text;
+    font-size: $base-font-size;
+  }
+
+  .info {
+    color: #806C00 !important;
+    font-size: $small-font-size;
+  }
+
+  .content {
+    height: rem-calc(60);
+  }
 }
\ No newline at end of file