diff --git a/.gitignore b/.gitignore
index c2c675cbd6..e43f79dbf0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,8 +4,6 @@
 .start.pid
 .port.tmp
 public
-lib/govuk_template.html
-govuk_modules
 node_modules/*
 .tmuxp.*
 package-lock.json
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 74a3fe05ff..a1ce45ce59 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -25,11 +25,6 @@ Please raise feature requests as issues before contributing any code.
 
 This ensures they are discussed properly before any time is spent on them.
 
-## GOV.UK Elements
-
-The project contains code taken from the [GOV.UK Elements](https://github.com/alphagov/govuk_elements/) project.
-Please check that any issues related to that code are raised with that project, not this one.
-
 ## Contributing code
 
 ### Indentation and whitespace
@@ -56,6 +51,8 @@ which describes how we prefer git history and commit messages to read.
 
 ## To release a new version
 
+Checkout a new branch for the release.
+
 Update [CHANGELOG.md](https://github.com/alphagov/govuk_prototype_kit/blob/master/CHANGELOG.md) to summarise the changes made since the last release.
 
 To see the commits to be summarised in the changelog since the last release, [compare the latest-release branch with master](https://github.com/alphagov/govuk_prototype_kit/compare/latest-release...master).
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 47acf1b950..241bec763f 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -1,5 +1,4 @@
 /* global $ */
