diff --git a/Gemfile b/Gemfile
index aa5c4b130..50b9e37e9 100644
--- a/Gemfile
+++ b/Gemfile
@@ -44,7 +44,7 @@ gem 'paranoia'
 gem 'rinku', require: 'rails_rinku'
 gem 'savon'
 gem 'dalli'
-gem 'rollbar', '~> 2.10.0'
+gem 'rollbar', '~> 2.11.0'
 gem 'delayed_job_active_record', '~> 4.1.0'
 gem 'daemons'
 gem 'devise-async'
diff --git a/Gemfile.lock b/Gemfile.lock
index 2dca7d163..450d0f27b 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -72,13 +72,13 @@ GEM
       babel-source (>= 4.0, < 6)
       execjs (~> 2.0)
     bcrypt (3.1.11)
-    browser (2.0.3)
+    browser (2.1.0)
     builder (3.2.2)
     bullet (5.0.0)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.9.0)
-    byebug (8.2.5)
-    cancancan (1.13.1)
+    byebug (9.0.4)
+    cancancan (1.14.0)
     capistrano (3.4.1)
       i18n
       rake (>= 10.0.0)
@@ -92,9 +92,9 @@ GEM
     capistrano-rvm (0.1.2)
       capistrano (~> 3.0)
       sshkit (~> 1.2)
-    capistrano3-delayed-job (1.7.0)
-      capistrano (>= 3.0.0)
-    capybara (2.7.0)
+    capistrano3-delayed-job (1.7.2)
+      capistrano (~> 3.0, >= 3.0.0)
+    capybara (2.7.1)
       addressable
       mime-types (>= 1.16)
       nokogiri (>= 1.3.3)
@@ -117,7 +117,7 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.10.0)
-    concurrent-ruby (1.0.1)
+    concurrent-ruby (1.0.2)
     coveralls (0.8.13)
       json (~> 1.8)
       simplecov (~> 0.11.0)
@@ -128,10 +128,10 @@ GEM
     dalli (2.7.6)
     database_cleaner (1.5.3)
     debug_inspector (0.0.2)
-    delayed_job (4.1.1)
-      activesupport (>= 3.0, < 5.0)
-    delayed_job_active_record (4.1.0)
-      activerecord (>= 3.0, < 5)
+    delayed_job (4.1.2)
+      activesupport (>= 3.0, < 5.1)
+    delayed_job_active_record (4.1.1)
+      activerecord (>= 3.0, < 5.1)
       delayed_job (>= 3.0, < 5)
     devise (3.5.7)
       bcrypt (~> 3.0)
@@ -148,7 +148,7 @@ GEM
       json
       thread
       thread_safe
-    email_spec (2.0.0)
+    email_spec (2.1.0)
       htmlentities (~> 4.3.3)
       launchy (~> 2.1)
       mail (~> 2.6.3)
@@ -180,7 +180,7 @@ GEM
     geocoder (1.3.4)
     globalid (0.3.6)
       activesupport (>= 4.1.0)
-    groupdate (2.5.2)
+    groupdate (2.5.3)
       activesupport (>= 3)
     gyoku (1.3.1)
       builder (>= 2.1.2)
@@ -232,8 +232,8 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2016.0221)
     mini_portile2 (2.0.0)
-    minitest (5.8.4)
-    multi_json (1.11.3)
+    minitest (5.9.0)
+    multi_json (1.12.1)
     multi_xml (0.5.5)
     multipart-post (2.0.0)
     net-scp (1.2.1)
@@ -322,10 +322,10 @@ GEM
     redcarpet (3.3.4)
     referer-parser (0.3.0)
     request_store (1.3.1)
-    responders (2.1.2)
+    responders (2.2.0)
       railties (>= 4.2.0, < 5.1)
-    rinku (1.7.3)
-    rollbar (2.10.0)
+    rinku (2.0.0)
+    rollbar (2.11.3)
       multi_json
     rspec (3.4.0)
       rspec-core (~> 3.4.0)
@@ -386,7 +386,7 @@ GEM
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
-    sshkit (1.9.0)
+    sshkit (1.10.0)
       net-scp (>= 1.1.2)
       net-ssh (>= 2.8.0)
     term-ansicolor (1.3.2)
@@ -395,14 +395,14 @@ GEM
     thor (0.19.1)
     thread (0.2.2)
     thread_safe (0.3.5)
-    tilt (2.0.2)
+    tilt (2.0.4)
     tins (1.6.0)
     tolk (1.9.3)
       rails (>= 4.0, < 4.3)
       safe_yaml (>= 0.8.6)
     turbolinks (2.5.3)
       coffee-rails
-    turnout (2.3.0)
+    turnout (2.3.1)
       rack (~> 1.3)
       rack-accept (~> 0.4)
       tilt (>= 1.4, < 3)
@@ -489,7 +489,7 @@ DEPENDENCIES
   redcarpet
   responders
   rinku
-  rollbar (~> 2.10.0)
+  rollbar (~> 2.11.0)
   rspec-rails (~> 3.3)
   sass-rails (~> 5.0, >= 5.0.4)
   savon
@@ -505,4 +505,4 @@ DEPENDENCIES
   whenever
 
 BUNDLED WITH
-   1.11.2
+   1.12.4
diff --git a/app/assets/images/header_bg.jpg b/app/assets/images/header_bg.jpg
deleted file mode 100644
index 4449c9897..000000000
Binary files a/app/assets/images/header_bg.jpg and /dev/null differ
diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
index 2eacc2021..22e7ac8de 100644
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -25,19 +25,21 @@
 //  20. Label
 //  21. Media Object
 //  22. Menu
-//  23. Off-canvas
-//  24. Orbit
-//  25. Pagination
-//  26. Progress Bar
-//  27. Reveal
-//  28. Slider
-//  29. Switch
-//  30. Table
-//  31. Tabs
-//  32. Thumbnail
-//  33. Title Bar
-//  34. Tooltip
-//  35. Top Bar
+//  23. Meter
+//  24. Off-canvas
+//  25. Orbit
+//  26. Pagination
+//  27. Progress Bar
+//  28. Reveal
+//  29. Slider
+//  30. Switch
+//  31. Table
+//  32. Tabs
+//  33. Thumbnail
+//  34. Title Bar
+//  35. Tooltip
+//  36. Top Bar
+//  37. Custom variables
 
 @import 'util/util';
 
@@ -47,26 +49,32 @@
 $global-font-size: 100%;
 $global-width: rem-calc(1200);
 $global-lineheight: 1.5;
-$primary-color: #2199e8;
-$secondary-color: #777;
-$success-color: #43ac6a;
-$warning-color: #ffae00;
-$alert-color: #ec5840;
+$foundation-palette: (
+  primary: #2199e8,
+  secondary: #777,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #ec5840,
+);
 $light-gray: #e6e6e6;
 $medium-gray: #cacaca;
 $dark-gray: #8a8a8a;
