diff --git a/Gruntfile.js b/Gruntfile.js
index aa15bf09bd..376e5635a9 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -9,7 +9,8 @@ module.exports = function(grunt){
           sourcemap: true,
           includePaths: [
             'govuk_modules/govuk_template/assets/stylesheets',
-            'govuk_modules/govuk_frontend_toolkit/stylesheets'
+            'govuk_modules/govuk_frontend_toolkit/stylesheets',
+            'govuk_modules/govuk-elements-sass/'
           ],
           outputStyle: 'expanded'
         },
@@ -63,14 +64,7 @@ module.exports = function(grunt){
           src: '**',
           dest: 'lib/'
         }]
-      },
-      govuk_elements: {
-        files: [{
-          cwd: 'govuk_modules/govuk-elements-sass',
-          src: ['**'],
-          dest: 'app/assets/sass/'
-        }]
-      },
+      }
     },
 
     // Watches assets and sass for changes
diff --git a/app/assets/sass/_govuk-elements.scss b/app/assets/sass/_govuk-elements.scss
deleted file mode 100644
index 50abc55ba8..0000000000
--- a/app/assets/sass/_govuk-elements.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-// GOV.UK front end toolkit
-// Sass variables, mixins and functions
-// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
-
-// Settings (variables)
-@import "colours";                                // Colour variables
-@import "font_stack";                             // Font family variables
-@import "measurements";                           // Widths and gutter variables
-
-// Mixins
-@import "conditionals";                           // Media query mixin
-@import "device-pixels";                          // Retina image mixin
-@import "grid_layout";                            // Basic grid layout mixin
-@import "typography";                             // Core bold and heading mixins, also external links
-@import "shims";                                  // Inline block mixin, clearfix placeholder
-
-// Mixins to generate components (chunks of UI)
-@import "design-patterns/alpha-beta";
-@import "design-patterns/buttons";
-@import "design-patterns/breadcrumbs";
-
-// Functions
-// @import "url-helpers";                         // Function to output image-url, or prefixed path (Rails and Compass only)
-
-// GOV.UK elements
-
-@import "elements/helpers";                       // Helper functions and classes
-
-// Generic (normalize/reset.css)
-@import "elements/reset";
-
-// Base (unclassed HTML elements)
-// These are predefined by govuk_template
-// If you're not using govuk_template, uncomment the line below.
-// @import "elements/base";                       // HTML elements, set by the GOV.UK template
-
-// Objects (unstyled design patterns)
-@import "elements/layout";                        // Main content container. Grid layout - rows and column widths
-
-// Components (chunks of UI)
-@import "elements/elements-typography";           // Typography
-@import "elements/buttons";                       // Buttons
-@import "elements/icons";                         // Icons - numbered steps, calendar, search
-@import "elements/lists";                         // Lists - numbered, bulleted
-@import "elements/tables";                        // Tables - regular, numeric
-@import "elements/details";                       // Details summary
-@import "elements/panels";                        // Panels with a left grey border
-@import "elements/forms";                         // Form - wrappers, inputs, labels
-@import "elements/forms/form-block-labels";       // Chunky labels for radios and checkboxes
-@import "elements/forms/form-date";               // Date of birth pattern
-@import "elements/forms/form-validation";         // Errors and validation
-@import "elements/breadcrumbs";                   // Breadcrumbs
-@import "elements/phase-banner";                  // Alpha and beta banners and tags
-@import "elements/components";                    // GOV.UK prefixed styles - blue highlighted box
diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index 03b420093f..b62b69fbb6 100644
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -1,5 +1,5 @@
-// Import GOV.UK elements, this will import the frontend toolkit and some base styles.
-// Take a look in _govuk-elements.scss to see which files are imported.
+// Import GOV.UK elements from /govuk-modules/, this will import the frontend toolkit and some base styles.
+// Take a look in /govuk-modules/_govuk-elements.scss to see which files are imported.
 @import 'govuk-elements';
 
 // Take a look at patterns.scss to see which files are imported.