-/* global GOVUK */
 
 // Warn about using the kit in production
 if (window.console && window.console.info) {
@@ -7,16 +6,5 @@ if (window.console && window.console.info) {
 }
 
 $(document).ready(function () {
-  // Use GOV.UK shim-links-with-button-role.js to trigger a link styled to look like a button,
-  // with role="button" when the space key is pressed.
-  GOVUK.shimLinksWithButtonRole.init()
-
-  // Details/summary polyfill from frontend toolkit
-  GOVUK.details.init()
-
-  // Show and hide toggled content
-  // Where .multiple-choice uses the data-target attribute
-  // to toggle hidden content
-  var showHideContent = new GOVUK.ShowHideContent()
-  showHideContent.init()
+  window.GOVUKFrontend.initAll()
 })
diff --git a/app/assets/javascripts/bind.js b/app/assets/javascripts/bind.js
deleted file mode 100644
index 2a957cdd68..0000000000
--- a/app/assets/javascripts/bind.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* eslint-disable */
-
-// Function.prototype.bind
-//
-// A polyfill for Function.prototype.bind. Which lets you bind a defined
-// value to the `this` keyword in a function call.
-//
-// Bind is natively supported in:
-//   IE9+
-//   Chrome 7+
-//   Firefox 4+
-//   Safari 5.1.4+
-//   iOS 6+
-//   Android Browser 4+
-//   Chrome for Android 0.16+
-//
-// Originally from:
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
-if (!Function.prototype.bind) {
-  Function.prototype.bind = function (oThis) {
-    if (typeof this !== "function") {
-      // closest thing possible to the ECMAScript 5
-      // internal IsCallable function
-      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
-    }
-
-    var aArgs = Array.prototype.slice.call(arguments, 1),
-        fToBind = this,
-        fNOP = function () {},
-        fBound = function () {
-          return fToBind.apply(this instanceof fNOP && oThis
-                 ? this
-                 : oThis,
-                 aArgs.concat(Array.prototype.slice.call(arguments)));
-        };
-
-    fNOP.prototype = this.prototype;
-    fBound.prototype = new fNOP();
-
-    return fBound;
-  };
-}
diff --git a/app/assets/sass/application-ie8.scss b/app/assets/sass/application-ie8.scss
index ce895a2855..09a29d14ac 100644
--- a/app/assets/sass/application-ie8.scss
+++ b/app/assets/sass/application-ie8.scss
@@ -1,4 +1,3 @@
-$is-ie: true;
-$ie-version: 8;
+$govuk-is-ie8: true;
 
 @import "application";
diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index 30e024e79e..d54f828b6d 100644
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -1,31 +1,15 @@
-// Path to assets for use with the file-url function
-// in the govuk frontend toolkit's url-helpers partial
-$path: "/public/images/";
+// global styles for <a> and <p> tags
+$govuk-global-styles: true;
 
-// 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';
+// Import GOV.UK Frontend
+@import "node_modules/govuk-frontend/all";
 
-// Take a look at in app/assets/sass/patterns/ to see which files are imported.
-@import 'patterns/check-your-answers';
-@import 'patterns/task-list';
+// Patterns that aren't in Frontend
+@import "patterns/check-your-answers";
+@import "patterns/task-list";
+@import "patterns/related-items";
 
-// Related items
-// (These styles will be moved to GOV.UK elements, duplicating here for now.)
-.govuk-related-items {
-  margin-top: $gutter;
-  border-top: 10px solid $govuk-blue;
-  padding-top: 5px;
-
-  .heading-medium {
-    margin-top: 0.3em;
-    margin-bottom: 0.5em;
-  }
-
-  li {
-    margin-bottom: 10px;
-    list-style-type: none;
-  }
-}
+// Components that aren't in Frontend
+@import "components/cookie-banner";
 
 // Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
diff --git a/app/assets/sass/components/_cookie-banner.scss b/app/assets/sass/components/_cookie-banner.scss
new file mode 100644
index 0000000000..8d247c9422
--- /dev/null
+++ b/app/assets/sass/components/_cookie-banner.scss
@@ -0,0 +1,24 @@
+.app-cookie-banner {
+  @include govuk-font(16);
+  @include govuk-text-colour;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  padding-top: govuk-spacing(3);
+  padding-right: govuk-spacing(3);
+  padding-bottom: govuk-spacing(3);
+  padding-left: govuk-spacing(3);
+  background-color: lighten(desaturate(govuk-colour("light-blue"), 8.46), 42.55);
+}
+
+.app-cookie-banner__message {
+  margin: 0;
+  @include govuk-width-container;
+}
+
+@include govuk-media-query($media-type: print) {
+  .app-cookie-banner {
+    display: none !important;
+  }
+}
diff --git a/app/assets/sass/examples.scss b/app/assets/sass/examples.scss
deleted file mode 100644
index 7d73537de1..0000000000
--- a/app/assets/sass/examples.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@import "_colours";
-
-.area {
-  font-family: 'nta', Sans-serif;
-  font-size: 16px;
-  font-weight: 700;
-  clear: both;
-  background: $fuschia;
-  color: white;
-  border: dashed $white 1px;
-  padding: 1em;
-  box-sizing: border-box;
-}
-
-/* area styles specific to certain ones */
-main.area {
-  min-height: 16em;
-}
-.header-proposition {
-  clear: none;
-  min-height: 6em;
-}
diff --git a/app/assets/sass/patterns/_check-your-answers.scss b/app/assets/sass/patterns/_check-your-answers.scss
index 5715c6dc6e..04421422a5 100644
--- a/app/assets/sass/patterns/_check-your-answers.scss
+++ b/app/assets/sass/patterns/_check-your-answers.scss
@@ -1,95 +1,83 @@
 // Recommended - Use these styles for the check your answers pattern
-.govuk-check-your-answers {
+.app-check-your-answers {
 
-  @include media(desktop) {
-    display: table;
-  }
-
-  > * {
-    position: relative;
-    border-bottom: 1px solid $border-colour;
-
-    @include media(desktop) {
-      display: table-row;
-      border-bottom-width: 0;
-    }
-
-    > * {
-      display: block;
-
-      @include media(desktop) {
-        display: table-cell;
-        border-bottom: 1px solid $border-colour;
-        padding: em(12, 19) em(20, 19) em(9, 19) 0; // copied from Elements' td padding
-        margin: 0;
-      }
-    }
+  @include govuk-font(19);
 
-    @include media(desktop) {
-      &:first-child > * {
-        padding-top: 0;
-      }
-    }
-  }
-
-  .cya-question {
-    font-weight: bold;
-    margin: em(12, 19) 4em em(4,19) 0;
-    // top: from Elements' td
-    // right: due to length of "change" link (adjust if you change the link to be much longer)
-    // bottom: by eye
-    // using margin instead of padding because of easier absolutely positioning of .change
-  }
-
-  > *:first-child .cya-question {
-    margin-top: 0;
+  @include govuk-media-query($from: desktop) {
+    display: table;
   }
+}
 
-  @include media(desktop) {
+.app-check-your-answers--short {
+  @include govuk-media-query($from: desktop) {
     // to make group of q&a line up horizontally (unless there is just one group)
-    &.cya-questions-short,
-    &.cya-questions-long {
-      width: 100%;
-    }
-
+    width: 100%;
     // recommended for mostly short questions
-    &.cya-questions-short .cya-question {
+    .app-check-your-answers__question {
       width: 30%;
     }
+  }
+}
 
+.app-check-your-answers--long {
+  @include govuk-media-query($from: desktop) {
+    // to make group of q&a line up horizontally (unless there is just one group)
+    width: 100%;
     // recommended for mostly long questions
-    &.cya-questions-long .cya-question {
+    .app-check-your-answers__question {
       width: 50%;
     }
   }
+}
+
+.app-check-your-answers__contents {
+  position: relative;
+  border-bottom: 1px solid $govuk-border-colour;
 
-  .cya-answer {
-    padding-bottom: em(9, 19); // from Elements' td
+  @include govuk-media-query($from: desktop) {
+    display: table-row;
+    border-bottom-width: 0;
   }
+}
 
-  .cya-change {
-    text-align: right;
-    position: absolute;
-    top: 0;
-    right: 0;
+.app-check-your-answers__contents:first-child .app-check-your-answers__question,
+.app-check-your-answers__contents:first-child .app-check-your-answers__answer,
+.app-check-your-answers__contents:first-child .app-check-your-answers__change {
+  @include govuk-media-query($from: desktop) {
+    padding-top: 0;
+  }
+}
 
-    @include media(desktop) {
-      position: static;
-      padding-right: 0;
-    }
+.app-check-your-answers__question,
+.app-check-your-answers__answer,
+.app-check-your-answers__change {
+  display: block;
+  margin: 0;
+  @include govuk-media-query($from: desktop) {
+    display: table-cell;
+    border-bottom: 1px solid $govuk-border-colour;
+    padding: govuk-em(12, 19) govuk-em(20, 19) govuk-em(9, 19) 0;
   }
+}
 
+.app-check-your-answers__question {
+  font-weight: bold;
+  margin: govuk-em(12, 19) 4em govuk-em(4,19) 0;
+  // using margin instead of padding because of easier absolutely positioning of .app-check-your-answers__change
 }
 
-// Deprecated - these styles will be removed in a later release
-.check-your-answers {
-  td {
-    @include core-19;
-    vertical-align: top;
-  }
-  .change-answer {
-    text-align: right;
-    font-weight: bold;
+.app-check-your-answers__answer {
+  padding-bottom: govuk-em(9, 19);
+}
+
+.app-check-your-answers__change {
+  text-align: right;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  @include govuk-media-query($from: desktop) {
+    position: static;
     padding-right: 0;
   }
 }
diff --git a/app/assets/sass/patterns/_related-items.scss b/app/assets/sass/patterns/_related-items.scss
new file mode 100644
index 0000000000..6425bce3e2
--- /dev/null
+++ b/app/assets/sass/patterns/_related-items.scss
@@ -0,0 +1,11 @@
+// This is a GOV.UK Publishing specific component that
+// can be seen at http://govuk-static.herokuapp.com/component-guide/related_items
+
+.app-related-items {
+  border-top: 10px solid govuk-colour("blue");
+  padding-top: govuk-spacing(2);
+}
+
+.app-related-items .govuk-list > li {
+  margin-bottom: govuk-spacing(2);
+}
diff --git a/app/assets/sass/patterns/_task-list.scss b/app/assets/sass/patterns/_task-list.scss
index e99973c814..d6663bd818 100644
--- a/app/assets/sass/patterns/_task-list.scss
+++ b/app/assets/sass/patterns/_task-list.scss
@@ -1,8 +1,8 @@
 // Task list pattern
 
 // Override column width for tablet and up
-.column-minimum {
-  @include media(tablet) {
+.app-column-minimum {
+  @include govuk-media-query($from: tablet) {
     min-width: 600px;
   }
 }
@@ -10,64 +10,63 @@
 // Spacing to the left of the task list
 $task-list-indent: 35px;
 
-.task-list {
-  margin-top: $gutter;
-  @include media(tablet) {
-    margin-top: ($gutter * 2);
+.app-task-list {
+  list-style: none;
+  padding: 0;
+  margin-top: $govuk-gutter;
+  @include govuk-media-query($from: tablet) {
+    margin-top: ($govuk-gutter * 2);
   }
 }
 
-
-.task-list-section {
+.app-task-list__section {
   display: table;
 
-  @include bold-24;
-  padding-bottom: ($gutter / 6);
+  @include govuk-font(24, $weight: bold);
+  margin: 0;
+  padding-bottom: ($govuk-gutter / 6);
 }
 
-.task-list-section-number {
+.app-task-list__section-number {
   display: table-cell;
-  padding-right: ($gutter / 6);
+  padding-right: ($govuk-gutter / 6);
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     min-width: $task-list-indent;
     padding-right: 0;
   }
 }
 
 
-.task-list-items {
-  margin-bottom: $gutter;
-  @include media(tablet) {
-    margin-bottom: ($gutter * 2);
+.app-task-list__items {
+  list-style: none;
+  padding: 0;
+  margin-bottom: $govuk-gutter;
+  @include govuk-media-query($from: tablet) {
+    margin-bottom: ($govuk-gutter * 2);
   }
 
-  @include media(tablet) {
+  @include govuk-media-query($from: tablet) {
     padding-left: $task-list-indent;
   }
 }
 
-.task-list-item {
-  border-bottom: 1px solid $border-colour;
-  padding-top: $gutter-one-third;
-  padding-bottom: $gutter-one-third;
-  @extend %contain-floats;
+.app-task-list__item {
+  border-bottom: 1px solid $govuk-border-colour;
+  padding-top: govuk-spacing(2);
+  padding-bottom: govuk-spacing(2);
+  @include govuk-clearfix
 }
 
-.task-list-item:first-child {
-  border-top: 1px solid $border-colour;
+.app-task-list__item:first-child {
+  border-top: 1px solid $govuk-border-colour;
 }
 
-
-.task-name {
-  width: $two-thirds;
+.app-task-list__task-name {
+  width: 33.3%;
   float: left;
 }
 
-.task-completed {
-  @include phase-tag;
-
+.app-task-list__task-completed {
   float: right;
-  margin-right: 0;
-  padding-top: 3px;
 }
diff --git a/app/assets/sass/unbranded.scss b/app/assets/sass/unbranded.scss
index 0205d48624..2f46b65d9f 100644
--- a/app/assets/sass/unbranded.scss
+++ b/app/assets/sass/unbranded.scss
@@ -1,30 +1,12 @@
-// Path to assets for use with the file-url function
-// in the govuk frontend toolkit's url-helpers partial
-$path: "/public/images/";
+@import "node_modules/govuk-frontend/settings/all";
 
-// 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';
+// Override the govuk-frontend font stack
+$govuk-font-family: "HelveticaNeue", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
 
-// If you need to create a page as part of your journey, but without GOV.UK branding
-// See localhost:3000/examples/unbranded/
-
-// Override the govuk_frontend_toolkit's font stack
-// https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_font_stack.scss#L13
-$toolkit-font-stack: $helvetica-regular;
-
-.unbranded {
-  background: $white;
+// Remove canvas background colour, as is used with the GOV.UK Footer.
+$govuk-canvas-background-colour: $govuk-body-background-colour;
 
-  // Use the universal selector and !important to *ALWAYS OVERRIDE* GDS Transport
-  * {
+@import "node_modules/govuk-frontend/all";
 
-    font-family: $toolkit-font-stack !important;
-  }
-
-  // Remove GOV.UK footer styles
-  #footer {
-    border: 0;
-    background: $white;
-  }
-}
+// If you need to create a page as part of your journey, but without GOV.UK branding
+// See localhost:3000/docs/examples/blank-unbranded
diff --git a/app/views/includes/breadcrumb_examples.html b/app/views/includes/breadcrumb_examples.html
index bfd1a82966..4dc2e34e8d 100644
--- a/app/views/includes/breadcrumb_examples.html
+++ b/app/views/includes/breadcrumb_examples.html
@@ -1,6 +1,10 @@
-<div class="breadcrumbs">
-  <ol>
-    <li><a href="/">GOV.UK prototype kit</a></li>
-    <li><a href="/examples">Examples</a></li>
+<div class="govuk-breadcrumbs">
+  <ol class="govuk-breadcrumbs__list">
+    <li class="govuk-breadcrumbs__list-item">
+      <a class="govuk-breadcrumbs__link" href="/">GOV.UK prototype kit</a>
+    </li>
+    <li class="govuk-breadcrumbs__list-item">
+      <a class="govuk-breadcrumbs__link" href="/examples">Examples</a>
+    </li>
   </ol>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/includes/cookie-banner.html b/app/views/includes/cookie-banner.html
new file mode 100644
index 0000000000..40ea61aba7
--- /dev/null
+++ b/app/views/includes/cookie-banner.html
@@ -0,0 +1,7 @@
+{% if shouldShowCookieMessage %}
+  <div class="app-cookie-banner">
+    <p class="app-cookie-banner__message">
+      {{cookieText | safe }}
+    </p>
+  </div>
+{% endif %}
diff --git a/app/views/includes/phase_banner_alpha.html b/app/views/includes/phase_banner_alpha.html
deleted file mode 100644
index 5bb013fa27..0000000000
--- a/app/views/includes/phase_banner_alpha.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="phase-banner">
-  <p>
-    <strong class="phase-tag">ALPHA</strong>
-    <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
-  </p>
-</div>
diff --git a/app/views/includes/phase_banner_beta.html b/app/views/includes/phase_banner_beta.html
deleted file mode 100644
index 71ed2e96db..0000000000
--- a/app/views/includes/phase_banner_beta.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="phase-banner">
-  <p>
-    <strong class="phase-tag">BETA</strong>
-    <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
-  </p>
-</div>
diff --git a/app/views/includes/propositional_navigation_alpha.html b/app/views/includes/propositional_navigation_alpha.html
deleted file mode 100644
index 79c3d5b011..0000000000
--- a/app/views/includes/propositional_navigation_alpha.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="header-proposition">
-  <div class="content">
-    <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
-    <nav id="proposition-menu">
-      <a href="/" id="proposition-name">Service Name <span class="alpha-tag">Alpha</span></a>
-      <ul id="proposition-links">
-        <li><a href="url-to-page-1" class="active">Navigation item #1</a></li>
-        <li><a href="url-to-page-2">Navigation item #2</a></li>
-      </ul>
-    </nav>
-  </div>
-</div>
diff --git a/app/views/includes/scripts.html b/app/views/includes/scripts.html
index 60cccba719..aa86cc5ab9 100644
--- a/app/views/includes/scripts.html
+++ b/app/views/includes/scripts.html
@@ -1,9 +1,6 @@
 <!-- Javascript -->
-<!--[if lte IE 8]><script src="/public/javascripts/bind.js"></script><![endif]-->
 <script src="/public/javascripts/jquery-1.11.3.js"></script>
-<script src="/public/javascripts/govuk/details.polyfill.js"></script>
-<script src="/public/javascripts/govuk/shim-links-with-button-role.js"></script>
-<script src="/public/javascripts/govuk/show-hide-content.js"></script>
+<script src="/node_modules/govuk-frontend/all.js"></script>
 <script src="/public/javascripts/application.js"></script>
 
 {% if useAutoStoreData %}
diff --git a/app/views/index.html b/app/views/index.html
index f63856e46f..0eb41a3ffe 100644
--- a/app/views/index.html
+++ b/app/views/index.html
@@ -1,18 +1,17 @@
+
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   GOV.UK prototype kit
 {% endblock %}
 
 {% block content %}
 
-<main id="content" role="main">
-  <div class="grid-row">
-    <div class="column-two-thirds">
-
-      <h1 class="heading-xlarge">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-xl">
         The GOV.UK prototype kit
-        <span class="heading-secondary">{{releaseVersion}}</span>
+        <span class="govuk-caption-xl">{{releaseVersion}}</span>
       </h1>{{releaseVersion | log }}
       <p>
         This kit lets you rapidly create HTML prototypes of GOV.UK services.
@@ -22,43 +21,24 @@ <h1 class="heading-xlarge">
         It contains all you need to prototype anything from simple static pages to complex, data-driven transactions.
       </p>
 
-      <h2 class="heading-medium">About this page</h2>
+      <h2 class="govuk-heading-m">About this page</h2>
 
       <p>We recommend you add links to your prototype to this page, rather than delete it.
         You'll find this page in the kit at '/app/views/index.html'.</p>
-      <p>You can change the service name by editing the file '/app/config.js'.</p>
-
-			<h2 class="heading-medium">Examples and documentation</h2>
 
-			<ul class="list list-bullet">
-				<li><a href="/docs/tutorials-and-examples">Example pages and documentation</a></li>
-				<li><a href="https://github.com/alphagov/govuk_prototype_kit">GitHub</a></li>
-			</ul>
-
-      <h2 class="heading-medium">Other resources</h2>
+      <p>You can change the service name by editing the file '/app/config.js'.</p>
 
-			<ul class="list list-bullet">
-				<li>
-					<a href="https://govuk-elements.herokuapp.com/snippets/">
-						Guide to GOV.UK Elements
-					</a>
-				</li>
-				<li>
-					<a href="https://www.gov.uk/service-manual">
-						Service design manual
-					</a>
-				</li>
-				<li>
-					<a href="https://www.gov.uk/design-principles">
-						Government Digital Service Design Principles
-					</a>
-				</li>
-			</ul>
+      <h2 class="govuk-heading-m">Examples and documentation</h2>
 
+      <ul class="govuk-list govuk-list--bullet">
+        <li><a href="/docs/tutorials-and-examples">Example pages and documentation</a></li>
+        <li>
+          <a href="https://design-system.service.gov.uk">
+            GOV.UK Design System
+          </a>
+        </li>
+      </ul>
     </div>
-  </div>
-</main>
+</div>
 
 {% endblock %}
-
-
diff --git a/app/views/layout.html b/app/views/layout.html
index e7f332ba54..95991f0dbc 100644
--- a/app/views/layout.html
+++ b/app/views/layout.html
@@ -1,55 +1,65 @@
-{% extends "govuk_template.html" %}
+{% extends "template.njk" %}
+
+{% from "back-link/macro.njk"     import govukBackLink %}
+{% from "breadcrumbs/macro.njk"   import govukBreadcrumbs %}
+{% from "button/macro.njk"        import govukButton %}
+{% from "checkboxes/macro.njk"    import govukCheckboxes %}
+{% from "date-input/macro.njk"    import govukDateInput %}
+{% from "details/macro.njk"       import govukDetails %}
+{% from "error-message/macro.njk" import govukErrorMessage %}
+{% from "error-summary/macro.njk" import govukErrorSummary %}
+{% from "fieldset/macro.njk"      import govukFieldset %}
+{% from "file-upload/macro.njk"   import govukFileUpload %}
+{% from "input/macro.njk"         import govukInput %}
+{% from "label/macro.njk"         import govukLabel %}
+{% from "panel/macro.njk"         import govukPanel %}
+{% from "phase-banner/macro.njk"  import govukPhaseBanner %}
+{% from "radios/macro.njk"        import govukRadios %}
+{% from "select/macro.njk"        import govukSelect %}
+{% from "skip-link/macro.njk"     import govukSkipLink %}
+{% from "table/macro.njk"         import govukTable %}
+{% from "tag/macro.njk"           import govukTag %}
+{% from "textarea/macro.njk"      import govukTextarea %}
+{% from "warning-text/macro.njk"  import govukWarningText %}
 
 {% block head %}
   {% include "includes/head.html" %}
 {% endblock %}
 
-{% block cookie_message %}
-  <p>{{cookieText | safe }}</p>
+{% block pageTitle %}
+  GOV.UK prototype kit
 {% endblock %}
 
-{% block proposition_header %}
-
-  <div class="header-proposition">
-    <div class="content">
-      <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
-      <nav id="proposition-menu">
-        <a href="/" id="proposition-name">
-          {# Set serviceName in config.js. Use a block to override on a page. #}
-          {% block service_name %}
-            {% if serviceName %} {{ serviceName }} {% endif %}
-          {% endblock %}
-        </a>
-        <!--
-        <ul id="proposition-links">
-          <li><a href="url-to-page-1" class="active">Navigation item #1</a></li>
-          <li><a href="url-to-page-2">Navigation item #2</a></li>
-        </ul>
-        -->
-      </nav>
-    </div>
-  </div>
-
+{% block header %}
+  {% include "includes/cookie-banner.html" %}
+  {# Set serviceName in config.js. #}
+  {{ govukHeader({
+    homepageUrl: "/",
+    serviceName: serviceName,
+    serviceUrl: "/",
+    containerClasses: "govuk-width-container"
+  }) }}
 {% endblock %}
 
-{% block header_class %}
-  with-proposition
-{% endblock %}
-
-{% block footer_support_links %}
-  {% if useAutoStoreData %}
-    <ul>
-      <li>
-        <a href="/prototype-admin/clear-data">Clear data</a>
-      </li>
-    </ul>
-  {% endif %}
-{% endblock %}
+{% if useAutoStoreData %}
+  {% block footer %}
+    {{ govukFooter({
+      meta: {
+        items: [
+          {
+            href: "/prototype-admin/clear-data",
+            text: "Clear data"
+          }
+        ]
+      }
+    }) }}
+  {% endblock %}
+{% endif %}
 
-{% block body_end %}
+{% block bodyEnd %}
   {% block scripts %}
     {% include "includes/scripts.html" %}
-    {% block page_scripts %}{% endblock %}
+    {% block pageScripts %}{% endblock %}
   {% endblock %}
   <!-- GOV.UK Prototype kit {{releaseVersion}} -->
 {% endblock %}
diff --git a/docs/assets/javascripts/docs.js b/docs/assets/javascripts/docs.js
index 758f39a0b5..c09abd4d40 100644
--- a/docs/assets/javascripts/docs.js
+++ b/docs/assets/javascripts/docs.js
@@ -1,5 +1,4 @@
 /* global $ */
-/* global GOVUK */
 
 // Warn about using the kit in production
 if (
@@ -11,13 +10,5 @@ if (
 }
 
 $(document).ready(function () {
-  // Use GOV.UK shim-links-with-button-role.js to trigger a link styled to look like a button,
-  // with role="button" when the space key is pressed.
-  GOVUK.shimLinksWithButtonRole.init()
-
-  // Show and hide toggled content
-  // Where .multiple-choice uses the data-target attribute
-  // to toggle hidden content
-  var showHideContent = new GOVUK.ShowHideContent()
-  showHideContent.init()
+  window.GOVUKFrontend.initAll()
 })
diff --git a/docs/assets/sass/docs-ie8.scss b/docs/assets/sass/docs-ie8.scss
index 9f717b8856..13e80cc9e1 100644
--- a/docs/assets/sass/docs-ie8.scss
+++ b/docs/assets/sass/docs-ie8.scss
@@ -1,4 +1,3 @@
-$is-ie: true;
-$ie-version: 8;
+$govuk-is-ie8: true;
 
 @import "docs";
diff --git a/docs/assets/sass/docs.scss b/docs/assets/sass/docs.scss
index 1c65d4c670..be7a1c3210 100644
--- a/docs/assets/sass/docs.scss
+++ b/docs/assets/sass/docs.scss
@@ -1,53 +1,17 @@
-@import "govuk-elements";
-
-.markdown {
-	h1 {
-		@extend .heading-xlarge;
-	}
-
-	h2 {
-		@extend .heading-large;
-	}
-
-	h3 {
-		@extend .heading-medium;
-	}
-
-	h4 {
-		@extend .heading-small;
-	}
-
-	code {
-		background: $grey-4;
-		padding: 3px;
-		font-size: 1em;
-	}
-
-	pre > code {
-		@extend .code;
-		display: block;
-		@extend .panel;
-		@extend .panel-border-wide;
-		margin-bottom: 15px;
-	}
-
-	img {
-		max-width: 100%;
-	}
-
-	ul {
-		@extend .list;
-		@extend .list-bullet;
-	}
-
-	blockquote {
-		@extend .panel;
-		@extend .panel-border-wide;
-	}
-
-	strong {
-		font-weight: 700;
-	}
+@import "node_modules/govuk-frontend/all";
+
+// adjust code block font-size to 19px
+.hljs {
+  font-size: 19px;
+  line-height: 25px;
+}
+
+.app-table--fixed {
+  table-layout: fixed;
+}
+
+.app-\!-db {
+  display: block !important;
 }
 
 .app-table--fixed {
@@ -57,3 +21,85 @@
 .app-\!-db {
   display: block !important;
 }
+
+.app-code {
+  font-size: 16px;
+  position: relative;
+  margin: 0;
+  padding: govuk-spacing(3);
+  overflow: auto;
+  border: 1px solid $govuk-border-colour;
+  background-color: govuk-colour("grey-4");
+  max-width: 38em;
+  @include govuk-responsive-margin(5, "bottom");
+}
+
+.app-prose-scope {
+
+  h1 {
+    @extend %govuk-heading-xl;
+  }
+
+  h2 {
+    @extend %govuk-heading-l;
+  }
+
+  h3 {
+    @extend %govuk-heading-m;
+  }
+
+  h4 {
+    @extend %govuk-heading-s;
+  }
+
+  p {
+    @extend %govuk-body-m;
+  }
+
+  strong,
+  b {
+    @include govuk-typography-weight-bold;
+  }
+
+  ul,
+  ol {
+    @extend %govuk-list;
+  }
+
+  ol {
+    @extend %govuk-list--number;
+  }
+
+  ul {
+    @extend %govuk-list--bullet;
+  }
+
+  a {
+    @extend %govuk-link;
+  }
+
+  hr {
+    @extend %govuk-section-break;
+    @extend %govuk-section-break--visible;
+    @extend %govuk-section-break--xl;
+  }
+
+  pre {
+    @extend .app-code;
+  }
+
+  // TODO: Blockquotes are likely the most semantic element to be using, update to use the inset component directly.
+  blockquote {
+    margin-left: 0;
+    @extend .govuk-inset-text;
+  }
+}
+
+.app-prose-scope ul + h2,
+.app-prose-scope ul + h3,
+.app-prose-scope ul + h4,
+.app-prose-scope pre + h2,
+.app-prose-scope pre + h3,
+.app-prose-scope pre + h4 {
+  @include govuk-responsive-margin(4, "top");
+}
diff --git a/docs/documentation/install/developer-install-instructions.md b/docs/documentation/install/developer-install-instructions.md
index b9e9f8d10e..1dabb88225 100644
--- a/docs/documentation/install/developer-install-instructions.md
+++ b/docs/documentation/install/developer-install-instructions.md
@@ -1,10 +1,6 @@
 # Instructions for developers
 
-It's built on the [Express](http://expressjs.com/) framework, and uses these GOV.UK resources:
-
-- [GOV.UK template](https://github.com/alphagov/govuk_template)
-- [GOV.UK front end toolkit](https://github.com/alphagov/govuk_frontend_toolkit)
-- [GOV.UK elements](https://github.com/alphagov/govuk_elements)
+It's built on the [Express](http://expressjs.com/) framework, and uses [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend).
 
 ## Requirements
 
diff --git a/docs/documentation/principles.md b/docs/documentation/principles.md
index b78eb28eae..a4b1002a5b 100644
--- a/docs/documentation/principles.md
+++ b/docs/documentation/principles.md
@@ -5,7 +5,7 @@ The prototype kit:
 - is designed for prototyping, not for production code
 - requires minimal skills to get started: HTML, CSS
 - should be fully documented in a way that is accessible to the target audience
-- makes use of existing GOV.UK tools and templates; the [GOV.UK template](https://github.com/alphagov/govuk_template), [GOV.UK front end toolkit](https://github.com/alphagov/govuk_frontend_toolkit) and [GOV.UK elements](https://github.com/alphagov/govuk_elements)
+- makes use of [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend)
 - allows for server-side code
 - can be extended - for example using NPM to install a module, access datastores, etc
 - makes it easy to share prototypes with others online
diff --git a/docs/documentation/tips-and-tricks.md b/docs/documentation/tips-and-tricks.md
index 85176a6f3d..73c374db7a 100644
--- a/docs/documentation/tips-and-tricks.md
+++ b/docs/documentation/tips-and-tricks.md
@@ -15,30 +15,54 @@ You can change the service name by editing the file '/app/config.js'.
 
 ## Show navigation in the header
 
-Remove the comments surrounding the unordered list with an ID of proposition links.
-
-    <nav id="proposition-menu">
-      <a href="/" id="proposition-name">Service name</a>
-      <!--
-      <ul id="proposition-links">
-        <li><a href="url-to-page-1" class="active">Navigation item #1</a></li>
-        <li><a href="url-to-page-2">Navigation item #2</a></li>
-      </ul>
-      -->
-    </nav>
+Import the header component macro place it in the `{% block header %}`and provide `navigation` items as shown below.
+
+    {% from 'header/macro.njk' import govukHeader %}
+
+    {% block header %}
+      {{ govukHeader({
+        homepageUrl: "/",
+        serviceName: "Service Name",
+        serviceUrl: "#",
+        containerClasses: "govuk-width-container",
+        navigation: [
+          {
+            href: "#1",
+            text: "Navigation item 1",
+            active: true
+          },
+          {
+            href: "#2",
+            text: "Navigation item 2"
+          }
+        ]
+      }) }}
+    {% endblock %}
 
 An example of this can be seen in the [blank question page](/docs/examples/template-question-page-blank) template.
 
-## Add a phase banner
+## Add a phase banner
 
-Include either the alpha or beta phase banner from the `app/views/includes/` folder.
+Import the phase-banner component and supply tag and feedback text.
 
 ### How to include an Alpha banner
 
-    {% include "includes/phase_banner_alpha.html" %}
+    {% from 'phase-banner/macro.njk' import govukPhaseBanner %}
 
-### How to include a Beta banner
+    {{ govukPhaseBanner({
+      tag: {
+        text: "alpha"
+      },
+      html: "This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it."
+    }) }}
 
-    {% include "includes/phase_banner_beta.html" %}
+### How to include a Beta banner
 
+    {% from 'phase-banner/macro.njk' import govukPhaseBanner %}
 
+    {{ govukPhaseBanner({
+      tag: {
+        text: "beta"
+      },
+      html: "This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it."
+    }) }}
diff --git a/docs/documentation/updating-the-kit.md b/docs/documentation/updating-the-kit.md
index 5fd7580e84..043d53625a 100644
--- a/docs/documentation/updating-the-kit.md
+++ b/docs/documentation/updating-the-kit.md
@@ -1,18 +1,24 @@
 # Updating the kit
 
-## Updating
-
 **Important note**
 
 If you have made any changes outside the `app` folder, this process will destroy those changes. We will try and improve the update process to avoid this, but in the meantime you will need to make a note of your changes outside `app`, and add them back after updating.
 
-### Steps
+## Version 7
+
+Version 7 of the GOV.UK Prototype Kit is a large change from previous versions. Updating an old prototype will mean re-writing most of the code.
+
+We are working on ways to make updating easier, so if you have a large prototype it may be worth waiting for that.
 
-Download the latest prototype kit zip file from GitHub
+There is a [guide to updating your code](https://design-system.service.gov.uk/get-started/updating-your-code/) on the GOV.UK Design System.
 
-In your project, delete everything apart from the `app` and `.git` folder
+## Steps
 
-Copy everything from the latest kit to your project, apart from the `app` folder. 
+Download the latest Prototype Kit.
+
+In your project, delete everything apart from the `app` and `.git` folder.
+
+Copy everything from the latest kit to your project, apart from the `app` folder.
 
 Copy the config.js file from the `app` folder in the latest kit to the `app` folder of your prototype. If you've made any changes to the config.js file in your prototype then you'll need to re-enter them in the new version of the file e.g. the service name.
 
@@ -124,54 +130,4 @@ In terminal:
 npm start
 ```
 
-If you still have an error, you can [raise an issue within github](https://github.com/alphagov/govuk_prototype_kit/issues) or ask in the [Slack channel for users of the prototype kit](https://ukgovernmentdigital.slack.com/messages/prototype-kit/) by providing as much information as you can about the error and the computer you are attempting to run the prototyping kit on.
-
----
-
-## Converting old prototypes
-
-Earlier versions of the prototype kit used a different templating language called Mustache.
-
-Converting Mustache templates to Nunjucks ones is relatively simple. Here are the main things you'll need to do:
-
-### Template inheritance
-
-    {{<layout}}
-
-    {{/layout}}
-
-Becomes…
-
-    {% extends "layout.html" %}
-
-### Template blocks
-
-    {{$pageTitle}}
-        GOV.UK prototype kit
-    {{/pageTitle}}
-
-Becomes…
-
-    {% block page_title %}
-        GOV.UK prototype kit
-    {% endblock %}
-
-and
-
-    {{$content}}
-    .......
-    {{/content}}
-
-Becomes...
-
-    {% block content %}
-    ........
-    {% endblock %}
-
-### Includes
-
-    {{>includes/breadcrumbs}}
-
-Becomes…
-
-    {% include "includes/breadcrumbs.html" %}
+If you still have an error, you can [raise an issue within github](https://github.com/alphagov/govuk_prototype_kit/issues) or ask in the [Slack channel for users of the Prototype Kit](https://ukgovernmentdigital.slack.com/messages/prototype-kit/) by providing as much information as you can about the error and the computer you are attempting to run the prototyping kit on.
diff --git a/docs/documentation/writing-css.md b/docs/documentation/writing-css.md
index 400b152c25..f720710ae9 100644
--- a/docs/documentation/writing-css.md
+++ b/docs/documentation/writing-css.md
@@ -1,12 +1,12 @@
 # Writing CSS
 
-CSS used in the prototype kit is written in the SCSS syntax of [Sass](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax). 
+CSS used in the prototype kit is written in the SCSS syntax of [Sass](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax).
 
 ## Sass
 
-Sass is an extension of CSS that gives a load of extra features useful in producing CSS for the mass of different devices and browsers. 
+Sass is an extension of CSS that gives a load of extra features useful in producing CSS for the mass of different devices and browsers.
 
-SCSS was chosen because you can paste CSS into it without breaking it which is useful for prototyping. Using SCSS means you can also use the [govuk_frontend_toolkit](https://github.com/alphagov/govuk_frontend_toolkit) Sass libraries which include styles for colours, typography, cross-browser fixes and other things which are used across GOV.UK.
+SCSS was chosen because you can paste CSS into it without breaking it which is useful for prototyping. Using SCSS means you can also use the [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) Sass libraries which include styles for colours, typography, cross-browser fixes and other things which are used across GOV.UK.
 
 ## Writing code
 
@@ -18,23 +18,8 @@ Every time a change happens in [application.scss](../app/assets/sass/application
 
 Try starting the app and adding some styles to `application.scss`. If you open `application.css` you should now see the compiled version of those styles.
 
-## Using the govuk_frontend_toolkit
-
-You can use the Sass libraries in the [govuk_frontend_toolkit](https://github.com/alphagov/govuk_frontend_toolkit) by importing the files from there directly into `application.scss`.
-
-If you look at [application.scss](../app/assets/sass/application.scss) you should see some are already being used.
-
-    @import '_typography';
-
-    ....
-
-    h1 {
-      @include bold-48;
-
-The line `@import '_typography';` makes all the code in [_typography.scss](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss) available. The `h1` can therefore be styled in the 48pt bold form of the font by using `@include bold-48;` to call the `bold-48` mixin.
-
 ## Imports
 
-Imports are done from either the toolkit's [stylesheets](https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets/) folder or the [app/assets/sass](../app/assets/sass) folder application.scss sits in. The latter means you can create your own partial files to import. 
+Imports are done from either [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend/tree/master/src/) folder or the [app/assets/sass](../app/assets/sass) folder application.scss sits in. The latter means you can create your own partial files to import.
 
-Note that the convention is to start the name of any partial with an underscore, like those in the toolkit.
+Note that the convention is to start the name of any partial with an underscore, like those in GOV.UK Frontend.
diff --git a/docs/views/about.html b/docs/views/about.html
index 21a10744b5..46cc753eb9 100644
--- a/docs/views/about.html
+++ b/docs/views/about.html
@@ -1,59 +1,64 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
 About - GOV.UK Prototype kit
 {% endblock %}
 
+{% block beforeContent %}
+	{{ govukBreadcrumbs({
+	  items: [
+	    {
+	      text: "GOV.UK Prototype kit",
+	      href: "/docs"
+	    }
+	  ]
+	}) }}
+{% endblock %}
+
 {% block content %}
 
-<main id="content" role="main">
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <div class="breadcrumbs">
-        <ol>
-          <li><a href="/docs">GOV.UK Prototype kit</a></li>
-        </ol>
-      </div>
-      <h1 class="heading-xlarge">About</h1>
-
-      <p class="lede">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-xl">About</h1>
+
+      <p class="govuk-body-l">
         The prototype kit provides a simple way to make interactive prototypes that look like pages on GOV.UK. These prototypes can be used to show ideas to people you work with, and to do user research
       </p>
 
-      <h2 class="heading-medium">Community</h2>
+      <h2 class="govuk-heading-m">Community</h2>
 
       <p>We have two Slack channels for the Prototype kit. You'll need a government email address to join.</p>
-      <ul class="list list-bullet">
+      <ul class="govuk-list govuk-list--bullet">
         <li><a href="https://ukgovernmentdigital.slack.com/messages/prototype-kit/">Slack channel for users of the prototype kit</a></li>
         <li><a href="https://ukgovernmentdigital.slack.com/messages/prototype-kit-dev/">Slack channel for developers of the prototype kit</a></li>
       </ul>
 
-      
-      <h2 class="heading-medium">Principles</h2>
-      
+
+      <h2 class="govuk-heading-m">Principles</h2>
+
       <p>The prototype kit:</p>
-      <ul class="list list-bullet">
+      <ul class="govuk-list govuk-list--bullet">
         <li>is designed for prototyping, not for production code</li>
         <li>requires minimal skills to get started: HTML, CSS</li>
         <li>should be fully documented in a way that is accessible to the target audience</li>
         <li>
-          makes use of existing GOV.UK tools and templates; the <a href="https://github.com/alphagov/govuk_template">GOV.UK template</a>, <a href="https://github.com/alphagov/govuk_frontend_toolkit">GOV.UK front end toolkit</a> and <a href="https://github.com/alphagov/govuk_elements">GOV.UK elements</a>
+          makes use of <a href="https://github.com/alphagov/govuk-frontend">GOV.UK Frontend</a>
         </li>
         <li>allows for server-side code</li>
         <li>can be extended - for example using NPM to install a module, access datastores, etc</li>
         <li>makes it easy to share prototypes with others online</li>
-        
+
       </ul>
 
 
-      <h2 class="heading-medium">Privacy</h2>
+      <h2 class="govuk-heading-m">Privacy</h2>
+
 
-      
       <p>You must protect user privacy at all times, even when using prototypes. Prototypes made with the kit look like GOV.UK, but do not have the same security provisions. Always make sure you are handling user data appropriately.</p>
-      
 
 
-      <h2 class="heading-medium">The kit is not a production framework</h2>
+
+      <h2 class="govuk-heading-m">The kit is not a production framework</h2>
 
       <p>Things made with the kit may look like GOV.UK, but do not have production code and likely aren't fully accessible. Don't use the kit as a base for a production service.</p>
 
@@ -62,7 +67,6 @@ <h2 class="heading-medium">The kit is not a production framework</h2>
 
   </div>
 
-  
-</main>
 
-{% endblock %}
\ No newline at end of file
+
+{% endblock %}
diff --git a/docs/views/cookies.html b/docs/views/cookies.html
index c34a19a121..df006175e4 100644
--- a/docs/views/cookies.html
+++ b/docs/views/cookies.html
@@ -1,32 +1,33 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
 About - GOV.UK Prototype kit
 {% endblock %}
 
+{% block beforeContent %}
+	{{ govukBreadcrumbs({
+	  items: [
+	    {
+	      text: "GOV.UK Prototype kit",
+	      href: "/docs"
+	    }
+	  ]
+	}) }}
+{% endblock %}
+
 {% block content %}
 
 
-<main id="content" role="main">
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <div class="breadcrumbs">
-        <ol>
-          <li><a href="/docs">GOV.UK prototype kit</a></li>
-        </ol>
-      </div>
-    </div>
-  </div>
-  <div class="grid-row">
-    <div class="column-two-thirds">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="heading-xlarge">Cookies</h1>
+      <h1 class="govuk-heading-xl">Cookies</h1>
 
       <p>The GOV.UK Prototype Kit puts small files (known as ‘cookies’) on to your computer.</p>
 
       <p>We use cookies to:</p>
 
-      <ul class="list list-bullet">
+      <ul class="govuk-list govuk-list--bullet">
         <li>record the notifications you&#39;ve seen so we don&#39;t show them again</li>
         <li>measure how you use the website so it can be updated and improved based on your activity</li>
       </ul>
@@ -37,38 +38,35 @@ <h1 class="heading-xlarge">Cookies</h1>
 
       <p><a href="https://ico.org.uk/for-the-public/online/cookies/">Find out how to manage cookies.</a></p>
 
-      <h2 class="heading-large">Our cookie message</h2>
+      <h2 class="govuk-heading-l">Our cookie message</h2>
 
       <p>You will see a message about cookies when you first visit the GOV.UK Prototype Kit. We’ll store a cookie so that your computer knows you’ve seen it and knows not to show it again.</p>
 
-      <table class="app-table--fixed">
-
-        <caption class="visually-hidden">Dates and amounts</caption>
-
-        <thead>
-          <tr>
-            <th scope="col">Name</th>
-            <th scope="col">Purpose</th>
-            <th scope="col">Expires</th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr>
-            <td>seen_cookie_message</td>
-            <td>Saves a message to let us know that you have seen our cookie message</td>
-            <td>28 days</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h2 class="heading-large">Measuring website usage with Google Analytics</h2>
+			{{ govukTable({
+				classes: "app-table--fixed",
+			  caption: "Dates and amounts",
+			  captionClasses: "govuk-visually-hidden",
+			  head: [
+          { text: "Name" },
+          { text: "Purpose" },
+          { text: "Expires" }
+			  ],
+			  rows: [
+			    [
+            { text: "seen_cookie_message" },
+            { text: "Saves a message to let us know that you have seen our cookie message" },
+            { text: "28 days" }
+			    ]
+			  ]
+			}) }}
+
+      <h2 class="govuk-heading-l">Measuring website usage with Google Analytics</h2>
 
       <p>We use Google Analytics software to collect information about how you use the GOV.UK Prototype Kit. We do this to help make sure the site is meeting the needs of its users and to help us make improvements.</p>
 
       <p>Google Analytics stores information about:</p>
 
-      <ul class="list list-bullet">
+      <ul class="govuk-list govuk-list--bullet">
         <li>the pages you visit</li>
         <li>how long you spend on each page</li>
         <li>how you got to the site</li>
@@ -81,39 +79,34 @@ <h2 class="heading-large">Measuring website usage with Google Analytics</h2>
 
       <p>Google Analytics sets the following cookies:</p>
 
-      <table class="app-table--fixed">
-
-        <caption class="visually-hidden">Dates and amounts</caption>
-
-
-        <thead>
-          <tr>
-            <th scope="col">Name</th>
-            <th scope="col">Purpose</th>
-            <th scope="col">Expires</th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr>
-            <td>_ga</td>
-            <td>This helps us count how many people visit the GOV.UK Prototype Kit site by tracking if you’ve visited before</td>
-            <td>2 years</td>
-          </tr>
-          <tr>
-            <td>_gid</td>
-            <td>This helps us count how many people visit the GOV.UK Prototype Kit site by tracking if you’ve visited before</td>
-            <td>24 hours</td>
-          </tr>
-          <tr>
-            <td>_gat</td>
-            <td>This is used to limit the rate at which page view requests are recorded by Google</td>
-            <td>1 minute</td>
-          </tr>
-        </tbody>
-      </table>
+			{{ govukTable({
+				classes: "app-table--fixed",
+			  caption: "Dates and amounts",
+			  captionClasses: "govuk-visually-hidden",
+			  head: [
+          { text: "Name" },
+          { text: "Purpose" },
+          { text: "Expires" }
+			  ],
+			  rows: [
+					[
+						{ text: "_ga" },
+						{ text: "This helps us count how many people visit the GOV.UK Prototype Kit site by tracking if you’ve visited before" },
+						{ text: "2 years" }
+					],
+					[
+						{ text: "_gid" },
+						{ text: "This helps us count how many people visit the GOV.UK Prototype Kit site by tracking if you’ve visited before" },
+						{ text: "24 hours" }
+					],
+					[
+						{ text: "_gat" },
+						{ text: "This is used to limit the rate at which page view requests are recorded by Google" },
+						{ text: "1 minute" }
+					]
+			  ]
+			}) }}
     </div>
   </div>
-</main>
 
 {% endblock %}
diff --git a/docs/views/documentation_template.html b/docs/views/documentation_template.html
index 88c913939c..30fdd3faa9 100644
--- a/docs/views/documentation_template.html
+++ b/docs/views/documentation_template.html
@@ -4,26 +4,27 @@
 Documentation - GOV.UK Prototype kit
 {% endblock %}
 
-{% block content %}
-
-<main id="content" role="main" class="docs markdown">
-	<div class="breadcrumbs">
-	  <ol role="breadcrumbs">
-	    <li><a href="/docs">GOV.UK prototype kit</a></li>
-	    <li><a href="/docs/tutorials-and-examples">Tutorials and examples</a></li>
-	  </ol>
-	</div>
-
-	<div class="grid-row">
-
-		<div class="column-two-thirds">
-
-			{{document | safe}}
-
-		</div>
-
-	</div>
-	
-</main>
+{% block beforeContent %}
+	{{ govukBreadcrumbs({
+	  items: [
+	    {
+	      text: "GOV.UK Prototype kit",
+	      href: "/docs"
+	    },
+	    {
+	      text: "Tutorials and examples",
+	      href: "/docs/tutorials-and-examples"
+	    }
+	  ]
+	}) }}
+{% endblock %}
 
-{% endblock %}
\ No newline at end of file
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <div class="app-prose-scope">
+        {{document | safe}}
+      </div>
+    </div>
+  </div>
+{% endblock %}
diff --git a/docs/views/examples/blank-govuk.html b/docs/views/examples/blank-govuk.html
index 01c52a863d..fc706aa712 100644
--- a/docs/views/examples/blank-govuk.html
+++ b/docs/views/examples/blank-govuk.html
@@ -1,12 +1,10 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Blank page
 {% endblock %}
 
 {% block content %}
 
-<main id="content" role="main">
-</main>
 
 {% endblock %}
diff --git a/docs/views/examples/blank-unbranded.html b/docs/views/examples/blank-unbranded.html
index fe08ecc6b1..0aee944ab2 100644
--- a/docs/views/examples/blank-unbranded.html
+++ b/docs/views/examples/blank-unbranded.html
@@ -1,20 +1,16 @@
 {% extends "layout_unbranded.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Example without branding
 {% endblock %}
 
 {% block content %}
 
-<main id="content" role="main">
-
-  <h1 class="heading-xlarge">
+  <h1 class="govuk-heading-xl">
     Example without GOV.UK branding
   </h1>
-  <p class="lede">
+  <p class="govuk-body-l">
     This page doesn't use New Transport or display the GOV.UK header and footer.
   </p>
 
-</main>
-
 {% endblock %}
diff --git a/docs/views/examples/branching.html b/docs/views/examples/branching.html
index b986aebd6d..b8fc3b93de 100644
--- a/docs/views/examples/branching.html
+++ b/docs/views/examples/branching.html
@@ -1,20 +1,21 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Example - Branching
 {% endblock %}
 
-{% block content %}
-<main id="content" role="main">
-
+{% block beforeContent %}
   {% include "includes/breadcrumb_examples.html" %}
+{% endblock %}
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
+{% block content %}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
       <form action="/docs/examples/over-18" method="get" class="form">
 
-        <h1 class="heading-xlarge">
+        <h1 class="govuk-heading-xl">
           Branching
         </h1>
 
@@ -26,40 +27,37 @@ <h1 class="heading-xlarge">
           You can see the code for this example here:
         </p>
 
-        <div class="code">
-          /docs/documentation_routes.js
-          /docs/views/examples/branching.html
-        </div>
-
-        <h2 class="heading-medium">
-          Are you 18 or over?
-        </h2>
-
-        <div class="form-group">
-          <fieldset class="inline">
-
-            <legend class="visuallyhidden">Are you 18 or over?</legend>
-
-            <div class="multiple-choice">
-              <input id="over18True" type="radio" name="over18" value="true">
-              <label for="over18True">Yes</label>
+        <pre class="app-code"><code>/docs/documentation_routes.js
+/docs/views/examples/branching.html</code></pre>
+
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset">
+          <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+            <h2 class="govuk-fieldset__heading">
+              Are you 18 or over?
+            </h2>
+          </legend>
+          <div class="govuk-radios govuk-radios--inline">
+            <div class="govuk-radios__item">
+              <input class="govuk-radios__input" id="over18-1" name="over18" type="radio" value="true">
+              <label class="govuk-label govuk-radios__label" for="over18-1">
+                Yes
+              </label>
             </div>
-
-            <div class="multiple-choice">
-              <input id="over18False" type="radio" name="over18" value="false">
-              <label for="over18False">No</label>
+            <div class="govuk-radios__item">
+              <input class="govuk-radios__input" id="over18-2" name="over18" type="radio" value="false">
+              <label class="govuk-label govuk-radios__label" for="over18-2">
+                No
+              </label>
             </div>
-
+          </div>
           </fieldset>
         </div>
 
-        <div class="form-group">
-          <input type="submit" class="button" value="Continue">
-        </div>
+        <button class="govuk-button">Continue</button>
 
       </form>
 
     </div>
   </div>
-</main>
 {% endblock %}
diff --git a/docs/views/examples/check-your-answers-page.html b/docs/views/examples/check-your-answers-page.html
index 1ff7a951d4..d921a0f30e 100644
--- a/docs/views/examples/check-your-answers-page.html
+++ b/docs/views/examples/check-your-answers-page.html
@@ -1,170 +1,168 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Check your answers
 {% endblock %}
 
-{% block content %}
+{% block beforeContent %}
+  <a class="govuk-back-link" href="/url/of/previous/page">Back</a>
+{% endblock %}
 
-<main id="content" role="main">
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <a href="#" class="link-back">Back</a>
+{% block content %}
+  <div class="govuk-govuk-grid-row">
+    <div class="govuk-grid-govuk-grid-column-two-thirds">
 
-      <h1 class="heading-large">
+      <h1 class="govuk-heading-l">
         Check your answers before sending your application
       </h1>
 
-
       <!-- only add a heading for a list if there is more than one list -->
-      <h2 class="heading-medium">
+      <h2 class="govuk-heading-m">
         Personal details
       </h2>
 
       <!-- use additional modifier class to change column widths for multiple groups of questions and answers: -->
-      <!--   * `cya-questions-short` for short questions -->
-      <!--   * `cya-questions-long` for long questions -->
+      <!--   * `app-check-your-answers--short` for short questions -->
+      <!--   * `app-check-your-answers__questions-long` for long questions -->
       <!--   * none for single group of q&a -->
-      <dl class="govuk-check-your-answers cya-questions-short">
-        <div>
-          <dt class="cya-question">
+      <dl class="app-check-your-answers app-check-your-answers--short">
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
             Name
           </dt>
-          <dd class="cya-answer">
+          <dd class="app-check-your-answers__answer">
             Sarah Philips
           </dd>
-          <dd class="cya-change">
+          <dd class="app-check-your-answers__change">
             <a href="#">
-              Change<span class="visually-hidden"> name</span>
+              Change<span class="govuk-visually-hidden"> name</span>
             </a>
           </dd>
         </div>
 
-        <div>
-          <dt class="cya-question">
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
             Date of birth
           </dt>
-          <dd class="cya-answer">
+          <dd class="app-check-your-answers__answer">
             5 January 1978
           </dd>
-          <dd class="cya-change">
+          <dd class="app-check-your-answers__change">
             <a href="#">
-              Change<span class="visually-hidden"> date of birth</span>
+              Change<span class="govuk-visually-hidden"> date of birth</span>
             </a>
           </dd>
         </div>
 
-        <div>
-          <dt class="cya-question">
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
             Home address
           </dt>
-          <dd class="cya-answer">
+          <dd class="app-check-your-answers__answer">
             72 Guild Street<br />
             London<br />
             SE23 6FH
           </dd>
-          <dd class="cya-change">
+          <dd class="app-check-your-answers__change">
             <a href="#">
-              Change<span class="visually-hidden"> home address</span>
+              Change<span class="govuk-visually-hidden"> home address</span>
             </a>
           </dd>
         </div>
 
-        <div>
-          <dt class="cya-question">
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
             Contact details
           </dt>
-          <dd class="cya-answer">
+          <dd class="app-check-your-answers__answer">
             07700 900457<br />
             sarah.phillips@example.com
           </dd>
-          <dd class="cya-change">
+          <dd class="app-check-your-answers__change">
             <a href="#">
-              Change<span class="visually-hidden"> contact details</span>
+              Change<span class="govuk-visually-hidden"> contact details</span>
             </a>
           </dd>
         </div>
       </dl>
 
 
-      <h2 class="heading-medium">
+      <h2 class="govuk-heading-m">
         Application details
       </h2>
 
-      <dl class="govuk-check-your-answers cya-questions-short">
-        <div>
-          <dt class="cya-question">
+      <dl class="app-check-your-answers app-check-your-answers--short">
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
             Previous application number
           </dt>
-          <dd class="cya-answer">
+          <dd class="app-check-your-answers__answer">
             502135326
           </dd>
-          <dd class="cya-change">
+          <dd class="app-check-your-answers__change">
             <a href="#">
-              Change<span class="visually-hidden"> previous application number</span>
+              Change<span class="govuk-visually-hidden"> previous application number</span>
             </a>
           </dd>
         </div>
 
-        <div>
-          <dt class="cya-question">
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
             Licence type
           </dt>
-          <dd class="cya-answer">
+          <dd class="app-check-your-answers__answer">
             For personal use
           </dd>
-          <dd class="cya-change">
+          <dd class="app-check-your-answers__change">
             <a href="#">
-              Change<span class="visually-hidden"> licence type</span>
+              Change<span class="govuk-visually-hidden"> licence type</span>
             </a>
           </dd>
         </div>
 
-        <div>
-          <dt class="cya-question">
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
             Home address
           </dt>
-          <dd class="cya-answer">
+          <dd class="app-check-your-answers__answer">
             72 Guild Street<br />
             London<br />
             SE23 6FH
           </dd>
-          <dd class="cya-change">
+          <dd class="app-check-your-answers__change">
             <a href="#">
-              Change<span class="visually-hidden"> home address</span>
+              Change<span class="govuk-visually-hidden"> home address</span>
             </a>
           </dd>
         </div>
 
-        <div>
-          <dt class="cya-question">
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
             Licence period
           </dt>
-          <dd class="cya-answer">
+          <dd class="app-check-your-answers__answer">
             This is a longer paragraph of text provided by the user to provide additional information.<br /><br />
             This is a second paragraph of text provided by the user.
           </dd>
-          <dd class="cya-change">
+          <dd class="app-check-your-answers__change">
             <a href="#">
-              Change<span class="visually-hidden"> licence period</span>
+              Change<span class="govuk-visually-hidden"> licence period</span>
             </a>
           </dd>
         </div>
       </dl>
 
 
-      <h2 class="heading-medium">Now send your application</h2>
+      <h2 class="govuk-heading-m">Now send your application</h2>
 
-      <p class="text">
+      <p>
         By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.
       </p>
 
-      <div class="form-group">
-        <a href="confirmation-page" class="button">Accept and send application</a>
-      </div>
+      <a class="govuk-button" href="confirmation-page" role="button">
+        Accept and send application
+      </a>
 
     </div>
   </div>
-</main>
-
 {% endblock %}
diff --git a/docs/views/examples/confirmation-page.html b/docs/views/examples/confirmation-page.html
index 88f3a81bc8..e689f408bc 100644
--- a/docs/views/examples/confirmation-page.html
+++ b/docs/views/examples/confirmation-page.html
@@ -1,31 +1,26 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Confirmation page example
 {% endblock %}
 
 {% block content %}
 
-<main id="content" role="main">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
-
-      <div class="govuk-box-highlight">
-        <h1 class="heading-xlarge">
-          Application complete
-        </h1>
-        <p class="font-large">
-          Your reference number is <br>
-          <strong class="bold">HDJ2123F</strong>
-        </p>
+      <div class="govuk-panel govuk-panel--confirmation">
+        <h2 class="govuk-panel__title">Application complete</h2>
+        <div class="govuk-panel__body">
+          Your reference number<br><strong>HDJ2123F</strong>
+        </div>
       </div>
 
       <p>
         We have sent you a confirmation email.
       </p>
 
-      <h2 class="heading-medium">What happens next</h2>
+      <h2 class="govuk-heading-m">What happens next</h2>
       <p>We've sent your application to Hackney Electoral Register Office.</p>
       <p>They will contact you either to confirm your registration, or to ask for more information.</p>
       <p><a href="https://www.gov.uk/service-manual/user-centred-design/resources/patterns/feedback-pages.html">What did you think of this service?</a> (takes 30 seconds)</p>
@@ -34,6 +29,4 @@ <h2 class="heading-medium">What happens next</h2>
     </div>
   </div>
 
-</main>
-
 {% endblock %}
diff --git a/docs/views/examples/over-18.html b/docs/views/examples/over-18.html
index 875e893e39..f9567f774a 100644
--- a/docs/views/examples/over-18.html
+++ b/docs/views/examples/over-18.html
@@ -1,18 +1,19 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Example - Branching - Over 18
 {% endblock %}
 
-{% block content %}
-<main id="content" role="main">
-
+{% block beforeContent %}
   {% include "includes/breadcrumb_examples.html" %}
+{% endblock %}
+
+{% block content %}
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-        <h1 class="heading-xlarge">
+        <h1 class="govuk-heading-xl">
           Over 18
         </h1>
 
@@ -26,5 +27,4 @@ <h1 class="heading-xlarge">
 
     </div>
   </div>
-</main>
 {% endblock %}
diff --git a/docs/views/examples/override-service-name.html b/docs/views/examples/override-service-name.html
index 7dd99731a9..1efc1ba426 100644
--- a/docs/views/examples/override-service-name.html
+++ b/docs/views/examples/override-service-name.html
@@ -1,23 +1,23 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   GOV.UK prototype kit - override service name
 {% endblock %}
 
-{% block service_name %}
+{% set serviceName %}
   Report a smokey vehicle
+{% endset %}
+
+{% block beforeContent %}
+  {% include "includes/breadcrumb_examples.html" %}
 {% endblock %}
 
 {% block content %}
 
-<main id="content" role="main">
-
-  {% include "includes/breadcrumb_examples.html" %}
-
-  <div class="grid-row">
-    <div class="column-two-thirds">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="heading-xlarge">
+      <h1 class="govuk-heading-xl">
         Override service name
       </h1>{{releaseVersion | log }}
       <p>
@@ -28,16 +28,11 @@ <h1 class="heading-xlarge">
         Use this code:
       </p>
 
-        <div class="code">
-          {% raw %}
-  {% block service_name %}
-    Report a smokey vehicle
-  {% endblock %}
-          {% endraw %}
-        </div>
+      <pre class="app-code"><code>{% raw %}{% set serviceName %}
+  Report a smokey vehicle
+{% endset%}{% endraw %}</code></pre>
 
     </div>
   </div>
-</main>
 
 {% endblock %}
diff --git a/docs/views/examples/pass-data/index.html b/docs/views/examples/pass-data/index.html
index bf976c9ced..8479972a5a 100644
--- a/docs/views/examples/pass-data/index.html
+++ b/docs/views/examples/pass-data/index.html
@@ -1,18 +1,19 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Example - Passing data
 {% endblock %}
 
-{% block content %}
-<main id="content" role="main">
-
+{% block beforeContent %}
   {% include "includes/breadcrumb_examples.html" %}
+{% endblock %}
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
+{% block content %}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="heading-xlarge">
+      <h1 class="govuk-heading-xl">
         Passing data from page to page
       </h1>
 
@@ -32,37 +33,21 @@ <h1 class="heading-xlarge">
         The code for the example is in this folder in the prototype kit:
       </p>
 
-      <pre>
-<div class="code">
-  /docs/views/examples/pass-data
-
-</div>
-      </pre>
+      <pre class="app-code"><code>/docs/views/examples/pass-data</code></pre>
 
-      <h2 class="heading-medium">How to use</h2>
+      <h2 class="govuk-heading-m">How to use</h2>
 
       <p>The kit stores data from inputs using the name attribute of the input.</p>
 
       <p>For example, if you have this input:</p>
 
-      <pre>
-<div class="code">
-  &lt;input name="first-name"&gt;
-
-</div>
-      </pre>
+      <pre class="app-code"><code>&lt;input name="first-name"&gt;</code></pre>
 
       <p>You can show what the user entered later on like this:</p>
 
-      <pre>
-<div class="code">
-  &lt;p&gt;{%raw%}{{ data['first-name'] }}{%endraw%}&lt;/p&gt;
-
-</div>
-      </pre>
-
+      <pre class="app-code"><code>&lt;p&gt;{%raw%}{{ data['first-name'] }}{%endraw%}&lt;/p&gt;</code></pre>
 
-      <h3 class="heading-small">
+      <h3 class="govuk-heading-s">
         Clearing data
       </h3>
 
@@ -70,7 +55,7 @@ <h3 class="heading-small">
         To clear the data (for example at the end of a user research session) click the "Clear data" link in the footer.
       </p>
 
-      <h3 class="heading-small">
+      <h3 class="govuk-heading-s">
         Showing answers in inputs
       </h3>
 
@@ -79,62 +64,39 @@ <h3 class="heading-small">
       </p>
 
       <p>For a text input:</p>
-      <pre>
-<div class="code">
-  &lt;input name="first-name" value="{%raw%}{{ data['first-name'] }}{%endraw%}"&gt;
 
-</div>
-      </pre>
+      <pre class="app-code"><code>&lt;input name="first-name" value="{%raw%}{{ data['first-name'] }}{%endraw%}"&gt;</code></pre>
 
       <p>For a radio or checkbox input you need to use the 'checked' function:</p>
-      <pre>
-<div class="code">
-  &lt;input type="radio" name="over-18" value="yes" {%raw%}{{ checked('over-18','yes') }}{%endraw%}&gt;
 
-</div>
-      </pre>
+      <pre class="app-code"><code>&lt;input type="radio" name="over-18" value="yes" {%raw%}{{ checked('over-18','yes') }}{%endraw%}&gt;</code></pre>
 
-      <h3 class="heading-small">
+      <h3 class="govuk-heading-s">
         Setting default data
       </h3>
 
       <p>You can set default values in this file in your prototype folder:
-      <pre>
-<div class="code">
-  app/data/session-data-defaults.js
 
-</div>
-      </pre>
+      <pre class="app-code"><code>app/data/session-data-defaults.js</code></pre>
 
-      <h2 class="heading-medium">Advanced features</h2>
+      <h2 class="govuk-heading-m">Advanced features</h2>
 
-      <h3 class="heading-small">
+      <h3 class="govuk-heading-s">
         Using the data on the server
       </h3>
 
       <p>You can access the data on the server in a route, for example for an input with name="first-name":</p>
 
-      <pre>
-<div class="code">
-  var firstName = req.session.data['first-name']
+      <pre class="app-code"><code>var firstName = req.session.data['first-name']</code></pre>
 
-</div>
-      </pre>
-
-      <h3 class="heading-small">
+      <h3 class="govuk-heading-s">
         Ignoring inputs
       </h3>
 
       <p>To prevent an input being stored, use an underscore at the start of the name.</p>
 
-      <pre>
-<div class="code">
-  &lt;input name="_secret"&gt;
-
-</div>
-      </pre>
+      <pre class="app-code"><code>&lt;input name="_secret"&gt;</code></pre>
 
     </div>
   </div>
-</main>
 {% endblock %}
diff --git a/docs/views/examples/pass-data/vehicle-check-answers.html b/docs/views/examples/pass-data/vehicle-check-answers.html
index 937c1a8d9b..753178e374 100644
--- a/docs/views/examples/pass-data/vehicle-check-answers.html
+++ b/docs/views/examples/pass-data/vehicle-check-answers.html
@@ -1,97 +1,77 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
 Check your answers
 {% endblock %}
 
 {% block content %}
 
-<main id="content" role="main">
-
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <h1 class="heading-large">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-l">
         Check your answers before sending your application
       </h1>
 
-      <div class="form-group">
-
-        <table class="check-your-answers">
+      <h2 class="govuk-heading-m">
+        Vehicle details
+      </h2>
 
-          <thead>
-            <tr>
-              <th colspan="2">
-                <h2 class="heading-medium">
-                  Vehicle details
-                </h2>
-              </th>
-              <th>
-              </th>
-            </tr>
-          </thead>
+      <dl class="app-check-your-answers app-check-your-answers--long">
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
+            Registration number
+          </dt>
+          <dd class="app-check-your-answers__answer">
+            {{ data['vehicle-registration'] }}
+          </dd>
+          <dd class="app-check-your-answers__change">
+            <a href="/docs/examples/pass-data/vehicle-registration">
+              Change <span class="govuk-visually-hidden">registration number</span>
+            </a>
+          </dd>
+        </div>
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
+            Vehicle type
+          </dt>
+          <dd class="app-check-your-answers__answer">
+            {{ data['vehicle-type'] }}
+          </dd>
+          <dd class="app-check-your-answers__change">
+            <a href="/docs/examples/pass-data/vehicle-type">
+              Change <span class="govuk-visually-hidden">vehicle type</span>
+            </a>
+          </dd>
+        </div>
+        <div class="app-check-your-answers__contents">
+          <dt class="app-check-your-answers__question">
+            Vehicle features
+          </dt>
+          <dd class="app-check-your-answers__answer">
+            <ul class="govuk-list govuk-list--bullet">
+              {% for feature in data['vehicle-features'] %}
+                <li>{{ feature }}</li>
+              {% else %}
+                <li>No features selected</li>
+              {% endfor %}
+            </ul>
+          </dd>
+          <dd class="app-check-your-answers__change">
+            <a href="/docs/examples/pass-data/vehicle-features">
+              Change <span class="govuk-visually-hidden">vehicle features</span>
+            </a>
+          </dd>
+        </div>
+      </dl>
 
-          <tbody>
-            <tr>
-              <td>
-                Registration number
-              </td>
-              <td>
-                {{data['vehicle-registration']}}
-              </td>
-              <td class="change-answer">
-                <a href="/docs/examples/pass-data/vehicle-registration">
-                  Change <span class="visuallyhidden">registration number</span>
-                </a>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                Vehicle type
-              </td>
-              <td>
-                {{data['vehicle-type']}}
-              </td>
-              <td class="change-answer">
-                <a href="/docs/examples/pass-data/vehicle-type">
-                  Change <span class="visuallyhidden">vehicle type</span>
-                </a>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                Vehicle features
-              </td>
-              <td>
-                <ul>
-                  {% for feature in data['vehicle-features'] %}
-                    <li>{{ feature }}</li>
-                  {% else %}
-                    <li>No features selected</li>
-                  {% endfor %}
-                </ul>
-              </td>
-              <td class="change-answer">
-                <a href="/docs/examples/pass-data/vehicle-features">
-                  Change <span class="visuallyhidden">vehicle features</span>
-                </a>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="form-group">
-        <p>
-          <a href="/docs/tutorials-and-examples">
-            Return to prototype kit examples
-          </a>
-        </p>
-      </div>
+      <p>
+        <a href="/docs/tutorials-and-examples">
+          Return to prototype kit examples
+        </a>
+      </p>
 
     </div>
 
   </div>
 
-</main>
-
 {% endblock %}
diff --git a/docs/views/examples/pass-data/vehicle-features.html b/docs/views/examples/pass-data/vehicle-features.html
index 79aa5af39a..4329ec0052 100644
--- a/docs/views/examples/pass-data/vehicle-features.html
+++ b/docs/views/examples/pass-data/vehicle-features.html
@@ -1,59 +1,57 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Example - Passing data
 {% endblock %}
 
-{% block content %}
-<main id="content" role="main">
-
+{% block beforeContent %}
   {% include "includes/breadcrumb_examples.html" %}
+{% endblock %}
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
-
-      <form action="/docs/examples/pass-data/vehicle-check-answers" method="post" class="form">
+{% block content %}
 
-        <h1 class="heading-medium">
-          Which of these applies to your vehicle?
-        </h1>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-        <div class="form-group">
-          <fieldset>
+      <form action="/docs/examples/pass-data/vehicle-check-answers" method="post" class="form">
 
-            <legend class="visuallyhidden">
-              Which of these applies to your vehicle?
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset" aria-describedby="vehicle-features-hint">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+              <h1 class="govuk-fieldset__heading">
+                Which of these applies to your vehicle?
+              </h1>
             </legend>
-
-            <p>
+            <span id="vehicle-features-hint" class="govuk-hint">
               Select all that apply
-            </p>
-
-            <div class="multiple-choice">
-              <input id="vehicle-feature-heated-seats" name="vehicle-features" type="checkbox" value="Heated seats" {{ checked("vehicle-features", "Heated seats") }}>
-              <label for="vehicle-feature-heated-seats">Heated seats</label>
-            </div>
-
-            <div class="multiple-choice">
-              <input id="vehicle-feature-gps" name="vehicle-features" type="checkbox" value="GPS" {{ checked("vehicle-features", "GPS") }}>
-              <label for="vehicle-feature-gps">GPS</label>
+            </span>
+            <div class="govuk-checkboxes">
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="vehicle-features-heated-seats" name="vehicle-features" type="checkbox" value="Heated seats" {{ checked("vehicle-features", "Heated seats") }}>
+                <label class="govuk-label govuk-checkboxes__label" for="vehicle-features-heated-seats">
+                  Heated seats
+                </label>
+              </div>
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="vehicle-features-gps" name="vehicle-features" type="checkbox" value="GPS" {{ checked("vehicle-features", "GPS") }}>
+                <label class="govuk-label govuk-checkboxes__label" for="vehicle-features-gps">
+                  GPS
+                </label>
+              </div>
+              <div class="govuk-checkboxes__item">
+                <input class="govuk-checkboxes__input" id="vehicle-features-radio" name="vehicle-features" type="checkbox" value="Radio" {{ checked("vehicle-features", "Radio") }}>
+                <label class="govuk-label govuk-checkboxes__label" for="vehicle-features-radio">
+                  Radio
+                </label>
+              </div>
             </div>
-
-            <div class="multiple-choice">
-              <input id="vehicle-feature-radio" name="vehicle-features" type="checkbox" value="Radio" {{ checked("vehicle-features", "Radio") }}>
-              <label for="vehicle-feature-radio">Radio</label>
-            </div>
-
           </fieldset>
         </div>
 
-        <div class="form-group">
-          <input type="submit" class="button" value="Continue">
-        </div>
+        <button class="govuk-button">Continue</button>
 
       </form>
 
     </div>
   </div>
-</main>
 {% endblock %}
diff --git a/docs/views/examples/pass-data/vehicle-registration.html b/docs/views/examples/pass-data/vehicle-registration.html
index f40c8059e9..253118998e 100644
--- a/docs/views/examples/pass-data/vehicle-registration.html
+++ b/docs/views/examples/pass-data/vehicle-registration.html
@@ -1,43 +1,33 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Example - Passing data
 {% endblock %}
 
-{% block content %}
-<main id="content" role="main">
-
+{% block beforeContent %}
   {% include "includes/breadcrumb_examples.html" %}
+{% endblock %}
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
-
-      <form action="/docs/examples/pass-data/vehicle-type" method="post" class="form">
+{% block content %}
 
-        <h1 class="heading-medium">
-          What is your vehicle registration number?
-        </h1>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-        <div class="form-group">
-          <fieldset>
+      <form action="/docs/examples/pass-data/vehicle-type" method="post" class="form">
 
-            <legend class="visuallyhidden">
+        <div class="govuk-form-group">
+          <h1 class="govuk-label-wrapper">
+            <label class="govuk-label govuk-label--m" for="registration-number">
               What is your vehicle registration number?
-            </legend>
-
-            <label class="visually-hidden" for="registration-number">Vehicle registration number</label>
-            <input class="form-control" id="registration-number" name="vehicle-registration" type="text" value="{{data['vehicle-registration']}}">
-
-          </fieldset>
+            </label>
+          </h1>
+          <input class="govuk-input" id="registration-number" name="vehicle-registration" type="text">
         </div>
 
-        <div class="form-group">
-          <input type="submit" class="button" value="Continue">
-        </div>
+        <button class="govuk-button">Continue</button>
 
       </form>
 
     </div>
   </div>
-</main>
 {% endblock %}
diff --git a/docs/views/examples/pass-data/vehicle-type.html b/docs/views/examples/pass-data/vehicle-type.html
index 93e5bf7195..a30f2cefc5 100644
--- a/docs/views/examples/pass-data/vehicle-type.html
+++ b/docs/views/examples/pass-data/vehicle-type.html
@@ -1,55 +1,54 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Example - Passing data
 {% endblock %}
 
-{% block content %}
-<main id="content" role="main">
-
+{% block beforeContent %}
   {% include "includes/breadcrumb_examples.html" %}
+{% endblock %}
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
-
-      <form action="/docs/examples/pass-data/vehicle-features" method="post" class="form">
+{% block content %}
 
-        <h1 class="heading-medium">
-          What type of vehicle do you have?
-        </h1>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-        <div class="form-group">
-          <fieldset>
+      <form action="/docs/examples/pass-data/vehicle-features" method="post" class="form">
 
-            <legend class="visuallyhidden">
-              What type of vehicle do you have?
+        <div class="govuk-form-group">
+          <fieldset class="govuk-fieldset">
+            <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+              <h1 class="govuk-fieldset__heading">
+                What type of vehicle do you have?
+              </h1>
             </legend>
-
-            <div class="multiple-choice">
-              <input id="vehicle-type-car" name="vehicle-type" type="radio" value="Car" {{ checked("vehicle-type", "Car") }}>
-              <label for="vehicle-type-car">Car</label>
-            </div>
-
-            <div class="multiple-choice">
-              <input id="vehicle-type-lorry" name="vehicle-type" type="radio" value="Lorry" {{ checked("vehicle-type", "Lorry") }}>
-              <label for="vehicle-type-lorry">Lorry</label>
+            <div class="govuk-radios">
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="vehicle-type-car" name="vehicle-type" type="radio" value="Car" {{ checked("vehicle-type", "Car") }}>
+                <label class="govuk-label govuk-radios__label" for="vehicle-type-car">
+                  Car
+                </label>
+              </div>
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="vehicle-type-lorry" name="vehicle-type" type="radio" value="Lorry" {{ checked("vehicle-type", "Lorry") }}>
+                <label class="govuk-label govuk-radios__label" for="vehicle-type-lorry">
+                  Lorry
+                </label>
+              </div>
+              <div class="govuk-radios__item">
+                <input class="govuk-radios__input" id="vehicle-type-motorcycle" name="vehicle-type" type="radio" value="Motorcycle" {{ checked("vehicle-type", "Motorcycle") }}>
+                <label class="govuk-label govuk-radios__label" for="vehicle-type-motorcycle">
+                  Motorcycle
+                </label>
+              </div>
             </div>
-
-            <div class="multiple-choice">
-              <input id="vehicle-type-motorcycle" name="vehicle-type" type="radio" value="Motorcycle" {{ checked("vehicle-type", "Motorcycle") }}>
-              <label for="vehicle-type-motorcycle">Motorcycle</label>
-            </div>
-
           </fieldset>
         </div>
 
-        <div class="form-group">
-          <input type="submit" class="button" value="Continue">
-        </div>
+        <button class="govuk-button">Continue</button>
 
       </form>
 
     </div>
   </div>
-</main>
 {% endblock %}
diff --git a/docs/views/examples/start-page.html b/docs/views/examples/start-page.html
index 28a65446d4..8390f18150 100644
--- a/docs/views/examples/start-page.html
+++ b/docs/views/examples/start-page.html
@@ -1,39 +1,44 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Start page example
 {% endblock %}
 
-{% block proposition_header %}
-  <!-- blank to remove the proposition header -->
+{% block header %}
+  {{ govukHeader({
+    "homepageUrl": "/",
+    "containerClasses": "govuk-width-container"
+  }) }}
 {% endblock %}
 
-{% block header_class %}
-  <!-- blank to remove the proposition header -->
+{% block beforeContent %}
+  <div class="govuk-breadcrumbs">
+    <ol class="govuk-breadcrumbs__list">
+      <li class="govuk-breadcrumbs__list-item">
+        <a class="govuk-breadcrumbs__link" href="https://www.gov.uk">Home</a>
+      </li>
+      <li class="govuk-breadcrumbs__list-item">
+        <a class="govuk-breadcrumbs__link" href="#">Section</a>
+      </li>
+      <li class="govuk-breadcrumbs__list-item">
+        <a class="govuk-breadcrumbs__link">Subsection</a>
+      </li>
+    </ol>
+  </div>
 {% endblock %}
 
 {% block content %}
 
-<main id="content" role="main">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-  <div class="breadcrumbs">
-    <ol>
-      <li><a href="https://www.gov.uk">Home</a></li>
-      <li><a href="">Section</a></li>
-      <li>Subsection</li>
-    </ol>
-  </div>
-
-  <div class="grid-row">
-    <div class="column-two-thirds">
-
-      <h1 class="heading-xlarge">
+      <h1 class="govuk-heading-xl">
         {% if serviceName %} {{ serviceName }} {% endif %}
       </h1>
 
       <p>Use this service to:</p>
 
-      <ul class="list list-bullet">
+      <ul class="govuk-list govuk-list--bullet">
         <li>do something</li>
         <li>update your name, address or other details</li>
         <li>you need to do this in order to do something else</li>
@@ -42,10 +47,10 @@ <h1 class="heading-xlarge">
       <p>Registering takes around 5 minutes.</p>
 
       <p>
-        <a class="button button-start" href="#" role="button">Start now</a>
+        <a href="#" class="govuk-button govuk-button--start" role="button">Start now</a>
       </p>
 
-      <h2 class="heading-medium">Before you start</h2>
+      <h2 class="govuk-heading-m">Before you start</h2>
 
       <p>You can also <a href="#">register by post.</a></p>
 
@@ -54,15 +59,19 @@ <h2 class="heading-medium">Before you start</h2>
       <p>You can’t register for this service if you’re in the UK illegally.</p>
 
     </div>
-    <div class="column-third">
+    <div class="govuk-grid-column-one-third">
 
-      <aside class="govuk-related-items" role="complementary">
-        <h2 class="heading-medium" id="subsection-title">Subsection</h2>
+      <aside class="app-related-items" role="complementary">
+        <h2 class="govuk-heading-m" id="subsection-title">Subsection</h2>
         <nav role="navigation" aria-labelledby="subsection-title">
-          <ul class="font-xsmall">
+          <ul class="govuk-list govuk-body-s">
             <li><a href="#">Related link</a></li>
             <li><a href="#">Related link</a></li>
-            <li><a href="#" class="bold-xsmall">More <span class="visuallyhidden">in Subsection</span></a></li>
+            <li>
+              <a href="#" class="govuk-!-font-weight-bold">
+                More <span class="govuk-visually-hidden">in Subsection</span>
+              </a>
+            </li>
           </ul>
         </nav>
       </aside>
@@ -70,6 +79,4 @@ <h2 class="heading-medium" id="subsection-title">Subsection</h2>
     </div>
   </div>
 
-</main>
-
 {% endblock %}
diff --git a/docs/views/examples/task-list-page.html b/docs/views/examples/task-list-page.html
index f4c418ce01..6c99846907 100644
--- a/docs/views/examples/task-list-page.html
+++ b/docs/views/examples/task-list-page.html
@@ -1,81 +1,90 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Task list
 {% endblock %}
 
 {% block content %}
 
-<main id="content" role="main">
-  <div class="grid-row">
-    <div class="column-two-thirds column-minimum">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds app-column-minimum">
 
-      <h1 class="heading-large">
+      <h1 class="govuk-heading-l">
         Service name goes here
       </h1>
 
-      <ol class="task-list">
+      <ol class="app-task-list">
         <li>
-          <h2 class="task-list-section">
-            <span class="task-list-section-number">1. </span> Check before you start
+          <h2 class="app-task-list__section">
+            <span class="app-task-list__section-number">1. </span> Check before you start
           </h2>
-          <ul class="task-list-items">
-            <li class="task-list-item">
-              <a class="task-name" href="#" aria-describedby="eligibility-completed">
+          <ul class="app-task-list__items">
+            <li class="app-task-list__item">
+              <a class="app-task-list__task-name" href="#" aria-describedby="eligibility-completed">
                 Check eligibility
               </a>
-              <strong class="task-completed" id="eligibility-completed">Completed</strong>
+              <strong class="govuk-tag app-task-list__task-completed" id="eligibility-completed">
+                Completed
+              </strong>
             </li>
-            <li class="task-list-item">
-              <a class="task-name" href="#" aria-describedby="read-declaration-completed">
+            <li class="app-task-list__item">
+              <a class="app-task-list__task-name" href="#" aria-describedby="read-declaration-completed">
                 Read declaration
               </a>
-              <strong class="task-completed" id="read-declaration-completed">Completed</strong>
+              <strong class="govuk-tag app-task-list__task-completed" id="read-declaration-completed">
+                Completed
+              </strong>
             </li>
           </ul>
         </li>
         <li>
-          <h2 class="task-list-section">
-            <span class="task-list-section-number">2. </span> Prepare application
+          <h2 class="app-task-list__section">
+            <span class="app-task-list__section-number">2. </span> Prepare application
           </h2>
-          <ul class="task-list-items">
-            <li class="task-list-item">
-              <a class="task-name" href="#" aria-describedby="company-information-completed">
+          <ul class="app-task-list__items">
+            <li class="app-task-list__item">
+              <a class="app-task-list__task-name" href="#" aria-describedby="company-information-completed">
                 Company information
               </a>
-              <strong class="task-completed" id="company-information-completed">Completed</strong>
+              <strong class="govuk-tag app-task-list__task-completed" id="company-information-completed">
+                Completed
+              </strong>
             </li>
-            <li class="task-list-item">
-              <a class="task-name" href="#" aria-describedby="contact-details-completed">
+            <li class="app-task-list__item">
+              <a class="app-task-list__task-name" href="#" aria-describedby="contact-details-completed">
                 Your contact details
               </a>
-              <strong class="task-completed" id="contact-details-completed">Completed</strong>
+              <strong class="govuk-tag app-task-list__task-completed" id="contact-details-completed">
+                Completed
+              </strong>
             </li>
-            <li class="task-list-item">
-              <a class="task-name" href="#">
+            <li class="app-task-list__item">
+              <a class="app-task-list__task-name" href="#">
                 List convictions
               </a>
             </li>
-            <li class="task-list-item">
-              <a class="task-name" href="#">
+            <li class="app-task-list__item">
+              <a class="app-task-list__task-name" href="#">
                 Provide financial evidence
               </a>
             </li>
-            <li class="task-list-item">
-              <a class="task-name" href="#" aria-describedby="medical-information-completed">
+            <li class="app-task-list__item">
+              <a class="app-task-list__task-name" href="#" aria-describedby="medical-information-completed">
                 Give medical information
               </a>
-              <strong class="task-completed" id="medical-information-completed">Completed</strong>
+              <strong class="govuk-tag app-task-list__task-completed" id="medical-information-completed">
+                Completed
+              </strong>
             </li>
           </ul>
         </li>
         <li>
-          <h2 class="task-list-section">
-            <span class="task-list-section-number">3. </span> Apply
+          <h2 class="app-task-list__section">
+            <span class="app-task-list__section-number">3. </span> Apply
           </h2>
-          <ul class="task-list-items">
-            <li class="task-list-item">
-              <a class="task-name" href="#">
+          <ul class="app-task-list__items">
+            <li class="app-task-list__item">
+              <a class="app-task-list__task-name" href="#">
                 Submit and pay
               </a>
             </li>
@@ -85,6 +94,5 @@ <h2 class="task-list-section">
 
     </div>
   </div>
-</main>
 
 {% endblock %}
diff --git a/docs/views/examples/template-content-page.html b/docs/views/examples/template-content-page.html
index c6f02e67f5..9d981446ce 100644
--- a/docs/views/examples/template-content-page.html
+++ b/docs/views/examples/template-content-page.html
@@ -1,18 +1,19 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Question page
 {% endblock %}
 
-{% block content %}
+{% block beforeContent %}
+  <a class="govuk-back-link" href="/url/of/previous/page">Back</a>
+{% endblock %}
 
-<main id="content" role="main">
-  <div class="grid-row">
-    <div class="column-two-thirds">
+{% block content %}
 
-      <a class="link-back" href="/url/of/previous/page">Back</a>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="heading-large">
+      <h1 class="govuk-heading-l">
         Heading goes here
       </h1>
 
@@ -22,6 +23,5 @@ <h1 class="heading-large">
 
     </div>
   </div>
-</main>
 
 {% endblock %}
diff --git a/docs/views/examples/template-data.html b/docs/views/examples/template-data.html
index dbc66c59ff..4373af6c8b 100644
--- a/docs/views/examples/template-data.html
+++ b/docs/views/examples/template-data.html
@@ -1,18 +1,19 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Example of using variables in pages
 {% endblock %}
 
-{% block content %}
-<main id="content" role="main">
-
+{% block beforeContent %}
   {% include "includes/breadcrumb_examples.html" %}
+{% endblock %}
+
+{% block content %}
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="heading-xlarge">
+      <h1 class="govuk-heading-xl">
         Passing data into pages
       </h1>
 
@@ -27,5 +28,4 @@ <h1 class="heading-xlarge">
     </div>
   </div>
 
-</main>
 {% endblock %}
diff --git a/docs/views/examples/template-partial-areas.html b/docs/views/examples/template-partial-areas.html
deleted file mode 100644
index d831b82d4f..0000000000
--- a/docs/views/examples/template-partial-areas.html
+++ /dev/null
@@ -1,47 +0,0 @@
-{% extends "govuk_template.html" %}
-
-{% block head %}
-  {% include "includes/examples_head.html" %}
-{% endblock %}
-
-{% block homepage_url %}
-  https://www.gov.uk
-{% endblock %}
-
-{% block global_header_text %}
-  GOV.UK
-{% endblock %}
-
-{% block header_class %}with-proposition{% endblock %}
-
-{% block proposition_header %}
-  <div class="area header-proposition">Propositional navigation area</div>
-{% endblock %}
-
-{% block inside_header %}
-  <div class="area">Inside header area</div>
-{% endblock %}
-
-{% block after_header %}
-  <div class="area">After header area</div>
-{% endblock %}
-
-{% block cookie_message %}
-  <div class="area">Cookie message</div>
-{% endblock %}
-
-{% block content %}
-  <main class="area">Content area</main>
-{% endblock %}
-
-{% block body_end %}
-  <div class="area">Body end area</div>
-{% endblock %}
-
-{% block footer_top %}
-  <div class="area">Footer top area</div>
-{% endblock %}
-
-{% block footer_support_links %}
-  <div class="area">Footer support links area</div>
-{% endblock %}
diff --git a/docs/views/examples/template-question-page-blank.html b/docs/views/examples/template-question-page-blank.html
index 380421d977..c3142073e6 100644
--- a/docs/views/examples/template-question-page-blank.html
+++ b/docs/views/examples/template-question-page-blank.html
@@ -1,34 +1,32 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Question page
 {% endblock %}
 
-{% block content %}
+{% block beforeContent %}
+  <a class="govuk-back-link" href="/url/of/previous/page">Back</a>
+{% endblock %}
 
-<main id="content" role="main">
-  <div class="grid-row">
-    <div class="column-two-thirds">
+{% block content %}
 
-      <a class="link-back" href="/url/of/previous/page">Back</a>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="heading-large">Heading or question goes here
+      <h1 class="govuk-heading-l">Heading or question goes here
       </h1>
 
       <form class="form" action="/url/of/next/page" method="post">
 
         <p>[Insert question content here]</p>
 
-        <p>[See <a href="https://govuk-elements.herokuapp.com/form-elements/">GOV.UK Elements</a> for examples]</p>
+        <p>[See <a href="https://design-system.service.gov.uk/patterns/question-pages/">the GOV.UK Design System</a> for examples]</p>
 
-        <div class="form-group">
-          <input class="button" type="submit" value="Continue">
-        </div>
+        <button class="govuk-button">Continue</button>
 
       </form>
 
     </div>
   </div>
-</main>
 
 {% endblock %}
diff --git a/docs/views/examples/under-18.html b/docs/views/examples/under-18.html
index a2a70f1ef3..1f162e780c 100644
--- a/docs/views/examples/under-18.html
+++ b/docs/views/examples/under-18.html
@@ -1,18 +1,19 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Example - Branching - Under 18
 {% endblock %}
 
-{% block content %}
-<main id="content" role="main">
-
+{% block beforeContent %}
   {% include "includes/breadcrumb_examples.html" %}
+{% endblock %}
+
+{% block content %}
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-        <h1 class="heading-xlarge">
+        <h1 class="govuk-heading-xl">
           Under 18
         </h1>
 
@@ -26,5 +27,4 @@ <h1 class="heading-xlarge">
 
     </div>
   </div>
-</main>
 {% endblock %}
diff --git a/docs/views/includes/breadcrumb_examples.html b/docs/views/includes/breadcrumb_examples.html
index 81cdbb82b7..ca07a1fbb2 100644
--- a/docs/views/includes/breadcrumb_examples.html
+++ b/docs/views/includes/breadcrumb_examples.html
@@ -1,6 +1,10 @@
-<div class="breadcrumbs">
-  <ol>
-    <li><a href="/docs">GOV.UK prototype kit</a></li>
-    <li><a href="/docs/tutorials-and-examples">Tutorials and examples</a></li>
+<div class="govuk-breadcrumbs">
+  <ol class="govuk-breadcrumbs__list">
+    <li class="govuk-breadcrumbs__list-item">
+      <a class="govuk-breadcrumbs__link" href="/docs">GOV.UK prototype kit</a>
+    </li>
+    <li class="govuk-breadcrumbs__list-item">
+      <a class="govuk-breadcrumbs__link" href="/docs/tutorials-and-examples">Tutorials and examples</a>
+    </li>
   </ol>
-</div>
\ No newline at end of file
+</div>
diff --git a/docs/views/includes/cookie-banner.html b/docs/views/includes/cookie-banner.html
new file mode 100644
index 0000000000..40ea61aba7
--- /dev/null
+++ b/docs/views/includes/cookie-banner.html
@@ -0,0 +1,7 @@
+{% if shouldShowCookieMessage %}
+  <div class="app-cookie-banner">
+    <p class="app-cookie-banner__message">
+      {{cookieText | safe }}
+    </p>
+  </div>
+{% endif %}
diff --git a/docs/views/includes/examples_head.html b/docs/views/includes/examples_head.html
deleted file mode 100644
index 09ccc192d8..0000000000
--- a/docs/views/includes/examples_head.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<link href="/public/stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
-<link href="/public/stylesheets/examples.css" media="screen" rel="stylesheet" type="text/css" />
diff --git a/docs/views/includes/phase_banner_alpha.html b/docs/views/includes/phase_banner_alpha.html
deleted file mode 100644
index b0461cf260..0000000000
--- a/docs/views/includes/phase_banner_alpha.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="phase-banner-alpha">
-  <p>
-    <strong class="phase-tag">ALPHA</strong>
-    <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
-  </p>
-</div>
diff --git a/docs/views/includes/phase_banner_beta.html b/docs/views/includes/phase_banner_beta.html
deleted file mode 100644
index 936b35989d..0000000000
--- a/docs/views/includes/phase_banner_beta.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="phase-banner-beta">
-  <p>
-    <strong class="phase-tag">BETA</strong>
-    <span>This is a new service – your <a href="#">feedback</a> will help us to improve it.</span>
-  </p>
-</div>
diff --git a/docs/views/includes/propositional_navigation.html b/docs/views/includes/propositional_navigation.html
deleted file mode 100644
index 00ab5c54cf..0000000000
--- a/docs/views/includes/propositional_navigation.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="header-proposition">
-  <div class="content">
-    <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
-    <nav id="proposition-menu">
-      <a href="/" id="proposition-name">{% if serviceName %} {{ serviceName }} {% endif %}</a>
-      <!--
-      <ul id="proposition-links">
-        <li><a href="url-to-page-1" class="active">Navigation item #1</a></li>
-        <li><a href="url-to-page-2">Navigation item #2</a></li>
-      </ul>
-      -->
-    </nav>
-  </div>
-</div>
diff --git a/docs/views/includes/propositional_navigation_alpha.html b/docs/views/includes/propositional_navigation_alpha.html
deleted file mode 100644
index 79c3d5b011..0000000000
--- a/docs/views/includes/propositional_navigation_alpha.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="header-proposition">
-  <div class="content">
-    <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
-    <nav id="proposition-menu">
-      <a href="/" id="proposition-name">Service Name <span class="alpha-tag">Alpha</span></a>
-      <ul id="proposition-links">
-        <li><a href="url-to-page-1" class="active">Navigation item #1</a></li>
-        <li><a href="url-to-page-2">Navigation item #2</a></li>
-      </ul>
-    </nav>
-  </div>
-</div>
diff --git a/docs/views/includes/scripts.html b/docs/views/includes/scripts.html
index 5d4a4d3ebc..f2487ab98d 100644
--- a/docs/views/includes/scripts.html
+++ b/docs/views/includes/scripts.html
@@ -1,9 +1,6 @@
 <!-- Javascript -->
-<!--[if lte IE 8]><script src="/public/javascripts/bind.js"></script><![endif]-->
 <script src="/public/javascripts/jquery-1.11.3.js"></script>
-<script src="/public/javascripts/govuk/details.polyfill.js"></script>
-<script src="/public/javascripts/govuk/shim-links-with-button-role.js"></script>
-<script src="/public/javascripts/govuk/show-hide-content.js"></script>
+<script src="/node_modules/govuk-frontend/all.js"></script>
 <script src="/public/javascripts/docs.js"></script>
 
 {% if useAutoStoreData %}
diff --git a/docs/views/index.html b/docs/views/index.html
index 548182f535..d8ad502589 100644
--- a/docs/views/index.html
+++ b/docs/views/index.html
@@ -1,18 +1,17 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
 GOV.UK prototype kit
 {% endblock %}
 
 {% block content %}
 
-<main id="content" role="main">
-  <div class="grid-row">
-    <div class="column-two-thirds">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="heading-xlarge">GOV.UK prototype kit</h1>
+      <h1 class="govuk-heading-xl">GOV.UK prototype kit</h1>
 
-      <p class="lede">
+      <p class="govuk-body-l">
         Rapidly create HTML prototypes of GOV.UK services.
       </p>
 {{releaseVersion | log }}
@@ -21,27 +20,27 @@ <h1 class="heading-xlarge">GOV.UK prototype kit</h1>
 
   </div>
 
-  <div class="grid-row">
+  <div class="govuk-grid-row">
 
-        <div class="column-third">
+        <div class="govuk-grid-column-one-third">
 
-          <h2 class="heading-medium"><a href="/docs/install">Install</a></h2>
+          <h2 class="govuk-heading-m"><a href="/docs/install">Install</a></h2>
           <p>
             Download and installation instructions.
           </p>
 
         </div>
-        <div class="column-third">
+        <div class="govuk-grid-column-one-third">
 
-          <h2 class="heading-medium"><a href="/docs/tutorials-and-examples">Tutorials and examples</a></h2>
+          <h2 class="govuk-heading-m"><a href="/docs/tutorials-and-examples">Tutorials and examples</a></h2>
           <p>
             Tutorials, examples and templates.
           </p>
 
         </div>
-        <div class="column-third">
+        <div class="govuk-grid-column-one-third">
 
-          <h2 class="heading-medium"><a href="/docs/about">About</a></h2>
+          <h2 class="govuk-heading-m"><a href="/docs/about">About</a></h2>
           <p>
             About the kit, principles, privacy.
           </p>
@@ -49,11 +48,11 @@ <h2 class="heading-medium"><a href="/docs/about">About</a></h2>
         </div>
 
       </div>
-      <div class="grid-row">
+      <div class="govuk-grid-row">
 
-        <div class="column-third">
+        <div class="govuk-grid-column-one-third">
 
-          <h2 class="heading-medium"><a href="https://github.com/alphagov/govuk_prototype_kit">GitHub</a></h2>
+          <h2 class="govuk-heading-m"><a href="https://github.com/alphagov/govuk_prototype_kit">GitHub</a></h2>
           <p>
             Source code, contributing, bugs.
           </p>
@@ -62,6 +61,5 @@ <h2 class="heading-medium"><a href="https://github.com/alphagov/govuk_prototype_
 
 
       </div>
-</main>
 
 {% endblock %}
diff --git a/docs/views/install.html b/docs/views/install.html
index ff93faa955..ff20f5aee6 100644
--- a/docs/views/install.html
+++ b/docs/views/install.html
@@ -1,33 +1,39 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
 Getting started - GOV.UK Prototype kit
 {% endblock %}
 
-{% block content %}
+{% block beforeContent %}
+	{{ govukBreadcrumbs({
+	  items: [
+	    {
+	      text: "GOV.UK prototype kit",
+	      href: "/docs"
+	    }
+	  ]
+	}) }}
+{% endblock %}
 
-<main id="content" role="main">
-  <div class="grid-row">
-    <div class="column-two-thirds">
+{% block content %}
 
-      <div class="breadcrumbs">
-        <ol>
-          <li><a href="/docs">GOV.UK prototype kit</a></li>
-        </ol>
-      </div>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="heading-xlarge">Installing the kit</h1>
+      <h1 class="govuk-heading-xl">Installing the kit</h1>
 
-      <p class="lede">
+      <p class="govuk-body-l">
         Get up and running with the kit in 30 minutes.
       </p>
 
-      <h2 class="heading-medium">1. Download the kit</h2>
-      <a href="{{releaseURL}}" data-link="download">Download (zip)</a>
-      <h2 class="heading-medium">2. Install the kit</h2>
+      <h2 class="govuk-heading-m">1. Download the kit</h2>
+			<p>
+	      <a href="{{releaseURL}}" data-link="download">Download (zip)</a>
+			</p>
+      <h2 class="govuk-heading-m">2. Install the kit</h2>
 
       <p>Choose from:</p>
-      <ul class="list list-bullet">
+      <ul class="govuk-list govuk-list--bullet">
         <li><a href="/docs/install/introduction">simple install guide</a><br>for users new to Node.js, Git or the terminal</li>
         <li><a href="/docs/install/developer-install-instructions">advanced install guide</a><br>for users familiar with Node.js, Git and the terminal</li>
       </ul>
@@ -38,6 +44,4 @@ <h2 class="heading-medium">2. Install the kit</h2>
 </div>
 
 
-</main>
-
 {% endblock %}
diff --git a/docs/views/install_template.html b/docs/views/install_template.html
index 5d2e788081..320b61e6ad 100644
--- a/docs/views/install_template.html
+++ b/docs/views/install_template.html
@@ -4,26 +4,27 @@
 Install - GOV.UK Prototype kit
 {% endblock %}
 
-{% block content %}
-
-<main id="content" role="main" class="docs markdown">
-	<div class="breadcrumbs">
-	  <ol>
-	    <li><a href="/docs">GOV.UK prototype kit</a></li>
-	    <li><a href="/docs/install">Install</a></li>
-	  </ol>
-	</div>
-
-	<div class="grid-row">
-
-		<div class="column-two-thirds">
-
-			{{document | safe}}
-
-		</div>
-
-	</div>
-	
-</main>
+{% block beforeContent %}
+	{{ govukBreadcrumbs({
+	  items: [
+	    {
+	      text: "GOV.UK prototype kit",
+	      href: "/docs"
+	    },
+	    {
+	      text: "Install",
+	      href: "/docs/install"
+	    }
+	  ]
+	}) }}
+{% endblock %}
 
-{% endblock %}
\ No newline at end of file
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <div class="app-prose-scope">
+        {{document | safe}}
+      </div>
+    </div>
+  </div>
+{% endblock %}
diff --git a/docs/views/layout.html b/docs/views/layout.html
index 00397cdacf..ce594ad0d9 100644
--- a/docs/views/layout.html
+++ b/docs/views/layout.html
@@ -1,4 +1,26 @@
-{% extends "govuk_template.html" %}
+{% extends "template.njk" %}
+
+{% from "back-link/macro.njk"     import govukBackLink %}
+{% from "breadcrumbs/macro.njk"   import govukBreadcrumbs %}
+{% from "button/macro.njk"        import govukButton %}
+{% from "checkboxes/macro.njk"    import govukCheckboxes %}
+{% from "date-input/macro.njk"    import govukDateInput %}
+{% from "details/macro.njk"       import govukDetails %}
+{% from "error-message/macro.njk" import govukErrorMessage %}
+{% from "error-summary/macro.njk" import govukErrorSummary %}
+{% from "fieldset/macro.njk"      import govukFieldset %}
+{% from "file-upload/macro.njk"   import govukFileUpload %}
+{% from "input/macro.njk"         import govukInput %}
+{% from "label/macro.njk"         import govukLabel %}
+{% from "panel/macro.njk"         import govukPanel %}
+{% from "phase-banner/macro.njk"  import govukPhaseBanner %}
+{% from "radios/macro.njk"        import govukRadios %}
+{% from "select/macro.njk"        import govukSelect %}
+{% from "skip-link/macro.njk"     import govukSkipLink %}
+{% from "table/macro.njk"         import govukTable %}
+{% from "tag/macro.njk"           import govukTag %}
+{% from "textarea/macro.njk"      import govukTextarea %}
+{% from "warning-text/macro.njk"  import govukWarningText %}
 
 {% block head %}
   {% include "includes/head.html" %}
@@ -8,63 +30,59 @@
 {% endblock %}
 
 
-{% block body_start %}
+{% block bodyStart %}
   {% if promoMode == 'true' and gtmId %}
     {% include "includes/tracking_body.html" %}
   {% endif %}
 {% endblock %}
 
-
-{% block cookie_message %}
-  <p>{{cookieText | safe }}</p>
-{% endblock %}
-
-{% block proposition_header %}
-
-  <div class="header-proposition">
-    <div class="content">
-      <a href="#proposition-links" class="js-header-toggle menu">Menu</a>
-      <nav id="proposition-menu">
-        <a href="/docs" id="proposition-name">
-          {% block service_name %}
-            Prototype kit
-          {% endblock %}
-        </a>
-
-        <ul id="proposition-links">
-          <li><a href="/docs/install">Install</a></li>
-          <li><a href="/docs/tutorials-and-examples">Tutorials and examples</a></li>
-          <li><a href="/docs/about">About</a></li>
-          <li><a href="https://github.com/alphagov/govuk_prototype_kit">GitHub</a></li>
-        </ul>
-
-      </nav>
-    </div>
-  </div>
-
-{% endblock %}
-
-{% block header_class %}
-  with-proposition
+{% block header %}
+  {% include "includes/cookie-banner.html" %}
+  {# Set serviceName in config.js. #}
+  {{ govukHeader({
+    "homepageUrl": "/",
+    "serviceName": serviceName,
+    "serviceUrl": "/",
+    "containerClasses": "govuk-width-container",
+    "navigation": [
+      {
+        "href": "/docs/install",
+        "text": "Install"
+      },
+      {
+        "href": "/docs/tutorials-and-examples",
+        "text": "Tutorials and examples"
+      },
+      {
+        "href": "/docs/about",
+        "text": "About"
+      }
+    ]
+  }) }}
 {% endblock %}
 
-{% block footer_support_links %}
-  <ul class="app-!-db">
-    <li>
-      <a href="/prototype-admin/clear-data">Clear data</a>
-    </li>
-  </ul>
-  <ul>
-    <li>
-      <a href="/docs/cookies">Cookies</a>
-    </li>
-    <li>
-      <a href="/docs/privacy-policy">Privacy policy</a>
-    </li>
-  </ul>
+{% block footer %}
+  {{ govukFooter({
+    meta: {
+      items: [
+        {
+          href: "/prototype-admin/clear-data",
+          text: "Clear data"
+        },
+        {
+          href: "/docs/cookies",
+          text: "Cookies"
+        },
+        {
+          href: "/docs/privacy-policy",
+          text: "Privacy policy"
+        }
+      ]
+    }
+  }) }}
 {% endblock %}
 
-{% block body_end %}
+{% block bodyEnd %}
   {% include "includes/scripts.html" %}
   <!-- GOV.UK Prototype kit {{releaseVersion}} -->
 {% endblock %}
diff --git a/docs/views/layout_unbranded.html b/docs/views/layout_unbranded.html
index b3286f2b88..3613290c1c 100644
--- a/docs/views/layout_unbranded.html
+++ b/docs/views/layout_unbranded.html
@@ -1,9 +1,21 @@
-{% extends "govuk_template_unbranded.html" %}
+{% extends "template.njk" %}
+
+{% block headIcons %}
+  <link rel="shortcut icon" href="{{ asset_path }}images/unbranded.ico?0.18.3" type="image/x-icon" />
+  <link rel="mask-icon" href="{{ asset_path }}images/gov.uk_logotype_crown.svg?0.18.3" color="#0b0c0c">
+  <link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ asset_path }}images/apple-touch-icon-152x152.png?0.18.3">
+  <link rel="apple-touch-icon-precomposed" sizes="120x120" href="{{ asset_path }}images/apple-touch-icon-120x120.png?0.18.3">
+  <link rel="apple-touch-icon-precomposed" sizes="76x76" href="{{ asset_path }}images/apple-touch-icon-76x76.png?0.18.3">
+  <link rel="apple-touch-icon-precomposed" href="{{ asset_path }}images/apple-touch-icon-60x60.png?0.18.3">
+{% endblock %}
 
 {% block head %}
   <link href="/public/stylesheets/unbranded.css" media="screen" rel="stylesheet" type="text/css">
 {% endblock %}
 
+{% block header %}{% endblock %}
+{% block footer %}{% endblock %}
+
 {% block body_end %}
   {% include "includes/scripts.html" %}
 {% endblock %}
diff --git a/docs/views/privacy-policy.html b/docs/views/privacy-policy.html
index ad0231da54..58ea659ead 100644
--- a/docs/views/privacy-policy.html
+++ b/docs/views/privacy-policy.html
@@ -1,32 +1,32 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
 About - GOV.UK Prototype kit
 {% endblock %}
 
-{% block content %}
+{% block beforeContent %}
+	{{ govukBreadcrumbs({
+	  items: [
+	    {
+	      text: "GOV.UK prototype kit",
+	      href: "/docs"
+	    }
+	  ]
+	}) }}
+{% endblock %}
 
+{% block content %}
 
-<main id="content" role="main">
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <div class="breadcrumbs">
-        <ol>
-          <li><a href="/docs">GOV.UK prototype kit</a></li>
-        </ol>
-      </div>
-    </div>
-  </div>
-  <div class="grid-row">
-    <div class="column-two-thirds">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
 
-      <h1 class="heading-xlarge">Privacy policy</h1>
+      <h1 class="govuk-heading-xl">Privacy policy</h1>
 
       <p>We collect certain information and data about you when you use the GOV.UK Prototype Kit.</p>
 
       <p>We collect:</p>
 
-      <ul class="list list-bullet">
+      <ul class="govuk-list govuk-list--bullet">
         <li>questions, queries or feedback you leave</li>
         <li>your email address, if you contact us</li>
         <li>your Internet Protocol (IP) address, and which version of web browser you used</li>
@@ -35,17 +35,17 @@ <h1 class="heading-xlarge">Privacy policy</h1>
 
       <p>This data can be viewed by authorised people in the <a href="https://www.gov.uk/government/organisations/government-digital-service">Government Digital Service</a> (GDS) and our suppliers, to:</p>
 
-      <ul class="list list-bullet">
+      <ul class="govuk-list govuk-list--bullet">
         <li>improve the site by monitoring how you use it</li>
         <li>gather feedback to improve our services</li>
         <li>respond to any feedback you send us, if you’ve asked us to.</li>
       </ul>
 
-      <h2 class="heading-large">Where your data is stored</h2>
+      <h2 class="govuk-heading-l">Where your data is stored</h2>
 
       <p>We store your data on secure servers in the <a href="https://www.gov.uk/eu-eea">European Economic Area</a> (EEA).</p>
 
-      <h2 class="heading-large">Keeping your data secure</h2>
+      <h2 class="govuk-heading-l">Keeping your data secure</h2>
 
       <p>Sending information over the internet is generally not completely secure, and we can’t guarantee the security of your data while it’s in transit.</p>
 
@@ -53,32 +53,31 @@ <h2 class="heading-large">Keeping your data secure</h2>
 
       <p>We have procedures and security features in place to keep your data secure once we receive it.</p>
 
-      <h2 class="heading-large">Disclosing your information</h2>
+      <h2 class="govuk-heading-l">Disclosing your information</h2>
 
       <p>We may pass on your personal information if we have a legal obligation to do so, or if we have to enforce or apply our <a href="https://www.gov.uk/help/terms-conditions">terms of use</a> and other agreements. This includes exchanging information with other government departments for legal reasons.</p>
 
       <p>We won’t share your information with any other organisations for marketing, market research or commercial purposes, and we don’t pass on your details to other websites.</p>
 
-      <h2 class="heading-large">Your rights</h2>
+      <h2 class="govuk-heading-l">Your rights</h2>
 
       <p>You can <a href="https://www.gov.uk/data-protection">find out what information we hold about you</a>, and <a href="https://www.gov.uk/contact">ask us not to use any of the information we collect</a>.</p>
 
-      <h2 class="heading-large">Links to other websites</h2>
+      <h2 class="govuk-heading-l">Links to other websites</h2>
 
       <p>The GOV.UK Prototype Kit contains links to other websites.</p>
 
       <p>This privacy policy only applies to the GOV.UK Prototype Kit, and doesn’t cover other government services and transactions that we link to. These services have their own terms and conditions and privacy policies.</p>
 
-      <h3 class="heading-medium">Following a link to another website</h3>
+      <h3 class="govuk-heading-m">Following a link to another website</h3>
 
       <p>If you go to another website from this one, read the privacy policy on that website to find out what it does with your information.</p>
 
-      <h3 class="heading-medium">Following a link to the GOV.UK Prototype Kit from another website</h3>
+      <h3 class="govuk-heading-m">Following a link to the GOV.UK Prototype Kit from another website</h3>
 
       <p>If you come to the GOV.UK Prototype Kit from another website, we may receive information from the other website. We don’t use this data. You should read the privacy policy of the website you came from to find out more about this.</p>
 
     </div>
   </div>
-</main>
 
 {% endblock %}
diff --git a/docs/views/tutorials-and-examples.html b/docs/views/tutorials-and-examples.html
index ec7277c425..151b063750 100644
--- a/docs/views/tutorials-and-examples.html
+++ b/docs/views/tutorials-and-examples.html
@@ -1,39 +1,41 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   GOV.UK prototype kit
 {% endblock %}
 
+{% block beforeContent %}
+	{{ govukBreadcrumbs({
+	  items: [
+	    {
+	      text: "GOV.UK Prototype kit",
+	      href: "/docs"
+	    }
+	  ]
+	}) }}
+{% endblock %}
+
 {% block content %}
-<main id="content" role="main">
-
-  <div class="breadcrumbs">
-    <ol>
-      <li>
-        <a href="/docs">GOV.UK prototype kit</a>
-      </li>
-    </ol>
-  </div>
 
-  <h1 class="heading-xlarge">Tutorials and examples</h1>
+  <h1 class="govuk-heading-xl">Tutorials and examples</h1>
 
-  <div class="grid-row">
+  <div class="govuk-grid-row">
 
-    <div class="column-two-thirds">
-      <h2 class="heading-medium">Tutorials</h2>
+    <div class="govuk-grid-column-two-thirds">
+      <h2 class="govuk-heading-m">Tutorials</h2>
       <p>These tutorials are being actively developed. If you have suggestions for improvements, we'd love to hear from you.</p>
     </div>
   </div>
-  <div class="grid-row">
-    <div class="column-third">
-      <h3 class="heading-small">Getting started</h3>
-      <ul class="list list-bullet">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-one-third">
+      <h3 class="govuk-heading-s">Getting started</h3>
+      <ul class="govuk-list govuk-list--bullet">
         <li>
           <a href="/prototype-admin/download-latest" data-link="download">Download kit (zip)</a>
         </li>
         <li>
           <a href="/docs/install/introduction">Simple install guide</a>
-          <ol class="list list-number">
+          <ol class="govuk-list govuk-list--number">
             <li>
               <a href="/docs/install/requirements">Kit requirements</a>
             </li>
@@ -52,9 +54,9 @@ <h3 class="heading-small">Getting started</h3>
 
 
     </div>
-    <div class="column-third">
-      <h3 class="heading-small">Basic usage</h3>
-      <ul class="list list-bullet">
+    <div class="govuk-grid-column-one-third">
+      <h3 class="govuk-heading-s">Basic usage</h3>
+      <ul class="govuk-list govuk-list--bullet">
         <li>
           <a href="/docs/making-pages">Making pages</a>
         </li>
@@ -78,9 +80,9 @@ <h3 class="heading-small">Basic usage</h3>
         </li>
       </ul>
     </div>
-    <div class="column-third">
-      <h3 class="heading-small">Advanced usage</h3>
-      <ul class="list list-bullet">
+    <div class="govuk-grid-column-one-third">
+      <h3 class="govuk-heading-s">Advanced usage</h3>
+      <ul class="govuk-list govuk-list--bullet">
         <li>
           <a href="/docs/examples/pass-data">Passing data from page to page</a>
         </li>
@@ -102,7 +104,7 @@ <h3 class="heading-small">Advanced usage</h3>
         </li>
 
         <li>
-          <a href="/docs/examples/template-partial-areas">
+          <a href="https://design-system.service.gov.uk/styles/page-template/#changing-template-content">
             Template partial areas
           </a>
         </li>
@@ -110,9 +112,9 @@ <h3 class="heading-small">Advanced usage</h3>
     </div>
   </div>
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <h2 class="heading-medium">Page templates</h2>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h2 class="govuk-heading-m">Page templates</h2>
       <p class="text">
         Use these as the basis for your prototypes. We recommend making copies of the files rather than directly editing them.
       </p>
@@ -120,7 +122,7 @@ <h2 class="heading-medium">Page templates</h2>
         You can find them in your prototype folder, in /docs/views/examples
       </p>
 
-      <ul class="list list-bullet">
+      <ul class="govuk-list govuk-list--bullet">
         <li>
           <a href="/docs/examples/blank-govuk">
             Blank
@@ -161,10 +163,10 @@ <h2 class="heading-medium">Page templates</h2>
         </li>
       </ul>
 
-      <h2 class="heading-medium">GOV.UK Elements</h2>
+      <h2 class="govuk-heading-m">GOV.UK Design System</h2>
 
-      <p class="text">
-        <a href="https://govuk-elements.herokuapp.com/">GOV.UK Elements</a> is a guide to making your prototype look like a GOV.UK
+      <p>
+        <a href="https://design-system.service.gov.uk">GOV.UK Design System</a> is a guide to making your prototype look like a GOV.UK
         service, including typography, forms and more.
       </p>
 
@@ -172,6 +174,4 @@ <h2 class="heading-medium">GOV.UK Elements</h2>
 
   </div>
 
-</main>
-
 {% endblock %}
diff --git a/gulp/clean.js b/gulp/clean.js
index d017526905..7d5cf1d983 100644
--- a/gulp/clean.js
+++ b/gulp/clean.js
@@ -3,7 +3,6 @@
   ===========
   removes folders:
     - public
-    - govuk_modules
 */
 
 const gulp = require('gulp')
@@ -13,7 +12,6 @@ const config = require('./config.json')
 
 gulp.task('clean', function () {
   return gulp.src([config.paths.public + '/*',
-    config.paths.govukModules + '/*',
     '.port.tmp'], {read: false})
   .pipe(clean())
 })
diff --git a/gulp/config.json b/gulp/config.json
index b78d742535..6dcfe82b98 100644
--- a/gulp/config.json
+++ b/gulp/config.json
@@ -3,7 +3,6 @@
     "public": "public/",
     "assets" : "app/assets/",
     "docsAssets" : "docs/assets/",
-    "govukModules": "govuk_modules/",
     "nodeModules": "node_modules/",
     "lib": "lib/"
   }
diff --git a/gulp/copy-modules.js b/gulp/copy-modules.js
deleted file mode 100644
index 20f6fcf17c..0000000000
--- a/gulp/copy-modules.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-  copy-gov-modules.js
-  ===========
-  copies files for node_modules into govuk_modules
-*/
-
-const gulp = require('gulp')
-const config = require('./config.json')
-
-gulp.task('copy-toolkit', function () {
-  return gulp.src(['node_modules/govuk_frontend_toolkit/**'])
-  .pipe(gulp.dest(config.paths.govukModules + '/govuk_frontend_toolkit/'))
-})
-
-gulp.task('copy-template', function () {
-  return gulp.src(['node_modules/govuk_template_jinja/views/layouts/**'])
-  .pipe(gulp.dest(config.paths.govukModules + '/govuk_template/layouts/'))
-  .pipe(gulp.dest(config.paths.lib))
-})
-
-gulp.task('copy-template-assets', function () {
-  return gulp.src(['node_modules/govuk_template_jinja/assets/**'])
-  .pipe(gulp.dest(config.paths.govukModules + '/govuk_template/assets/'))
-})
-
-gulp.task('copy-elements-sass', function () {
-  return gulp.src(['node_modules/govuk-elements-sass/public/sass/**'])
-  .pipe(gulp.dest(config.paths.govukModules + '/govuk-elements-sass/'))
-})
diff --git a/gulp/sass.js b/gulp/sass.js
index 39be1f2f4b..33c2972e7e 100644
--- a/gulp/sass.js
+++ b/gulp/sass.js
@@ -1,7 +1,7 @@
 /*
   sass.js
   ===========
-  compiles sass from assets folder with the govuk_modules
+  compiles sass from assets folder
   also includes sourcemaps
 */
 
@@ -14,10 +14,7 @@ const config = require('./config.json')
 gulp.task('sass', function () {
   return gulp.src(config.paths.assets + '/sass/*.scss')
   .pipe(sourcemaps.init())
-  .pipe(sass({outputStyle: 'expanded',
-    includePaths: ['govuk_modules/govuk_frontend_toolkit/stylesheets',
-      'govuk_modules/govuk_template/assets/stylesheets',
-      'govuk_modules/govuk-elements-sass/']}).on('error', sass.logError))
+  .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
   .pipe(sourcemaps.write())
   .pipe(gulp.dest(config.paths.public + '/stylesheets/'))
 })
@@ -25,10 +22,7 @@ gulp.task('sass', function () {
 gulp.task('sass-documentation', function () {
   return gulp.src(config.paths.docsAssets + '/sass/*.scss')
   .pipe(sourcemaps.init())
-  .pipe(sass({outputStyle: 'expanded',
-    includePaths: ['govuk_modules/govuk_frontend_toolkit/stylesheets',
-      'govuk_modules/govuk_template/assets/stylesheets',
-      'govuk_modules/govuk-elements-sass/']}).on('error', sass.logError))
+  .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
   .pipe(sourcemaps.write())
   .pipe(gulp.dest(config.paths.public + '/stylesheets/'))
 })
diff --git a/gulp/tasks.js b/gulp/tasks.js
index 00b9491ab3..49905cde6e 100644
--- a/gulp/tasks.js
+++ b/gulp/tasks.js
@@ -16,20 +16,12 @@ gulp.task('default', function (done) {
 
 gulp.task('generate-assets', function (done) {
   runSequence('clean',
-                'copy-govuk-modules',
                 'sass',
                 'sass-documentation',
                 'copy-assets',
                 'copy-documentation-assets', done)
 })
 
-gulp.task('copy-govuk-modules', [
-  'copy-toolkit',
-  'copy-template-assets',
-  'copy-elements-sass',
-  'copy-template'
-])
-
 gulp.task('watch', function (done) {
   runSequence('watch-sass',
                'watch-assets', done)
diff --git a/lib/govuk_template_unbranded.html b/lib/govuk_template_unbranded.html
deleted file mode 100644
index 92e619d4aa..0000000000
--- a/lib/govuk_template_unbranded.html
+++ /dev/null
@@ -1,74 +0,0 @@
-{% block top_of_page %}{% endblock %}
-<!DOCTYPE html>
-<!--[if lt IE 9]><html class="lte-ie8 unbranded" lang="{{ html_lang|default('en') }}"><![endif]-->
-<!--[if gt IE 8]><!--><html class="unbranded" lang="{{ html_lang|default('en') }}"><!--<![endif]-->
-  <head>
-    <meta charset="utf-8" />
-    <title>{% block page_title %}{% endblock %}</title>
-
-    <!--[if gt IE 8]><!--><link href="{{ asset_path }}stylesheets/govuk-template.css?0.18.3" media="screen" rel="stylesheet" /><!--<![endif]-->
-    <!--[if IE 6]><link href="{{ asset_path }}stylesheets/govuk-template-ie6.css?0.18.3" media="screen" rel="stylesheet" /><![endif]-->
-    <!--[if IE 7]><link href="{{ asset_path }}stylesheets/govuk-template-ie7.css?0.18.3" media="screen" rel="stylesheet" /><![endif]-->
-    <!--[if IE 8]><link href="{{ asset_path }}stylesheets/govuk-template-ie8.css?0.18.3" media="screen" rel="stylesheet" /><![endif]-->
-    <link href="{{ asset_path }}stylesheets/govuk-template-print.css?0.18.3" media="print" rel="stylesheet" />
-
-    <!--[if IE 8]><link href="{{ asset_path }}stylesheets/fonts-ie8.css?0.18.3" media="all" rel="stylesheet" /><![endif]-->
-    <!--[if gte IE 9]><!--><link href="{{ asset_path }}stylesheets/fonts.css?0.18.3" media="all" rel="stylesheet" /><!--<![endif]-->
-    <!--[if lt IE 9]><script src="{{ asset_path }}javascripts/ie.js?0.18.3"></script><![endif]-->
-
-    <link rel="shortcut icon" href="{{ asset_path }}images/unbranded.ico?0.18.3" type="image/x-icon" />
-    <link rel="mask-icon" href="{{ asset_path }}images/gov.uk_logotype_crown.svg?0.18.3" color="#0b0c0c">
-    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ asset_path }}images/apple-touch-icon-152x152.png?0.18.3">
-    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="{{ asset_path }}images/apple-touch-icon-120x120.png?0.18.3">
-    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="{{ asset_path }}images/apple-touch-icon-76x76.png?0.18.3">
-    <link rel="apple-touch-icon-precomposed" href="{{ asset_path }}images/apple-touch-icon-60x60.png?0.18.3">
-
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta property="og:image" content="{{ asset_path }}images/opengraph-image.png?0.18.3">
-
-
-    {% block head %}{% endblock %}
-  </head>
-
-  <body class="{% block body_classes %}{% endblock %}">
-    <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
-
-    {% block body_start %}{% endblock %}
-
-    <div id="skiplink-container">
-      <div>
-        <a href="#content" class="skiplink">{{ skip_link_message|default('Skip to main content') }}</a>
-      </div>
-    </div>
-
-    <div id="global-cookie-message">
-
-        {% block cookie_message %}{% endblock %}
-
-    </div>
-    <!--end global-cookie-message-->
-
-
-    <header role="banner" id="global-header" class="{% block header_class %}{% endblock %}">
-    </header>
-    <!--end header-->
-
-
-    {% block after_header %}{% endblock %}
-
-    {% block content %}{% endblock %}
-
-    <footer class="group js-footer" id="footer" role="contentinfo">
-    </footer>
-
-    <!--end footer-->
-
-    <div id="global-app-error" class="app-error hidden"></div>
-
-    <script src="{{ asset_path }}javascripts/govuk-template.js?0.18.3" type="text/javascript"></script>
-
-    {% block body_end %}{% endblock %}
-
-    <script>if (typeof window.GOVUK === 'undefined') document.body.className = document.body.className.replace('js-enabled', '');</script>
-  </body>
-</html>
diff --git a/lib/prototype-admin/clear-data.html b/lib/prototype-admin/clear-data.html
index c58b051e45..14750f8484 100644
--- a/lib/prototype-admin/clear-data.html
+++ b/lib/prototype-admin/clear-data.html
@@ -1,14 +1,12 @@
 {% extends "layout.html" %}
 
-{% block page_title %}
+{% block pageTitle %}
   Clear data
 {% endblock %}
 
 {% block content %}
 
-<main id="content" role="main">
-  
-  <h1 class="heading-medium">
+  <h1 class="govuk-heading-m">
     Data cleared
   </h1>
 
@@ -21,7 +19,5 @@ <h1 class="heading-medium">
       Prototype home page
     </a>
   </p>
-  
-</main>
 
 {% endblock %}
diff --git a/lib/utils.js b/lib/utils.js
index f1e00edc06..6e45d97ae9 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -284,3 +284,25 @@ exports.autoStoreData = function (req, res, next) {
 
   next()
 }
+
+exports.handleCookies = function (app) {
+  return function handleCookies (req, res, next) {
+    const COOKIE_NAME = 'seen_cookie_message'
+    let cookie = req.cookies[COOKIE_NAME]
+
+    if (cookie === 'yes') {
+      app.locals.shouldShowCookieMessage = false
+      return next()
+    }
+
+    let maxAgeInDays = 28
+    res.cookie(COOKIE_NAME, 'yes', {
+      maxAge: maxAgeInDays * 24 * 60 * 60 * 1000,
+      httpOnly: true
+    })
+
+    app.locals.shouldShowCookieMessage = true
+
+    next()
+  }
+}
diff --git a/package.json b/package.json
index afb105ca4b..93c774851c 100644
--- a/package.json
+++ b/package.json
@@ -16,14 +16,13 @@
     "basic-auth-connect": "^1.0.0",
     "body-parser": "^1.14.1",
     "browser-sync": "^2.11.1",
+    "cookie-parser": "^1.4.3",
     "cross-spawn": "^5.0.0",
     "dotenv": "^4.0.0",
     "express": "4.15.2",
     "express-session": "^1.13.0",
     "express-writer": "0.0.4",
-    "govuk-elements-sass": "3.1.1",
-    "govuk_frontend_toolkit": "7.1.0",
-    "govuk_template_jinja": "0.22.3",
+    "govuk-frontend": "^1.0.0",
     "gulp": "^3.9.1",
     "gulp-clean": "^0.3.2",
     "gulp-mocha": "^4.3.1",
@@ -34,13 +33,12 @@
     "marked": "^0.3.6",
     "minimist": "1.2.0",
     "notifications-node-client": "^3.0.0",
-    "nunjucks": "^2.5.2",
+    "nunjucks": "^3.1.3",
     "portscanner": "^2.1.1",
     "prompt": "^1.0.0",
     "readdir": "0.0.13",
     "require-dir": "^0.3.0",
     "run-sequence": "^1.2.2",
-    "serve-favicon": "2.4.2",
     "standard": "^10.0.2",
     "supertest": "^3.0.0",
     "sync-request": "^4.0.3"
diff --git a/server.js b/server.js
index e057a3ce1d..f098c70edf 100644
--- a/server.js
+++ b/server.js
@@ -7,9 +7,9 @@ const bodyParser = require('body-parser')
 const browserSync = require('browser-sync')
 const dotenv = require('dotenv')
 const express = require('express')
-const favicon = require('serve-favicon')
 const nunjucks = require('nunjucks')
 const session = require('express-session')
+const cookieParser = require('cookie-parser')
 
 // Local dependencies
 const config = require('./app/config.js')
@@ -22,6 +22,13 @@ const app = express()
 const documentationApp = express()
 dotenv.config()
 
+// Set cookies for use in cookie banner.
+app.use(cookieParser())
+documentationApp.use(cookieParser())
+const handleCookies = utils.handleCookies(app)
+app.use(handleCookies)
+documentationApp.use(handleCookies)
+
 // Set up configuration variables
 var releaseVersion = packageJson.version
 var username = process.env.USERNAME
@@ -61,7 +68,12 @@ if (env === 'production' && useAuth === 'true') {
 }
 
 // Set up App
-var appViews = [path.join(__dirname, '/app/views/'), path.join(__dirname, '/lib/')]
+var appViews = [
+  path.join(__dirname, '/node_modules/govuk-frontend/'),
+  path.join(__dirname, '/node_modules/govuk-frontend/components'),
+  path.join(__dirname, '/app/views/'),
+  path.join(__dirname, '/lib/')
+]
 
 var nunjucksAppEnv = nunjucks.configure(appViews, {
   autoescape: true,
@@ -78,16 +90,19 @@ app.set('view engine', 'html')
 
 // Middleware to serve static assets
 app.use('/public', express.static(path.join(__dirname, '/public')))
-app.use('/public', express.static(path.join(__dirname, '/govuk_modules/govuk_template/assets')))
-app.use('/public', express.static(path.join(__dirname, '/govuk_modules/govuk_frontend_toolkit')))
-app.use('/public/images/icons', express.static(path.join(__dirname, '/govuk_modules/govuk_frontend_toolkit/images')))
+app.use('/assets', express.static(path.join(__dirname, 'node_modules', 'govuk-frontend', 'assets')))
 
-// Elements refers to icon folder instead of images folder
-app.use(favicon(path.join(__dirname, 'govuk_modules', 'govuk_template', 'assets', 'images', 'favicon.ico')))
+// Serve govuk-frontend in /public
+app.use('/node_modules/govuk-frontend', express.static(path.join(__dirname, '/node_modules/govuk-frontend')))
 
 // Set up documentation app
 if (useDocumentation) {
-  var documentationViews = [path.join(__dirname, '/docs/views/'), path.join(__dirname, '/lib/')]
+  var documentationViews = [
+    path.join(__dirname, '/node_modules/govuk-frontend/'),
+    path.join(__dirname, '/node_modules/govuk-frontend/components'),
+    path.join(__dirname, '/docs/views/'),
+    path.join(__dirname, '/lib/')
+  ]
 
   var nunjucksDocumentationEnv = nunjucks.configure(documentationViews, {
     autoescape: true,
@@ -188,8 +203,11 @@ app.get('/prototype-admin/download-latest', function (req, res) {
 })
 
 if (useDocumentation) {
-  // Copy app locals to documentation app locals
-  documentationApp.locals = app.locals
+  // Clone app locals to documentation app locals
+  // Use Object.assign to ensure app.locals is cloned to prevent additions from
+  // updating the original app.locals
+  documentationApp.locals = Object.assign({}, app.locals)
+  documentationApp.locals.serviceName = 'Prototype Kit'
 
   // Create separate router for docs
   app.use('/docs', documentationApp)