-$black: #0a0a0a;
-$white: #fefefe;
+$black: #222222;
+$white: #ffffff;
 $body-background: $white;
 $body-font-color: $black;
-$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-font-family: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif !important;
 $body-antialiased: true;
 $global-margin: 1rem;
 $global-padding: 1rem;
 $global-weight-normal: normal;
 $global-weight-bold: bold;
-$global-radius: 3px;
+$global-radius: rem-calc(3);
 $global-text-direction: ltr;
+$global-flexbox: false;
+$print-transparent-backgrounds: true;
+
+@include add-foundation-colors;
 
 // 2. Breakpoints
 // --------------
@@ -75,8 +83,6 @@ $breakpoints: (
   small: 0,
   medium: 640px,
   large: 1024px,
-  xlarge: 1200px,
-  xxlarge: 1440px,
 );
 $breakpoint-classes: (small medium large);
 
@@ -85,7 +91,7 @@ $breakpoint-classes: (small medium large);
 
 $grid-row-width: $global-width;
 $grid-column-count: 12;
-$grid-column-responsive-gutter: (
+$grid-column-gutter: (
   small: 20px,
   medium: 30px,
 );
@@ -101,20 +107,20 @@ $header-font-style: normal;
 $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
 $header-sizes: (
   small: (
-    'h1': 24,
-    'h2': 20,
-    'h3': 19,
+    'h1': 34,
+    'h2': 24,
+    'h3': 20,
     'h4': 18,
-    'h5': 17,
-    'h6': 16,
+    'h5': 16,
+    'h6': 14,
   ),
   medium: (
-    'h1': 48,
-    'h2': 40,
-    'h3': 31,
-    'h4': 25,
-    'h5': 20,
-    'h6': 16,
+    'h1': 44,
+    'h2': 34,
+    'h3': 24,
+    'h4': 19,
+    'h5': 16,
+    'h6': 13,
   ),
 );
 $header-color: inherit;
@@ -177,9 +183,9 @@ $stat-font-size: 2.5rem;
 
 $abide-inputs: true;
 $abide-labels: true;
-$input-background-invalid: $alert-color;
-$form-label-color-invalid: $alert-color;
-$input-error-color: $alert-color;
+$input-background-invalid: map-get($foundation-palette, alert);
+$form-label-color-invalid: map-get($foundation-palette, alert);
+$input-error-color: map-get($foundation-palette, alert);
 $input-error-font-size: rem-calc(12);
 $input-error-font-weight: $global-weight-bold;
 
@@ -231,11 +237,11 @@ $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
 $button-background: $primary-color;
 $button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: #fff;
-$button-color-alt: #000;
+$button-color: $white;
+$button-color-alt: $black;
 $button-radius: $global-radius;
 $button-sizes: (
-  tiny: $small-font-size,
+  tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
@@ -320,7 +326,7 @@ $fieldset-padding: rem-calc(20);
 $fieldset-margin: rem-calc(18 0);
 $legend-padding: rem-calc(0 3);
 $form-spacing: rem-calc(16);
-$helptext-color: #333;
+$helptext-color: $black;
 $helptext-font-size: rem-calc(13);
 $helptext-font-style: italic;
 $input-prefix-color: $black;
@@ -332,9 +338,10 @@ $form-label-font-size: rem-calc(14);
 $form-label-font-weight: $global-weight-normal;
 $form-label-line-height: 1.8;
 $select-background: $white;
-$select-triangle-color: #333;
+$select-triangle-color: $dark-gray;
 $select-radius: $global-radius;
 $input-color: $black;
+$input-placeholder-color: $medium-gray;
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-background: $white;
@@ -344,7 +351,7 @@ $input-border: 1px solid $medium-gray;
 $input-border-focus: 1px solid $dark-gray;
 $input-shadow: inset 0 1px 2px rgba($black, 0.1);
 $input-shadow-focus: 0 0 5px $medium-gray;
-$input-cursor-disabled: default;
+$input-cursor-disabled: not-allowed;
 $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
 $input-radius: $global-radius;
@@ -356,7 +363,7 @@ $label-background: $primary-color;
 $label-color: foreground($label-background);
 $label-font-size: 0.8rem;
 $label-padding: 0.33333rem 0.5rem;
-$label-radius: $global-radius*10;
+$label-radius: $global-radius;
 
 // 21. Media Object
 // ----------------
@@ -371,10 +378,21 @@ $mediaobject-image-width-stacked: 100%;
 $menu-margin: 0;
 $menu-margin-nested: 1rem;
 $menu-item-padding: 0.7rem 1rem;
+$menu-item-color-active: $white;
+$menu-item-background-active: map-get($foundation-palette, primary);
 $menu-icon-spacing: 0.25rem;
-$menu-expand-max: 6;
 
-// 23. Off-canvas
+// 23. Meter
+// ---------
+
+$meter-height: 1rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 24. Off-canvas
 // --------------
 
 $offcanvas-size: 250px;
@@ -387,7 +405,7 @@ $offcanvas-exit-background: rgba($white, 0.25);
 $maincontent-class: 'off-canvas-content';
 $maincontent-shadow: 0 0 10px rgba($black, 0.5);
 
-// 24. Orbit
+// 25. Orbit
 // ---------
 
 $orbit-bullet-background: $medium-gray;
@@ -402,7 +420,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
 $orbit-control-padding: 1rem;
 $orbit-control-zindex: 10;
 
-// 25. Pagination
+// 26. Pagination
 // --------------
 
 $pagination-font-size: rem-calc(14);
@@ -416,10 +434,10 @@ $pagination-item-background-current: $primary-color;
 $pagination-item-color-current: foreground($pagination-item-background-current);
 $pagination-item-color-disabled: $medium-gray;
 $pagination-ellipsis-color: $black;
-$pagination-mobile-items: true;
+$pagination-mobile-items: false;
 $pagination-arrows: true;
 
-// 26. Progress Bar
+// 27. Progress Bar
 // ----------------
 
 $progress-height: 1rem;
@@ -428,24 +446,24 @@ $progress-margin-bottom: $global-margin;
 $progress-meter-background: $primary-color;
 $progress-radius: $global-radius;
 
-// 27. Reveal
+// 28. Reveal
 // ----------
 
 $reveal-background: $white;
 $reveal-width: 600px;
 $reveal-max-width: $global-width;
-$reveal-offset: rem-calc(100);
 $reveal-padding: $global-padding;
 $reveal-border: 1px solid $medium-gray;
 $reveal-radius: $global-radius;
 $reveal-zindex: 1005;
 $reveal-overlay-background: rgba($black, 0.45);
 
-// 28. Slider
+// 29. Slider
 // ----------
 
+$slider-width-vertical: 0.5rem;
+$slider-transition: all 0.2s ease-in-out;
 $slider-height: 0.5rem;
-$slider-width-vertical: $slider-height;
 $slider-background: $light-gray;
 $slider-fill-background: $medium-gray;
 $slider-handle-height: 1.4rem;
@@ -453,9 +471,8 @@ $slider-handle-width: 1.4rem;
 $slider-handle-background: $primary-color;
 $slider-opacity-disabled: 0.25;
 $slider-radius: $global-radius;
-$slider-transition: all 0.2s ease-in-out;
 
-// 29. Switch
+// 30. Switch
 // ----------
 
 $switch-background: $medium-gray;
@@ -471,7 +488,7 @@ $switch-paddle-offset: 0.25rem;
 $switch-paddle-radius: $global-radius;
 $switch-paddle-transition: all 0.25s ease-out;
 
-// 30. Table
+// 31. Table
 // ---------
 
 $table-background: $white;
@@ -488,14 +505,13 @@ $table-foot-background: smart-scale($table-background, $table-color-scale);
 $table-head-font-color: $body-font-color;
 $show-header-for-stacked: false;
 
-// 31. Tabs
+// 32. Tabs
 // --------
 
 $tab-margin: 0;
 $tab-background: $white;
 $tab-background-active: $light-gray;
-$tab-border: $light-gray;
-$tab-item-color: foreground($tab-background, $primary-color);
+$tab-item-font-size: rem-calc(12);
 $tab-item-background-hover: $white;
 $tab-item-padding: 1.25rem 1.5rem;
 $tab-expand-max: 6;
@@ -504,7 +520,7 @@ $tab-content-border: $light-gray;
 $tab-content-color: foreground($tab-background, $primary-color);
 $tab-content-padding: 1rem;
 
-// 32. Thumbnail
+// 33. Thumbnail
 // -------------
 
 $thumbnail-border: solid 4px $white;
@@ -514,7 +530,7 @@ $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
 $thumbnail-transition: box-shadow 200ms ease-out;
 $thumbnail-radius: $global-radius;
 
-// 33. Title Bar
+// 34. Title Bar
 // -------------
 
 $titlebar-background: $black;
@@ -525,7 +541,7 @@ $titlebar-icon-color: $white;
 $titlebar-icon-color-hover: $medium-gray;
 $titlebar-icon-spacing: 0.25rem;
 
-// 34. Tooltip
+// 35. Tooltip
 // -----------
 
 $has-tip-font-weight: $global-weight-bold;
@@ -536,13 +552,77 @@ $tooltip-padding: 0.75rem;
 $tooltip-font-size: $small-font-size;
 $tooltip-pip-width: 0.75rem;
 $tooltip-pip-height: $tooltip-pip-width * 0.866;
-$tooltip-pip-offset: 1.25rem;
 $tooltip-radius: $global-radius;
 
-// 35. Top Bar
+// 36. Top Bar
 // -----------
 
 $topbar-padding: 0.5rem;
 $topbar-background: $light-gray;
+$topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 1rem;
 $topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+
+// 37. Custom variables
+// --------------------
+
+$base-font-size:      rem-calc(17);
+$base-line-height:    rem-calc(26);
+$small-font-size:     rem-calc(14);
+$line-height:         rem-calc(24);
+
+$brand:             #004A83;
+$body:              #E9E9E9;
+$background:        #EDEFF0;
+$border:            #DEE0E3;
+$dark:              darken($brand, 10%);
+
+$text:              #222222;
+$text-medium:       #999999;
+$text-light:        #CCCCCC;
+
+$link:              #2895F1;
+$link-hover:        #2178BF;
+
+$debates:           #008CCF;
+$votes-bg:          #26AEEE;
+$votes-border:      #1F94CB;
+
+$votes-like:        #7BD2A8;
+$votes-like-act:    #5D9E7F;
+$votes-unlike:      #EF8585;
+$votes-unlike-act:  #BD6A6A;
+
+$delete:            #F04124;
+$check:             #46DB91;
+
+$proposals:         #FFA42D;
+$proposals-border:  #CC8425;
+
+$budget:            #454372;
+$budget-hover:      #7571BF;
+
+$highlight:         #E7F2FC;
+$featured:          #FED900;
+
+$footer-bg:         #DEE0E2;
+$footer-color:      #171819;
+$footer-link:       #454A4C;
+$footer-border:     #BFC1C3;
+
+$success-bg:        #DFF0D8;
+$success-border:    #D6E9C6;
+$color-success:     #3C763D;
+
+$info-bg:           #D9EDF7;
+$info-border:       #BCE8F1;
+$color-info:        #31708F;
+
+$warning-bg:        #FCF8E3;
+$warning-border:    #FAEBCC;
+$color-warning:     #8A6D3B;
+
+$alert-bg:          #F2DEDE;
+$alert-border:      #EBCCD1;
+$color-alert:       #A94442;
diff --git a/app/assets/stylesheets/annotator_overrides.scss b/app/assets/stylesheets/annotator_overrides.scss
index 0a8dd92bb..962cdefd7 100644
--- a/app/assets/stylesheets/annotator_overrides.scss
+++ b/app/assets/stylesheets/annotator_overrides.scss
@@ -24,7 +24,7 @@
   border-radius: 0;
   bottom: $line-height;
   box-shadow: 0 0 5px rgba(0,0,0,0.05);
-  font-family: $font-sans;
+  font-family: $body-font-family;
   font-size: $base-font-size;
   line-height: $line-height;
   min-width: $line-height*13;
@@ -57,7 +57,7 @@
   border: none;
   box-shadow: none;
   color: $link;
-  font-family: $font-sans;
+  font-family: $body-font-family;
   font-size: $base-font-size;
   font-weight: normal;
   text-shadow: none;
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 71e74c251..36e055a4e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -2,7 +2,6 @@
 @import "foundation_and_overrides";
 @import "fonts";
 @import "icons";
-@import "variables";
 @import "mixins";
 @import "admin";
 @import "layout";
diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss
index abab720e0..88f17c7cc 100644
--- a/app/assets/stylesheets/datepicker_overrides.scss
+++ b/app/assets/stylesheets/datepicker_overrides.scss
@@ -85,7 +85,7 @@
         background: white;
 
         .ui-state-default {
-          background: $input-bg;
+          background: #F8F8F8;
           color: $text-medium;
         }
       }
diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss
index f175ce046..403d5566d 100644
--- a/app/assets/stylesheets/foundation_and_overrides.scss
+++ b/app/assets/stylesheets/foundation_and_overrides.scss
@@ -3,12 +3,6 @@
 @import 'settings';
 @import 'foundation';
 
-// If you'd like to include motion-ui, you need to install the motion-ui sass package.
-//
-// @import 'motion-ui/motion-ui';
-
-// We include everything by default.  To slim your CSS, remove components you don't use.
-
 @include foundation-global-styles;
 @include foundation-grid;
 @include foundation-typography;
@@ -18,7 +12,6 @@
 @include foundation-float-classes;
 @include foundation-accordion;
 @include foundation-accordion-menu;
-@include foundation-badge;
 @include foundation-breadcrumbs;
 @include foundation-button-group;
 @include foundation-callout;
@@ -31,10 +24,8 @@
 @include foundation-media-object;
 @include foundation-menu;
 @include foundation-off-canvas;
-@include foundation-orbit;
 @include foundation-pagination;
 @include foundation-progress-bar;
-@include foundation-slider;
 @include foundation-sticky;
 @include foundation-reveal;
 @include foundation-switch;
@@ -42,10 +33,4 @@
 @include foundation-tabs;
 @include foundation-thumbnail;
 @include foundation-title-bar;
-@include foundation-tooltip;
 @include foundation-top-bar;
-
-// If you'd like to include motion-ui, you need to install the motion-ui sass package.
-//
-// @include motion-ui-transitions;
-// @include motion-ui-animations;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ebd651f12..bbe74ac3d 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -6,72 +6,34 @@
 // 04. Tags
 // 05. Auth pages
 // 06. Forms
-// 07. Alerts
+// 07. Callout
 // 08. User account
 // 09. Search
 // 10. Official levels
-// 12. Tables
-// 13. Social
-// 14. Pages
-// 15. Verification
-// 16. Comments
-// 17. Flags
-// 18. Activity
+// 11. Tables
+// 12. Social
+// 13. Pages
+// 14. Verification
+// 15. Comments
+// 16. Flags
+// 17. Activity
 //
 
 // 01. Global styles
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-*, html {
-  margin: 0;
-  padding: 0;
-}
-
-html, body {
-  height: 100%;
-}
+// -----------------
 
 body {
-  background: white;
-  color: $text;
-  font-family: $font-sans;
   font-size: $base-font-size;
 }
 
 h1, h2, h3, h4, h5, h6 {
   clear: both;
-  font-family: $font-sans;
-  font-weight: $font-bold;
-}
-
-h1 {
-  @include h1();
-}
-
-h2 {
-  @include h2();
-}
-
-h3 {
-  @include h3();
-}
-
-h4 {
-  @include h4();
-}
-
-h5 {
-  @include h5();
-}
-
-h6 {
-  @include h6();
-  font-weight: $font-normal;
+  font-weight: 700;
 }
 
 p {
   font-size: $base-font-size;
-  font-weight: $font-normal;
+  font-weight: 400;
   line-height: $base-line-height;
 }
 
@@ -200,7 +162,7 @@ a {
   width: 100%;
 
   a.close {
-    font-size: $h2-font-size;
+    font-size: rem-calc(34);
     top: 20%;
   }
 }
@@ -216,13 +178,6 @@ a {
   border: 0;
 }
 
-#drop-help.f-dropdown.content {
-
-  @media (min-width: $small-breakpoint) {
-    max-width: $line-height*15;
-  }
-}
-
 .menu.simple {
   border-bottom: 1px solid $border;
   margin: $line-height 0;
@@ -258,11 +213,13 @@ a {
 }
 
 .back, .icon-angle-left {
-  @include back;
+  clear: both;
+  color: $text-medium;
+  float: left;
 }
 
 // 02. Header
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ----------
 
 header {
   background: $brand;
@@ -274,13 +231,9 @@ header {
   }
 
   .locale {
-    float: none;
+    float: left;
     height: $line-height*1.5;
-
-    @media (min-width: $small-breakpoint) {
-      float: left;
-      margin-left: $line-height/2;
-    }
+    margin-left: $line-height/2;
   }
 
   .external-links {
@@ -288,7 +241,7 @@ header {
     padding: rem-calc(6) 0;
     text-align: center;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(medium) {
       float: right;
     }
   }
@@ -302,7 +255,7 @@ header {
   padding-bottom: 0;
   padding-top: 0;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(medium) {
     padding: 0;
   }
 
@@ -322,7 +275,7 @@ header {
     &.menu > li {
       display: block;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(medium) {
         display: table-cell;
         height: $line-height*3.5;
       }
@@ -331,7 +284,7 @@ header {
         color: white;
         padding-left: 0;
 
-        @media (min-width: $small-breakpoint) {
+        @include breakpoint(medium) {
           font-size: $small-font-size;
           padding: rem-calc(11) rem-calc(16);
         }
@@ -339,7 +292,7 @@ header {
         &.button {
           text-align: left;
 
-          @media (min-width: $small-breakpoint) {
+          @include breakpoint(medium) {
             background: white;
             color: $brand;
             text-align: center;
@@ -377,7 +330,7 @@ header {
 
 .subnavigation {
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(medium) {
     background: white;
     padding-bottom: 0;
   }
@@ -387,7 +340,7 @@ header {
     margin: 0;
 
     li {
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(medium) {
         display: inline-block;
         margin-right: rem-calc(36);
       }
@@ -400,7 +353,7 @@ header {
         text-align: left;
         width: 100%;
 
-        @media (min-width: $small-breakpoint) {
+        @include breakpoint(medium) {
           color: $text;
           display: block;
           font-weight: bold;
@@ -416,7 +369,7 @@ header {
         &.active {
           color: white;
 
-          @media (min-width: $small-breakpoint) {
+          @include breakpoint(medium) {
             border-bottom: 2px solid $brand;
             color: $brand;
           }
@@ -428,7 +381,7 @@ header {
   .input-group {
     padding-top: $line-height/4;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(medium) {
       margin-bottom: 0;
     }
   }
@@ -473,7 +426,7 @@ header {
     position: relative;
     text-align: left;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(medium) {
       margin-right: $line-height*1.5;
     }
 
@@ -493,13 +446,13 @@ header {
 }
 
 // 03. Footer
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ----------
 
 footer {
   color: $footer-color;
 
   .logo a {
-    font-family: $font-logo;
+    font-family: 'Lato' !important;
     text-decoration: none;
 
     &:hover {
@@ -528,11 +481,10 @@ footer {
   }
 
   h2 a {
-
     border-bottom: 1px solid $footer-border;
     display: block;
-    font-size: $h3-font-size;
-    line-height: $h3-line-height;
+    font-size: rem-calc(24);
+    line-height: rem-calc(31);
     padding-bottom: $line-height/4;
     text-decoration: none;
   }
@@ -551,7 +503,7 @@ footer {
 }
 
 // 04. Tags
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// --------
 
 .tags a , .tag-cloud a, .categories a, .geozone a, .sidebar-links a {
   background: #ececec;
@@ -588,7 +540,7 @@ h3.sidebar-title {
 }
 
 // 05. Auth pages
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// --------------
 
 .auth-page {
   background: $brand image-url("auth_bg.jpg");
@@ -604,7 +556,7 @@ h3.sidebar-title {
       line-height: rem-calc(80); // Same as logo image height
       text-align: center;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(medium) {
         display: inline-block;
         text-align: left;
       }
@@ -625,7 +577,7 @@ h3.sidebar-title {
 }
 
 // 06. Forms
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ---------
 
 form.locale-form {
   display: inline-block;
@@ -669,7 +621,6 @@ form.locale-form {
 }
 
 form {
-  font-family: $font-sans;
 
   label {
     font-size: $base-font-size;
@@ -710,7 +661,7 @@ form {
   }
 
   input[type]:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]) {
-    background: $input-bg;
+    background: #F8F8F8;
     height: $line-height*2;
     margin-bottom: rem-calc(16);
 
@@ -756,32 +707,31 @@ form {
   }
 }
 
-// 07. Alerts
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// 07. Callout
+// -----------
 
 .callout {
-  font-family: $font-sans;
   font-size: $small-font-size;
 
   &.success, &.notice {
     background-color: $success-bg;
     border-color: $success-border;
-    color: $success-color;
+    color: $color-success;
   }
 
   &.primary {
     background-color: $info-bg;
     border-color: $info-border;
-    color: $info-color;
+    color: $color-info;
   }
 
   &.warning {
     background-color: $warning-bg;
     border-color: $warning-border;
-    color: $warning-color;
+    color: $color-warning;
 
     a {
-      color: $warning-color;
+      color: $color-warning;
       font-weight: bold;
       text-decoration: underline;
     }
@@ -790,7 +740,7 @@ form {
   &.alert, &.error {
     background-color: $alert-bg;
     border-color: $alert-border;
-    color: $alert-color;
+    color: $color-alert;
   }
 
   .close {
@@ -800,27 +750,27 @@ form {
 
 span.error, small.error {
   background: $alert-bg;
-  color: $alert-color;
+  color: $color-alert;
 }
 
 span.no-error, small.no-error {
   background: $success-bg;
-  color: $success-color;
+  color: $color-success;
 }
 
 .error small.error {
   background: $alert-bg;
-  color: $alert-color;
+  color: $color-alert;
   display: inline-block;
   margin: 0 $line-height/4;
 }
 
 label.error, label.error a {
-  color: $alert-color;
+  color: $color-alert;
 }
 
 // 08. User account
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ----------------
 
 .account {
 
@@ -836,7 +786,7 @@ label.error, label.error a {
   .final-votes-info {
     background: $warning-bg;
     border: 1px solid $warning-border;
-    color: $warning-color;
+    color: $color-warning;
     margin-top: $line-height;
     padding: $line-height/2;
 
@@ -913,16 +863,16 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   }
 
   [class^="icon-"] {
-    font-size: $h4-font-size;
+    font-size: rem-calc(19);
     vertical-align: middle;
   }
 
   .icon-circle {
     color: #ecf00b;
-    font-size: $tiny-font-size;
+    font-size: rem-calc(10);
     position: absolute;
-    right: 4px;
-    top: -6px;
+    right: 8px;
+    top: 6px;
   }
 }
 
@@ -930,9 +880,9 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   background: $border;
   content: '';
   height: 100%;
-  left: 28px;
+  left: 22px;
   position: absolute;
-  top: 84px;
+  top: 60px;
   width: 2px;
 }
 
@@ -961,7 +911,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
     color: $brand;
     content: "\4d";
     font-family: "icons" !important;
-    left: 6px;
+    left: 0;
     position: absolute;
   }
 
@@ -977,32 +927,27 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
 }
 
 // 09. Search
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ----------
 
-.search-form {
-
-  h3 {
-    border-top: 1px solid $votes-border;
-    display: inline-block;
-    font-size: rem-calc(16);
-    margin: -1px 0 $line-height/2;
-    padding-top: $line-height/4;
-    text-transform: uppercase;
-  }
+.search-form h3 {
+  border-top: 1px solid $votes-border;
+  display: inline-block;
+  font-size: rem-calc(16);
+  margin: -1px 0 $line-height/2;
+  padding-top: $line-height/4;
+  text-transform: uppercase;
 }
 
-.search-results {
-
-  h2 {
-    margin-bottom: 0;
-  }
+.search-results h2 {
+  margin-bottom: 0;
 }
 
 .advanced-search {
   float: left;
   margin: $line-height 0;
+  position: inherit;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(medium) {
     float: right;
     margin-bottom: 0;
     margin-top: rem-calc(28);
@@ -1019,55 +964,46 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
     height: $line-height*2;
   }
 
-  @media (max-width: $medium-breakpoint) {
-
-    .column {
+  @include breakpoint(medium) {
+    & > .column {
       padding: 0;
     }
   }
 }
 
 // 10. Officials levels
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// --------------------
 
 [class^="level-"] {
   color: white;
 }
 
 .is-author {
-  background: $author;
+  background: #008CCF;
 }
 
 .is-association {
-  background: $association;
+  background: #C0392B;
 }
 
 .is-deleted {
-  background: $deleted;
+  background: #E7E7E7;
 }
 
 .level-1 {
-  background: $level-1;
+  background: #1ABC9C;
 }
 
-.level-2 {
-  background: $level-2;
-}
-
-.level-3 {
-  background: $level-3;
-}
-
-.level-4 {
-  background: $level-4;
+.level-2, .level-3, .level-4 {
+  background: #43AC6A;
 }
 
 .level-5 {
-  background: $level-5;
+  background: #F08A24;
 }
 
-// 12. Tables
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// 11. Tables
+// ----------
 
 table {
   border: $border;
@@ -1100,8 +1036,8 @@ table {
   }
 }
 
-// 13. Social
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// 12. Social
+// ----------
 
 .button.button-twitter,
 .button.button-facebook,
@@ -1232,7 +1168,7 @@ table {
 .social {
 
   a {
-    font-size: $h3-font-size;
+    font-size: rem-calc(24);
     margin: 0 $line-height/2;
     text-decoration: none;
 
@@ -1318,8 +1254,8 @@ table {
   }
 }
 
-// 14. Pages
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// 13. Pages
+// ---------
 
 .more-information {
 
@@ -1358,7 +1294,7 @@ table {
         right: 0;
         top: 24px;
 
-        @media (min-width: $small-breakpoint) {
+        @include breakpoint(medium) {
           content: 'c';
         }
       }
@@ -1366,12 +1302,12 @@ table {
   }
 }
 
-// 15. Verification
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// 14. Verification
+// ----------------
 
 .verification {
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(medium) {
     .left + .left {
       margin-left: $line-height/2;
     }
@@ -1383,7 +1319,7 @@ table {
       float: left;
       width: 30%;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(medium) {
         width: 25%;
       }
     }
@@ -1392,7 +1328,7 @@ table {
   .progress {
     height: $line-height*3;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(medium) {
       height: $line-height*2;
     }
 
@@ -1409,7 +1345,7 @@ table {
     text-transform: uppercase;
     vertical-align: top;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(medium) {
       line-height: $line-height*2;
       padding: 0;
     }
@@ -1417,7 +1353,7 @@ table {
     .number {
       display: block;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(medium) {
         background-color: white;
         border-radius: rem-calc(30);
         color: #43AC6A;
@@ -1507,7 +1443,7 @@ table {
 
     .icon-letter {
       background: white;
-      color: $info-color;
+      color: $color-info;
       font-size: rem-calc(24);
       margin-left: -27px;
       padding: 0 $line-height/2;
@@ -1517,8 +1453,8 @@ table {
   }
 }
 
-// 16. Comments
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// 15. Comments
+// ------------
 
 .comments {
   background: $white;
@@ -1547,7 +1483,6 @@ table {
 
     .comment-votes {
       color: $text-medium;
-      font-family: $font-sans;
       font-size: $small-font-size;
       line-height: $line-height;
 
@@ -1596,42 +1531,28 @@ table {
         padding: $line-height/4 0;
         overflow: hidden;
 
-        @each $n in ("1", "2", "3","4", "5") {
-          &.level-#{$n} {
-            @if $n == "5" {
-              background: $comment-level-5;
-              padding: $line-height/4 $line-height/2;
-            }
-            @elseif $n == "1" {
-              background: none;
-              padding: $line-height/4 $line-height/2;
-            }
-            @else {
-              background: $comment-official;
-              padding: $line-height/4 $line-height/2;
-            }
-          }
-        }
-
-        &.is-author {
-          background: $comment-author;
+        &.level-1, &.level-2, &.level-3, &.level-4, &.level-5,
+        &.is-author, &.is-admin, &.is-moderator {
+          background: rgba(70,219,145,.3);
           padding: $line-height/4 $line-height/2;
         }
 
-        &.is-admin, &.is-moderator {
-          background: $comment-admin;
-          padding: $line-height/4 $line-height/2;
+        &.level-1 {
+          background: none;
         }
 
         &.level-5 {
-          background: $comment-level-5;
-          padding: $line-height/4 $line-height/2;
+          background: rgba(255,241,204,1);
+        }
+
+        &.is-author, &.is-admin, &.is-moderator {
+          background: rgba(45,144,248,.15);
         }
       }
     }
 
     .is-deleted {
-      background: $deleted;
+      background: #E7E7E7;
       margin-left: rem-calc(42);
       padding: $line-height/4 $line-height/2;
     }
@@ -1648,7 +1569,6 @@ table {
 
     .comment-info {
       color: $text-medium;
-      font-family: $font-sans;
       font-size: $small-font-size;
       margin-top: $line-height/4;
       vertical-align: middle;
@@ -1669,7 +1589,7 @@ table {
   float: none;
   margin-top: 0;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(medium) {
     float: right;
     margin-top: rem-calc(-24);
   }
@@ -1678,14 +1598,14 @@ table {
     padding-right: $line-height/2;
     float: none;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(medium) {
       float: right;
     }
   }
 }
 
-// 17. Flags
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// 16. Flags
+// ---------
 
 .flag-content {
 
@@ -1712,8 +1632,8 @@ table {
   color: $text-medium;
 }
 
-// 18. Activity
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// 17. Activity
+// ------------
 
 .activity {
   margin-bottom: $line-height*2;
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 4e99acaab..b1947768b 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -1,24 +1,18 @@
 // Table of Contents
 //
-// 01. Mixins
+// 01. Logo
 //
 
-// 01. Mixins
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-@mixin back {
-  clear: both;
-  color: $text-medium;
-  float: left;
-}
+// 01. Logo
+// --------
 
 @mixin logo {
   color: white;
-  font-family: $font-logo;
-  font-size: $h3-font-size;
+  font-family: 'Lato' !important;
+  font-size: rem-calc(24);
   font-weight: lighter;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     line-height: $line-height*2;
     margin-top: 0;
   }
@@ -27,7 +21,7 @@
     height: 48px;
     width: 48px;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       height: 80px;
       margin-right: $line-height/2;
       margin-top: 0;
@@ -35,59 +29,3 @@
     }
   }
 }
-
-@mixin h1 {
-  font-size: $h2-font-size;
-  line-height: $h2-line-height;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: $h1-font-size;
-    line-height: $h1-line-height;
-  }
-}
-
-@mixin h2 {
-  font-size: $h3-font-size;
-  line-height: $h3-line-height;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: $h2-font-size;
-    line-height: $h2-line-height;
-  }
-}
-
-@mixin h3 {
-  font-size: $h4-font-size;
-  line-height: $h4-line-height;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: $h3-font-size;
-    line-height: $h3-line-height;
-  }
-}
-
-@mixin h4 {
-  font-size: $h5-font-size;
-  line-height: $h5-line-height;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: $h4-font-size;
-    line-height: $h4-line-height;
-  }
-}
-
-@mixin h5 {
-  font-size: $h6-font-size;
-  line-height: $h6-line-height;
-
-  @media (min-width: $small-breakpoint) {
-    font-size: $h5-font-size;
-    line-height: $h5-line-height;
-  }
-}
-
-@mixin h6 {
-  font-size: $h6-font-size;
-  line-height: $h6-line-height;
-  text-transform: uppercase;
-}
\ No newline at end of file
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 43936f9ed..502fe62aa 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1,4 +1,4 @@
-// Table of Contents - Styles for debates and proposals
+// Table of Contents
 //
 // 01. Votes and supports
 // 02. New participation
@@ -8,12 +8,11 @@
 //
 
 // 01. Votes and supports
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ----------------------
 
 @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;
@@ -130,7 +129,7 @@
 
   .anonymous-votes, .organizations-votes {
     background: $warning-bg;
-    color: $warning-color;
+    color: $color-warning;
     height: 100%;
     left: 0;
     line-height: $line-height;
@@ -141,13 +140,13 @@
     width: 100%;
 
     p {
-      color: $warning-color;
+      color: $color-warning;
       margin: 0 rem-calc(12);
       text-align: left;
     }
 
     a {
-      color: $warning-color;
+      color: $color-warning;
       font-weight: bold;
       text-decoration: underline;
     }
@@ -157,7 +156,6 @@
 @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;
@@ -242,7 +240,7 @@
 
   .anonymous-votes, .organizations-votes, .no-supports-allowed {
     background: $warning-bg;
-    color: $warning-color;
+    color: $color-warning;
     height: 100%;
     left: 0;
     line-height: $line-height;
@@ -253,13 +251,13 @@
     width: 100%;
 
     p {
-      color: $warning-color;
+      color: $color-warning;
       margin: 0 rem-calc(12);
       text-align: left;
     }
 
     a {
-      color: $warning-color;
+      color: $color-warning;
       font-weight: bold;
       text-decoration: underline;
     }
@@ -272,16 +270,12 @@
 }
 
 // 02. New participation
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ---------------------
 
 .debate-new, .debate-edit,
 .proposal-new, .proposal-edit,
 .spending-proposal-new, .spending-proposal-edit {
 
-  .back {
-    @include back;
-  }
-
   .icon-debates {
     color: $debates;
     font-size: rem-calc(60);
@@ -335,7 +329,7 @@
 }
 
 // 03. Show participation
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ----------------------
 
 .debate-show, .proposal-show, .investment-project-show {
 
@@ -491,7 +485,7 @@
       padding: rem-calc(24);
     }
 
-    @media (min-width: $small-breakpoint  + rem-calc(1)) and (max-width:$medium-breakpoint) {
+    @include breakpoint(small + rem-calc(1) and medium down) {
       .in-favor, .against {
         text-align: left;
         width: rem-calc(100);
@@ -502,7 +496,7 @@
       display: none;
     }
 
-    @media (min-width: $medium-breakpoint) {
+    @include breakpoint(medium) {
       .divider {
         display: inline-block;
       }
@@ -550,18 +544,18 @@
 }
 
 // 04. List participation
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ----------------------
 
 .debates-list, .proposals-list, .investment-projects-list {
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     margin-bottom: rem-calc(48);
   }
 }
 
 .investment-projects-list {
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     min-height: $line-height*15;
   }
 }
@@ -580,7 +574,7 @@
     min-height: rem-calc(192);
     padding: rem-calc(12) rem-calc(12) 0 rem-calc(12);
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       margin-bottom: rem-calc(-1);
       padding-bottom: rem-calc(12);
     }
@@ -589,7 +583,6 @@
       background: none;
       clear: both;
       display: block;
-      font-family: $font-sans;
       font-size: rem-calc(12);
       font-weight: bold;
       line-height: $line-height;
@@ -715,7 +708,7 @@
     display: none;
   }
 
-  @media (min-width: $medium-breakpoint) {
+  @include breakpoint(medium) {
     .divider {
       display: inline-block;
     }
@@ -729,7 +722,7 @@
     border: 1px solid $votes-border;
     margin: 0 rem-calc(-12);
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       border-top-left-radius: 3px;
       border-bottom-left-radius: 3px;
       margin: 0 rem-calc(-25) 0 rem-calc(12);
@@ -747,7 +740,7 @@
       right: -1px;
       border-width: 13px 13px 0 0;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         content: "";
       }
     }
@@ -759,7 +752,7 @@
       padding-top: rem-calc(12);
       vertical-align: top;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         display: block;
         float: none;
         line-height: $line-height*2;
@@ -768,7 +761,7 @@
       }
     }
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       .like, .unlike {
 
         span.percentage {
@@ -787,7 +780,7 @@
     border: 1px solid $proposals-border;
     margin: 0 rem-calc(-12);
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       border-top-left-radius: 3px;
       border-bottom-left-radius: 3px;
       margin: 0 rem-calc(-25) 0 rem-calc(12);
@@ -805,7 +798,7 @@
       right: -1px;
       border-width: 13px 13px 0 0;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         content: "";
       }
     }
@@ -816,7 +809,7 @@
       padding-top: rem-calc(12);
       vertical-align: top;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         display: block;
         float: none;
         margin-left: 0;
@@ -837,7 +830,7 @@
     min-height: rem-calc(180);
     padding-top: 0;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       padding-top: $line-height*1.5;
     }
 
@@ -924,12 +917,12 @@
 }
 
 // 05. Featured
-// - - - - - - - - - - - - - - - - - - - - - - - - -
+// ------------
 
 .featured-debates, .featured-proposals {
   padding: $line-height/2 0;
 
-  @media (min-width: $medium-breakpoint) {
+  @include breakpoint(medium) {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
@@ -945,7 +938,7 @@
 
     a {
       color: $text;
-      font-size: $h3-font-size;
+      font-size: rem-calc(24);
     }
   }
 
@@ -990,18 +983,18 @@
     .organizations-votes,
     .anonymous-votes {
       background: $featured;
-      color: $warning-color;
+      color: $color-warning;
       font-size: $small-font-size;
       line-height: $line-height;
       padding-top: 0;
 
       a {
-        color: $warning-color;
+        color: $color-warning;
         font-weight: bold;
       }
 
       p {
-        color: $warning-color;
+        color: $color-warning;
         font-size: $small-font-size;
         line-height: $line-height;
       }
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
deleted file mode 100644
index 5d59ebf8f..000000000
--- a/app/assets/stylesheets/variables.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-// Table of Contents
-//
-// 01. Typography
-// 02. Colors
-// 03. Forms
-// 04. Alerts
-// 05. Levels
-// 06. Responsive
-//
-
-// 01. Typography
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$font-logo:           'Lato' !important;
-$font-sans:           'Source Sans Pro', 'Helvetica', 'Arial', sans-serif !important;
-
-$font-normal:         400;
-$font-bold:           700;
-
-$base-font-size:      rem-calc(17);
-$base-line-height:    rem-calc(26);
-
-$h1-font-size:        rem-calc(44);
-$h1-line-height:      rem-calc(57);
-
-$h2-font-size:        rem-calc(34);
-$h2-line-height:      rem-calc(44);
-
-$h3-font-size:        rem-calc(24);
-$h3-line-height:      rem-calc(31);
-
-$h4-font-size:        rem-calc(19);
-$h4-line-height:      rem-calc(25);
-
-$h5-font-size:        rem-calc(16);
-$h5-line-height:      rem-calc(21);
-
-$h6-font-size:        rem-calc(13);
-$h6-line-height:      rem-calc(17);
-
-$small-font-size:     rem-calc(14);
-$tiny-font-size:      rem-calc(10);
-$line-height:         rem-calc(24);
-
-// 02. Colors
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$brand:             #004A83;
-$body:              #E9E9E9;
-$background:        #EDEFF0;
-$border:            #DEE0E3;
-$dark:              darken($brand, 10%);
-
-$text:              #222222;
-$text-medium:       #999999;
-$text-light:        #CCCCCC;
-
-$link:              #2895F1;
-$link-hover:        #2178BF;
-
-$debates:           #008CCF;
-$votes-bg:          #26AEEE;
-$votes-border:      #1F94CB;
-
-$votes-like:        #7BD2A8;
-$votes-like-act:    #5D9E7F;
-$votes-unlike:      #EF8585;
-$votes-unlike-act:  #BD6A6A;
-
-$delete:            #F04124;
-$check:             #46DB91;
-
-$proposals:         #FFA42D;
-$proposals-border:  #CC8425;
-
-$budget:            #454372;
-$budget-hover:      #7571BF;
-
-$highlight:         #E7F2FC;
-$featured:          #FED900;
-
-$footer-bg:         #DEE0E2;
-$footer-color:      #171819;
-$footer-link:       #454A4C;
-$footer-border:     #BFC1C3;
-
-// 03. Forms
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$input-bg:          #F8F8F8;
-
-// 04. Alerts
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$success-bg:        #DFF0D8;
-$success-border:    #D6E9C6;
-$success-color:     #3C763D;
-
-$info-bg:	          #D9EDF7;
-$info-border:       #BCE8F1;
-$info-color:        #31708F;
-
-$warning-bg:        #FCF8E3;
-$warning-border:    #FAEBCC;
-$warning-color:     #8A6D3B;
-
-$alert-bg:          #F2DEDE;
-$alert-border:      #EBCCD1;
-$alert-color:       #A94442;
-
-// 05. Levels
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$level-1:           #1ABC9C;
-$level-2:           #43AC6A;
-$level-3:           #43AC6A;
-$level-4:           #43AC6A;
-$level-5:           #F08A24;
-
-$author:            #008CCF;
-$association:       #C0392B;
-$deleted:           #E7E7E7;
-
-$comment-author:    rgba(45,144,248,.15);
-$comment-level-5:   rgba(255,241,204,1);
-$comment-admin:     rgba(45,144,248,.15);
-$comment-official:  rgba(70,219,145,.3);
-
-// 06. Responsive
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$small:             rem-calc(480);
-$small-breakpoint:  rem-calc(640);
-$medium-breakpoint: rem-calc(1024);
-$large-breakpoint:  rem-calc(1440);
-$xlarge-breakpoint: rem-calc(1920);
diff --git a/app/controllers/admin/stats_controller.rb b/app/controllers/admin/stats_controller.rb
index f21ceea9b..abfecdd7f 100644
--- a/app/controllers/admin/stats_controller.rb
+++ b/app/controllers/admin/stats_controller.rb
@@ -18,8 +18,7 @@ class Admin::StatsController < Admin::BaseController
     @verified_users = User.with_hidden.level_two_or_three_verified.count
     @unverified_users = User.with_hidden.unverified.count
     @users = User.with_hidden.count
-    @user_ids_who_voted_proposals =
-     ActsAsVotable::Vote.where(votable_type: 'Proposal').pluck(:voter_id).uniq.count
+    @user_ids_who_voted_proposals = ActsAsVotable::Vote.where(votable_type: 'Proposal').distinct.count(:voter_id)
     @user_ids_who_didnt_vote_proposals = @verified_users - @user_ids_who_voted_proposals
     @spending_proposals = SpendingProposal.count
 
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index 5796dbfd7..889e5395d 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -1,5 +1,5 @@
-<div class="row">
-  <div class="small-12 column">
+<div class="row margin-bottom">
+  <div class="small-12 column relative">
 
     <h1 class="float-left"><%= t("notifications.index.title") %></h1>
 
diff --git a/app/views/pages/more_information.html.erb b/app/views/pages/more_information.html.erb
index 08e733ebb..07105ef0f 100644
--- a/app/views/pages/more_information.html.erb
+++ b/app/views/pages/more_information.html.erb
@@ -1,6 +1,6 @@
 <% provide :title do %><%= t('pages.titles.more_information') %><% end %>
 <div class="row">
-  <div class="more-information small-12 medium-7 column">
+  <div class="more-information small-12 medium-9 large-7 column">
     <h1><%= t('pages.titles.more_information') %></h1>
     <ul class="no-bullet">
       <li>
diff --git a/app/views/shared/_advanced_search.html.erb b/app/views/shared/_advanced_search.html.erb
index ecab790b6..7b9d3d6c4 100644
--- a/app/views/shared/_advanced_search.html.erb
+++ b/app/views/shared/_advanced_search.html.erb
@@ -6,50 +6,46 @@
   <%= form_tag search_path, method: :get do %>
     <div id='js-advanced-search' data-advanced-search-terms=<%= @advanced_search_terms.present? %> style="display: none">
 
-      <div class="small-12">
+      <div class="small-12 column">
         <label><%= t("shared.advanced_search.general") %></label>
         <%= text_field_tag "search", params[:search],
                            placeholder: t("shared.advanced_search.general_placeholder") %>
       </div>
 
-      <div class="row">
-        <div class="small-12 large-3 column">
-          <label><%= t("shared.advanced_search.author_type") %></label>
-          <%= select_tag('advanced_search[official_level]', official_level_search_options,
-                        include_blank: t("shared.advanced_search.author_type_blank")) %>
+      <div class="small-12 large-3 column">
+        <label><%= t("shared.advanced_search.author_type") %></label>
+        <%= select_tag('advanced_search[official_level]', official_level_search_options,
+                      include_blank: t("shared.advanced_search.author_type_blank")) %>
+      </div>
+
+      <div class="small-12 large-9">
+        <div class="small-12 large-4 column">
+          <label><%= t("shared.advanced_search.date") %></label>
+          <%= select_tag('advanced_search[date_min]', date_range_options,
+                        include_blank: t("shared.advanced_search.date_range_blank"),
+                        id: 'js-advanced-search-date-min') %>
         </div>
 
-        <div class="small-12 large-9 column">
-          <div class="small-12 large-4 column">
-            <label><%= t("shared.advanced_search.date") %></label>
-            <%= select_tag('advanced_search[date_min]', date_range_options,
-                          include_blank: t("shared.advanced_search.date_range_blank"),
-                          id: 'js-advanced-search-date-min') %>
+        <div id='js-custom-date' class='small-12 large-8 column' style="display: none">
+          <div class='small-12 large-6 column'>
+            <label><%= t("shared.advanced_search.from") %></label>
+            <%= text_field_tag 'advanced_search[date_min]',
+                                params[:advanced_search].try(:[], :date_min),
+                                placeholder: t("shared.advanced_search.date_placeholder"),
+                                class: 'js-calendar' %>
           </div>
-
-          <div id='js-custom-date' class='small-12 large-8 column' style="display: none">
-            <div class='small-12 large-6 column'>
-              <label><%= t("shared.advanced_search.from") %></label>
-              <%= text_field_tag 'advanced_search[date_min]',
-                                  params[:advanced_search].try(:[], :date_min),
-                                  placeholder: t("shared.advanced_search.date_placeholder"),
-                                  class: 'js-calendar' %>
-            </div>
-            <div class='small-12 large-6 column'>
-              <label><%= t("shared.advanced_search.to") %></label>
-              <%= text_field_tag 'advanced_search[date_max]',
-                                  params[:advanced_search].try(:[], :date_max),
-                                  placeholder: t("shared.advanced_search.date_placeholder"),
-                                  class: 'js-calendar' %>
-            </div>
+          <div class='small-12 large-6 column'>
+            <label><%= t("shared.advanced_search.to") %></label>
+            <%= text_field_tag 'advanced_search[date_max]',
+                                params[:advanced_search].try(:[], :date_max),
+                                placeholder: t("shared.advanced_search.date_placeholder"),
+                                class: 'js-calendar' %>
           </div>
         </div>
       </div>
 
-      <div class="row medium-uncollapse">
-        <div class="small-12 medium-3 column end">
-          <%= submit_tag t("shared.advanced_search.search"), class: 'button expanded' %>
-        </div>
+      <div class="small-12 medium-3 column end clear">
+        <%= submit_tag t("shared.advanced_search.search"), class: 'button expanded' %>
       </div>
 
     </div>