diff --git a/app/assets/sass/elements/_base.scss b/app/assets/sass/elements/_base.scss
deleted file mode 100644
index 42229c6f03..0000000000
--- a/app/assets/sass/elements/_base.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-html, body, button, input, table, td, th { font-family: $NTA-Light; }
-
-// basic styles for HTML5 and other elements
-html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
-  margin: 0;
-  padding: 0;
-  vertical-align: baseline;
-}
-
-// HTML5 display definition
-main {
-  display: block;
-}
-
-// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
-//    http://clagnut.com/blog/348/#c790
-//    note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
-//    http://snook.ca/archives/html_and_css/font-size-with-rem
-// 2. Keeps page centred in all browsers regardless of content height
-// 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
-//    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
-// 4. Prevents iOS text size adjust after orientation change, without disabling user zoom.
-
-html {
-  font-size: 62.5%;   // 1
-  overflow-y: scroll; // 2
-  -webkit-tap-highlight-color: rgba(0,0,0,0); // 3
-  -webkit-text-size-adjust: 100%; // 4
-  -ms-text-size-adjust: 100%; // 4
-  // Set background colour to match footer background
-  background-color: $grey-8;
-  // Force the scrollbar to always display in IE10/11
-  -ms-overflow-style: scrollbar;
-}
-
-// 1. Font-size increased to compensate for change to html element font-size in
-//    order to support beta typography which was set in ems
-//    (62.5% * 160% = 100%)
-// 2. Addresses margins handled incorrectly in IE6/7
-
-body {
-  font-size: 160%; // 1
-  margin: 0; // 2
-  background: $white;
-  color: $text-colour;
-  line-height: 1.5;
-  font-weight: 400;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-ol, ul, nav ol, nav ul {
-  list-style: inherit;
-}
-
-fieldset {
-  border: none;
-  padding: 0;
-}
-
-b,
-strong {
-  font-weight: 600;
-}
-
-img {
-  border: 0;
-}
-
-@include ie-lte(7) {
-  button {
-    overflow:visible;
-  }
-}
-
-abbr[title] {
-  cursor: help;
-}
-
-// Set focus styles
-a {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
-}
-
-a:focus {
-  background-color: $focus-colour;
-  outline: 3px solid $focus-colour;
-}
-
-input:focus,
-textarea:focus,
-select:focus,
-button:focus {
-  outline: 3px solid $focus-colour;
-}
-
-// Link styles
-a:link {
-  color: $link-colour;
-}
-
-a:visited {
-  color: $link-visited-colour;
-}
-
-a:hover {
-  color: $link-hover-colour;
-}
-
-a:active {
-  color: $link-active-colour;
-}
-
-// External link styles
-a[rel="external"] {
-  @include external-link-default;
-  @include external-link-19;
-  @include media-down(mobile) {
-    @include external-link-16;
-  }
-}
-
-.external-link {
-  @include external-link-12-no-hover;
-  @include external-link-heading;
-}
diff --git a/app/assets/sass/elements/_breadcrumbs.scss b/app/assets/sass/elements/_breadcrumbs.scss
deleted file mode 100644
index c6452d687a..0000000000
--- a/app/assets/sass/elements/_breadcrumbs.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// Breadcrumbs
-// ==========================================================================
-
-.breadcrumbs {
-  @include breadcrumbs;
-}
diff --git a/app/assets/sass/elements/_buttons.scss b/app/assets/sass/elements/_buttons.scss
deleted file mode 100644
index 6f779e6a4f..0000000000
--- a/app/assets/sass/elements/_buttons.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-// Buttons
-// ==========================================================================
-
-.button {
-  @include button ($button-colour);
-  @include box-sizing (border-box);
-  padding: em(10) em(15) em(5) em(15);
-  vertical-align: top;
-  @include media (mobile) {
-    width: 100%;
-  }
-}
-
-// Fix unwanted button padding in Firefox
-.button::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-.button:focus {
-  outline: 3px solid $focus-colour;
-}
-
-// Disabled buttons
-.button[disabled="disabled"] {
-  background: $button-colour;
-}
-
-.button[disabled="disabled"]:focus {
-  outline: none;
-}
-
-// Start now buttons
-.button-start,
-.button-get-started {
-  @include bold-24;
-  background-image: file-url("icons/icon-pointer.png");
-  background-repeat: no-repeat;
-  background-position: 100% 50%;
-  padding: em(7) em(41) em(4) em(16);
-
-  @include device-pixel-ratio {
-    background-image: file-url("icons/icon-pointer-2x.png");
-    background-size: 30px 19px;
-  }
-
-  @include ie(6) {
-    background-image: file-url("icons/icon-pointer-2x.png");
-  }
-}
diff --git a/app/assets/sass/elements/_components.scss b/app/assets/sass/elements/_components.scss
deleted file mode 100644
index d5f9a613b5..0000000000
--- a/app/assets/sass/elements/_components.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Box with turquoise background and white text
-// Used for transaction end pages, and Bank Holidays
-.govuk-box-highlight {
-  margin: 1em 0 1em 0;
-  padding: 2em 0 1em 0;
-  color: $white;
-  background: $turquoise;
-  text-align: center;
-}
diff --git a/app/assets/sass/elements/_details.scss b/app/assets/sass/elements/_details.scss
deleted file mode 100644
index 8fcec7e18e..0000000000
--- a/app/assets/sass/elements/_details.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// Details
-// ==========================================================================
-
-details {
-  display: block;
-
-  summary {
-    display: inline-block;
-    color: $govuk-blue;
-    cursor: pointer;
-    position: relative;
-    margin-bottom: em(5);
-
-    &:hover {
-      color: $link-hover-colour;
-    }
-
-    &:focus {
-      outline: 3px solid $focus-colour;
-    }
-  }
-
-  // Underline only summary text (not the arrow)
-  .summary {
-    text-decoration: underline;
-  }
-
-  // Match fallback arrow spacing with -webkit default
-  .arrow {
-    margin-right: .35em;
-    font-style: normal;
-  }
-
-}
diff --git a/app/assets/sass/elements/_elements-typography.scss b/app/assets/sass/elements/_elements-typography.scss
deleted file mode 100644
index 9a4e536f95..0000000000
--- a/app/assets/sass/elements/_elements-typography.scss
+++ /dev/null
@@ -1,285 +0,0 @@
-// Typography
-// ==========================================================================
-
-// Increase the base font size to 19px for the main content area
-// Using the core-19 mixin from the govuk_toolkit _typography.scss file
-
-main {
-  @include core-19;
-  -webkit-font-smoothing: antialiased;
-}
-
-// Core font sizes
-.font-xxlarge {
-  @include core-80;
-}
-
-.font-xlarge {
-  @include core-48;
-}
-
-.font-large {
-  @include core-36;
-}
-
-.font-medium {
-  @include core-24;
-}
-
-.font-small {
-  @include core-19;
-}
-
-.font-xsmall {
-  @include core-16;
-}
-
-// Bold font sizes
-.bold-xxlarge {
-  @include bold-80();
-}
-
-.bold-xlarge {
-  @include bold-48();
-}
-
-.bold-large {
-  @include bold-36();
-}
-
-.bold-medium {
-  @include bold-24();
-}
-
-.bold-small {
-  @include bold-19();
-}
-
-.bold-xsmall {
-  @include bold-16();
-}
-
-// Common heading sizes
-// Using the bold-xx mixins from the govuk_toolkit _typography.scss file
-// Spacing is set in em, using the px to em function in the elements _helpers.scss file
-
-// Headings
-.heading-xlarge {
-  @include bold-48();
-
-  margin-top: em(15, 32);
-  margin-bottom: em(30, 32);
-
-  @include media(tablet) {
-    margin-top: em(30, 48);
-    margin-bottom: em(60, 48);
-  }
-
-  .heading-secondary {
-    @include heading-27();
-
-    display: block;
-    color: $secondary-text-colour;
-  }
-
-}
-
-.heading-large {
-  @include bold-36();
-
-  margin-top: em(25, 24);
-  margin-bottom: em(10, 24);
-
-  @include media(tablet) {
-    margin-top: em(45, 36);
-    margin-bottom: em(20, 36);
-  }
-
-  .heading-secondary {
-    @include heading-24();
-
-    display: block;
-    color: $secondary-text-colour;
-  }
-
-}
-
-.heading-medium {
-  @include bold-24();
-
-  margin-top: em(25, 20);
-  margin-bottom: em(10, 20);
-
-  @include media(tablet) {
-    margin-top: em(45, 24);
-    margin-bottom: em(20, 24);
-  }
-
-}
-
-.heading-small {
-  @include bold-19();
-
-  margin-top: em(10, 16);
-  margin-bottom: em(5, 16);
-
-  @include media(tablet) {
-    margin-top: em(20, 19);
-  }
-
-}
-
-// Text
-p {
-  margin-top: em(5, 16);
-  margin-bottom: em(20, 16);
-
-  @include media(tablet) {
-    margin-top: em(5);
-    margin-bottom: em(20);
-  }
-
-}
-
-// Lede, or intro text
-.lede {
-  @include core-24;
-}
-
-// Set a max-width for text blocks
-// Less than 75 characters per line of text
-.text {
-  max-width: 30em;
-}
-
-.text-secondary {
-  color: $secondary-text-colour;
-}
-
-// Link styles
-.link {
-  color: $link-colour;
-  text-decoration: underline;
-}
-
-.link:visited {
-  color: $link-visited-colour;
-}
-
-.link:hover {
-  color: $link-hover-colour;
-}
-
-.link:active {
-  color: $link-colour;
-}
-
-// Back link styles - with left pointing arrow
-
-.link-back {
-  @include inline-block;
-  position: relative;
-
-  @include core-16;
-
-  margin-top: $gutter-half;
-  margin-bottom: $gutter-half;
-  padding-left: 14px;
-
-  color: $black;
-
-  &:link,
-  &:visited,
-  &:hover,
-  &:active {
-    color: $black;
-  }
-
-  text-decoration: none;
-  border-bottom: 1px solid $black;
-
-  // Back arrow - left pointing black arrow
-  &::before {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-
-    border-top: 5px solid transparent;
-    border-right: 6px solid #0b0c0c;
-    border-bottom: 5px solid transparent;
-
-    position: absolute;
-    left: 0;
-    top: 50%;
-    margin-top: -6px;
-  }
-
-  // Fallback
-  // IE8 doesn't support rgba and only supports the single colon syntax for :before
-  // IE7 doesn't support pseudo-elements, let's fallback to an image instead.
-  // Ref: http://caniuse.com/#search=%3Abefore, http://caniuse.com/#search=rgba
-  @include ie-lte(8) {
-   background: file-url("icon-arrow-left.png") no-repeat 0 4px;
-  }
-
-}
-
-// Code styles
-.code {
-  color: black;
-  text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  font-size: 14px;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-
-  color: $black;
-  background-color: $highlight-colour;
-  border: 1px solid $border-colour;
-  padding: 4px 4px 2px 4px;
-}
-
-// Horizontal rule style
-hr {
-  display: block;
-  background: $border-colour;
-  border: 0;
-  height: 1px;
-  margin-top: $gutter;
-  margin-bottom: $gutter;
-  padding: 0;
-  @include ie-lte(7) {
-    color: $border-colour;
-  }
-}
-
-// Notice, text with an icon to the left
-.notice {
-  @extend %contain-floats;
-  position: relative;
-  .icon {
-    position: absolute;
-    left: 0;
-    top: 50%;
-    margin-top: -17px; // Half the height of the important icon
-  }
-  strong {
-    display: block;
-    padding-left: (35 + 30)+px;
-    margin-left: -$gutter-half;
-  }
-}
\ No newline at end of file
diff --git a/app/assets/sass/elements/_forms.scss b/app/assets/sass/elements/_forms.scss
deleted file mode 100644
index a2b94cc83b..0000000000
--- a/app/assets/sass/elements/_forms.scss
+++ /dev/null
@@ -1,225 +0,0 @@
-// Forms
-// ==========================================================================
-
-// Contents:
-//
-// 1. Helpers
-// 2. Form wrappers
-// 3. Form labels
-// 4. Form hints
-// 5. Form controls
-// 6. Form control widths
-
-// 1. Helpers
-// ==========================================================================
-
-// Fieldset is used to group more than one .form-group
-fieldset {
-  @extend %contain-floats;
-  width: 100%;
-}
-
-// Fix left hand gap in IE7 and below
-@include ie-lte(7) {
-  legend {
-    margin-left: -7px;
-  }
-}
-
-// Remove margin under textarea in Chrome and FF
-textarea{
-  display: block;
-}
-
-
-// 2. Form wrappers
-// ==========================================================================
-
-// Form group is used to wrap label and input pairs
-.form-group {
-  @extend %contain-floats;
-  @include box-sizing(border-box);
-
-  float: left;
-  width: 100%;
-
-  margin-bottom: $gutter-half;
-
-  @include media(tablet) {
-    margin-bottom: $gutter;
-  }
-}
-
-// Form group related is used to reduce the space between label and input pairs
-.form-group-related {
-  margin-bottom: 10px;
-
-  @include media(tablet) {
-    margin-bottom: 20px;
-  }
-}
-
-// Form group compound is used to reduce the space between label and input pairs
-.form-group-compound {
-  margin-bottom: 10px;
-}
-
-
-// 3. Form labels
-// ==========================================================================
-
-// Form labels, or for legends styled to look like labels
-// TODO: Amend so there is only one label style
-.form-label,
-.form-label-bold {
-  display: block;
-  color: $text-colour;
-}
-
-.form-label {
-  @include core-19;
-}
-
-.form-label-bold {
-  @include bold-19;
-}
-
-// Add spacing under spans within labels
-legend {
-  .form-label,
-  .form-label-bold {
-    padding-bottom: 7px;
-  }
-}
-
-// Remove spacing when error messages are shown
-// TODO: Move into /forms/_form-validation.scss
-.error legend {
-  .form-label,
-  .form-label-bold {
-    padding-bottom: 0;
-  }
-}
-
-// Used for the 'or' in between block label options
-.form-block {
-  @extend %contain-floats;
-  float: left;
-  width: 100%;
-
-  margin-top: -5px;
-  margin-bottom: 5px;
-
-  @include media(tablet) {
-    margin-top: 0;
-    margin-bottom: 10px;
-  }
-}
-
-// 4. Form hints
-// ==========================================================================
-
-// Form hints and example text are light grey and sit above a form control
-.form-hint {
-  @include core-19;
-  display: block;
-  color: $secondary-text-colour;
-  font-weight: normal;
-  margin-bottom: 5px;
-}
-
-
-// 5. Form controls
-// ==========================================================================
-
-// By default, form controls are 50% width for desktop,
-// and 100% width for mobile
-.form-control {
-  @include box-sizing(border-box);
-  @include core-19;
-  width: 100%;
-
-  padding: 4px;
-  background-color: $white;
-  border: 2px solid $grey-1;
-
-  // TODO: Remove 50% width set for tablet and up
-  // !! BREAKING CHANGE !!
-  @include media(tablet) {
-    width: 50%;
-  }
-
-}
-
-// Radio buttons
-.form-radio {
-  display: block;
-  margin: 10px 0;
-
-  input {
-    vertical-align: middle;
-    margin: -4px 5px 0 0;
-  }
-}
-
-// Checkboxes
-.form-checkbox {
-  display: block;
-  margin: $gutter-half 0;
-
-  input {
-    vertical-align: middle;
-    margin: -2px 5px 0 0;
-  }
-}
-
-
-// 6. Form control widths
-// ==========================================================================
-
-// TODO: Update these
-// Form control widths
-
-.form-control-3-4 {
-  width: 100%;
-
-  @include media(tablet) {
-    width: 75%;
-  }
-}
-
-.form-control-2-3 {
-  width: 100%;
-  @include media(tablet) {
-    width: 66.66%;
-  }
-}
-
-.form-control-1-2 {
-  width: 100%;
-
-  @include media(tablet) {
-    width: 50%;
-  }
-}
-
-.form-control-1-3 {
-  width: 100%;
-  @include media(tablet) {
-    width: 33.33%;
-  }
-}
-
-.form-control-1-4 {
-  width: 100%;
-  @include media(tablet) {
-    width: 25%;
-  }
-}
-
-.form-control-1-8 {
-  width: 100%;
-  @include media(tablet) {
-    width: 12.5%;
-  }
-}
diff --git a/app/assets/sass/elements/_helpers.scss b/app/assets/sass/elements/_helpers.scss
deleted file mode 100644
index 7c7eb5057e..0000000000
--- a/app/assets/sass/elements/_helpers.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-// Helpers
-// ==========================================================================
-
-// Path to assets for use with file-url() is not already defined
-@if ($path == false) {
-  $path: "/public/images/";
-}
-
-// Return ems from a pixel value
-// This assumes a base of 19px
-@function em($px, $base: 19) {
-  @return ($px / $base) + em;
-}
-
-// Want to see how the grid works?
-// add this class to the body to see how grid padding is set
-.example-highlight-grid {
-  .grid-row {
-    background: $grey-2;
-  }
-
-  .column-highlight {
-    background: $grey-3;
-    width: 100%;
-  }
-
-}
-
-// Hide for both screenreaders and browsers
-.hidden {
-  display: none;
-  visibility: hidden;
-}
-
-// Hide, but not for screenreaders
-.visually-hidden,
-.visuallyhidden {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-}
-
-// Hide, only when JavaScript is enabled
-.js-enabled .js-hidden {
-  display: none;
-}
diff --git a/app/assets/sass/elements/_icons.scss b/app/assets/sass/elements/_icons.scss
deleted file mode 100644
index 086b5472b6..0000000000
--- a/app/assets/sass/elements/_icons.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-// Icons
-// ==========================================================================
-
-// Icon mixin
-@mixin icon($icon-name, $icon-width, $icon-height, $icon-sub-folder:false) {
-
-  width: #{$icon-width}px;
-  height: #{$icon-height}px;
-
-  @if $icon-sub-folder {
-    background-image: file-url("icons/#{$icon-sub-folder}/#{$icon-name}.png");
-
-    @include device-pixel-ratio() {
-      background-image: file-url("icons/#{$icon-sub-folder}/#{$icon-name}-2x.png");
-      background-size: 100%;
-    }
-
-  } @else {
-    background-image: file-url("icons/#{$icon-name}.png");
-
-    @include device-pixel-ratio() {
-      background-image: file-url("icons/#{$icon-name}-2x.png");
-      background-size: 100%;
-    }
-  }
-}
-
-.icon {
-  display: inline-block;
-
-  background-position: 0 0;
-  background-repeat: no-repeat;
-}
-
-// GOV.UK front end toolkit icons
-.icon-calendar {
-  @include icon(icon-calendar, 27, 27);
-}
-
-.icon-file-download {
-  @include icon(icon-file-download, 30, 39);
-}
-
-.icon-important {
-  @include icon(icon-important, 35, 35);
-}
-
-.icon-information {
-  @include icon(icon-information, 27, 27);
-}
-
-.icon-locator {
-  @include icon(icon-locator, 26, 36);
-}
-
-.icon-pointer {
-  @include icon(icon-pointer, 30, 19);
-}
-
-.icon-pointer-black {
-  @include icon(icon-pointer-black, 23, 23);
-}
-
-.icon-search {
-  @include icon(icon-search, 30, 22);
-}
-
-
-// GOV.UK step icons
-@for $i from 1 through 14 {
-  .icon-step-#{$i} {
-    @include icon(icon-step-#{$i}, 23, 23, icon-steps);
-  }
-}
-
-// Propose replacing step icons with circles
-.circle {
-  display: inline-block;
-  @include border-radius(50%);
-
-  background: $black;
-  color: $white;
-
-  font-family: $NTA-Light-Tabular;
-  font-size: 12px;
-  font-weight: bold;
-  text-align: center;
-}
-
-// All step circles are 24px x 24px
-.circle-step {
-  min-width: 24px;
-  min-height: 24px;
-  line-height: 24px;
-}
-
-.circle-step-large {
-  font-size: 19px;
-  min-width: 38px;
-  min-height: 38px;
-  line-height: 38px;
-}
diff --git a/app/assets/sass/elements/_layout.scss b/app/assets/sass/elements/_layout.scss
deleted file mode 100644
index 0493e6198d..0000000000
--- a/app/assets/sass/elements/_layout.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-// Layout
-// ==========================================================================
-
-// Content
-// ==========================================================================
-
-// Content wraps the entire site content block
-#content {
-  @extend %site-width-container;
-  @extend %contain-floats;
-  padding-bottom: $gutter;
-
-  @include media(desktop) {
-    padding-bottom: $gutter*3;
-  }
-}
-
-
-// Grid layout
-// ==========================================================================
-
-// Usage:
-// For two equal columns
-
-// <div class="grid-row">
-//   <div class="column-one-half">
-//
-//   </div>
-//   <div class="column-one-half">
-//
-//   </div>
-// </div>
-
-// Use .grid-row to define a row for grid columns to sit in
-.grid-row {
-  @extend %grid-row;
-}
-
-// Use .grid-column to create a grid column with 15px gutter
-// By default grid columns break to become full width at tablet size
-.column-quarter,
-.column-one-quarter {
-  @include grid-column(1/4);
-}
-
-.column-half,
-.column-one-half {
-  @include grid-column(1/2);
-}
-
-.column-third,
-.column-one-third {
-  @include grid-column(1/3);
-}
-
-.column-two-thirds {
-  @include grid-column(2/3);
-}
diff --git a/app/assets/sass/elements/_lists.scss b/app/assets/sass/elements/_lists.scss
deleted file mode 100644
index 47e2d43993..0000000000
--- a/app/assets/sass/elements/_lists.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// Lists
-// ==========================================================================
-
-ul,
-ol {
-  list-style-type: none;
-}
-
-.list {
-  padding: 0;
-  margin-top: 5px;
-  margin-bottom: 20px;
-}
-
-.list li {
-  margin-bottom: 5px;
-}
-
-// Bulleted lists
-.list-bullet {
-  list-style-type: disc;
-  padding-left: 20px;
-}
-
-// Numbered lists
-.list-number {
-  list-style-type: decimal;
-  padding-left: 20px;
-
-  @include ie-lte(7) {
-    padding-left: 28px;
-  }
-}
diff --git a/app/assets/sass/elements/_panels.scss b/app/assets/sass/elements/_panels.scss
deleted file mode 100644
index e3e7345b03..0000000000
--- a/app/assets/sass/elements/_panels.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-// Panels
-// ==========================================================================
-
-.panel {
-  @extend %contain-floats;
-  clear: both;
-  border-left-style: solid;
-  border-color: $border-colour;
-
-  padding: em(15,19);
-  margin-bottom: em(15,19);
-
-  :first-child {
-    margin-top: 0;
-  }
-
-  :only-child,
-  :last-child {
-    margin-bottom: 0;
-  }
-}
-
-.panel-border-wide {
-  border-left-width: 10px;
-}
-
-// Used to show the left edge of "toggled" content
-.panel-border-narrow {
-  border-left-width: 5px;
-}
-
-// Panels within form groups
-// Remove the bottom padding as .form-group sets a bottom margin
-.form-group .panel-border-narrow {
-  padding-bottom: 0;
-}
diff --git a/app/assets/sass/elements/_phase-banner.scss b/app/assets/sass/elements/_phase-banner.scss
deleted file mode 100644
index 356d9729c3..0000000000
--- a/app/assets/sass/elements/_phase-banner.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// Phase banners
-// ==========================================================================
-
-.phase-banner-alpha {
-  @include phase-banner($state: alpha);
-}
-
-.phase-banner-beta {
-  @include phase-banner($state: beta);
-}
diff --git a/app/assets/sass/elements/_reset.scss b/app/assets/sass/elements/_reset.scss
deleted file mode 100644
index d157dbeedc..0000000000
--- a/app/assets/sass/elements/_reset.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// Reset
-// ==========================================================================
-// flatten all browser defaults and styles inherited from gov.uk template
-
-/* Borrowed from http://meyerweb.com/eric/tools/css/reset/ */
-div, span,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark {
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-input, textarea,
-table, caption, tbody, tfoot, thead, tr, th, td {
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-  font-weight: normal;
-}
diff --git a/app/assets/sass/elements/_tables.scss b/app/assets/sass/elements/_tables.scss
deleted file mode 100644
index 9afb7b1a98..0000000000
--- a/app/assets/sass/elements/_tables.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-// Tables
-// ==========================================================================
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  width: 100%;
-
-  th,
-  td {
-    @include core-16;
-    padding: em(12, 16) em(20, 16) em(9, 16) 0;
-
-    text-align: left;
-    color: $black;
-    border-bottom: 1px solid $border-colour;
-  }
-
-  th {
-    font-weight: 700;
-    // Right align headings for numeric content
-    &.numeric {
-      text-align: right;
-    }
-  }
-
-  // Use tabular numbers for numeric table cells
-  td.numeric {
-    @include core-16($tabular-numbers: true);
-    text-align: right;
-  }
-}
diff --git a/app/assets/sass/elements/forms/_form-block-labels.scss b/app/assets/sass/elements/forms/_form-block-labels.scss
deleted file mode 100644
index 17321ee550..0000000000
--- a/app/assets/sass/elements/forms/_form-block-labels.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-// Large hit area
-// Radio buttons & checkboxes
-
-// By default, block labels stack vertically
-.block-label {
-
-  display: block;
-  float: none;
-  clear: left;
-  position: relative;
-
-  background: $panel-colour;
-  border: 1px solid $panel-colour;
-  padding: (18px $gutter $gutter-half $gutter*1.8);
-
-  margin-bottom: 10px;
-  cursor: pointer; // Encourage clicking on block labels
-
-  @include media(tablet) {
-    float: left;
-    // width: 25%; - Test : check that text within labels will wrap
-  }
-
-  // Absolutely position inputs within label, to allow text to wrap
-  input {
-    position: absolute;
-    top: 15px;
-    left: $gutter-half;
-    cursor: pointer;
-    margin: 0;
-    width: 29px;
-    height: 29px;
-    @include ie(8) {
-      top: 12px;
-    }
-  }
-
-  // Change border on hover
-  &:hover {
-    border-color: $black;
-  }
-}
-
-.block-label:last-child {
-  margin-bottom: 0;
-}
-
-// To stack horizontally, use .inline on parent, to sit block labels next to each other
-.inline .block-label {
-  clear: none;
-  margin-right: 10px;
-}
-
-// Selected and focused states
-
-// Add selected state
-.js-enabled label.selected {
-  background: $white;
-  border-color: $black;
-}
-
-// Add focus to block labels
-.js-enabled label.focused {
-  outline: 3px solid $focus-colour;
-}
-
-// Remove focus from radio/checkboxes
-.js-enabled .focused input:focus {
-  outline: none;
-}
diff --git a/app/assets/sass/elements/forms/_form-date.scss b/app/assets/sass/elements/forms/_form-date.scss
deleted file mode 100644
index c5f94c7804..0000000000
--- a/app/assets/sass/elements/forms/_form-date.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-// Date pattern
-
-// Hide the 'spinner' for webkit
-// and also for Firefox
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type=number] {
-  -moz-appearance: textfield;
-}
-
-.form-date {
-
-  .form-group {
-    float: left;
-    width: 50px;
-
-    margin-right: 20px;
-    margin-bottom: 0;
-    clear: none;
-
-    label {
-      display: block;
-      margin-bottom: 5px;
-    }
-
-    input {
-      width: 100%;
-    }
-  }
-
-  .form-group-year {
-    width: 70px;
-  }
-}
diff --git a/app/assets/sass/elements/forms/_form-validation.scss b/app/assets/sass/elements/forms/_form-validation.scss
deleted file mode 100644
index 2b15b7700a..0000000000
--- a/app/assets/sass/elements/forms/_form-validation.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-// Form validation
-// ==========================================================================
-
-// Using the classname .error as it's shorter than .validation and easier to type!
-.error {
-
-  // Ensure the .error class is applied to .form-group, otherwide box-sizing(border-box) will need to be used
-  // @include box-sizing(border-box);
-  margin-right: 15px;
-
-  // Error messages should be red and bold
-  .error-message {
-    color: $error-colour;
-    font-weight: bold;
-  }
-
-  // Form inputs should have a red border
-  .form-control {
-    border: 4px solid $error-colour;
-  }
-
-  .form-hint {
-    margin-bottom: 0;
-  }
-
-}
-
-.error,
-.error-summary {
-
-  // Add a red border to the left of the field
-  border-left: 4px solid $error-colour;
-  padding-left: 10px;
-
-  @include media(tablet) {
-    border-left: 5px solid $error-colour;
-    padding-left: $gutter-half;
-  }
-}
-
-.error-message {
-  @include core-19;
-
-  display: block;
-  clear: both;
-
-  margin: 0;
-  padding: 5px 0 7px 0;
-}
-
-// Summary of multiple error messages
-.error-summary {
-
-  // Error summary has a border on all sides
-  border: 4px solid $error-colour;
-
-  margin-top: $gutter-half;
-  margin-bottom: $gutter-half;
-
-  padding: $gutter-half 10px;
-
-  @include media(tablet) {
-    border: 5px solid $error-colour;
-
-    margin-top: $gutter;
-    margin-bottom: $gutter;
-
-    padding: 20px $gutter-half $gutter-half $gutter-half;
-  }
-
-  @include ie-lte(6) {
-    zoom: 1;
-  }
-
-  // Use the GOV.UK outline focus style
-  &:focus {
-    outline: 3px solid $focus-colour;
-  }
-
-  .error-summary-heading {
-    margin-top: 0;
-  }
-
-  p {
-    margin-bottom: 10px;
-  }
-
-  .error-summary-list {
-    padding-left: 0;
-
-    li {
-
-      @include media(tablet) {
-        margin-bottom: 5px;
-      }
-    }
-
-    a {
-      color: $error-colour;
-      font-weight: bold;
-      text-decoration: underline;
-    }
-  }
-}