From bc83ff6c09de2f10b8085f8a49a858e7865a92f3 Mon Sep 17 00:00:00 2001
From: Katie Smith <katie.smith@digital.cabinet-office.gov.uk>
Date: Fri, 21 Feb 2020 13:21:44 +0000
Subject: [PATCH] Replace $gutter with govuk-spacing function

Replaced `$gutter` and similar variables such as `$gutter-half` with the
`govuk-spacing()` static spacing function. This uses `govuk-spacing()`
instead of `$govuk-gutter` because `$govuk-gutter` should only be used
for the gaps in between grid columns and we were mostly using `$gutter`
to add more space around elements.

There are other places in the SCSS files where we had hardcoded a
measurement in px which could be replaced with `govuk-spacing`, but this
commit only replaces the existing uses of `$gutter`.
---
 app/assets/stylesheets/_grids.scss            | 28 +++++++++----------
 app/assets/stylesheets/app.scss               | 10 +++----
 app/assets/stylesheets/components/banner.scss | 24 ++++++++--------
 .../stylesheets/components/big-number.scss    | 10 +++----
 .../stylesheets/components/browse-list.scss   | 10 +++----
 .../stylesheets/components/checkboxes.scss    |  4 +--
 .../components/conditional-radios.scss        |  6 ++--
 .../stylesheets/components/email-message.scss |  6 ++--
 .../stylesheets/components/file-upload.scss   |  2 +-
 .../components/fullscreen-table.scss          |  2 +-
 app/assets/stylesheets/components/letter.scss |  2 +-
 .../stylesheets/components/live-search.scss   |  2 +-
 .../stylesheets/components/message.scss       | 24 ++++++++--------
 .../stylesheets/components/navigation.scss    | 12 ++++----
 .../stylesheets/components/page-footer.scss   |  2 +-
 app/assets/stylesheets/components/pill.scss   |  2 +-
 .../stylesheets/components/preview-pane.scss  |  2 +-
 .../stylesheets/components/show-more.scss     |  2 +-
 .../stylesheets/components/site-footer.scss   |  4 +--
 .../stylesheets/components/sms-message.scss   |  6 ++--
 .../stick-at-top-when-scrolling.scss          | 14 +++++-----
 app/assets/stylesheets/components/table.scss  | 18 ++++++------
 .../stylesheets/components/task-list.scss     | 10 +++----
 .../stylesheets/components/textbox.scss       |  2 +-
 .../stylesheets/components/tick-cross.scss    |  6 ++--
 .../components/vendor/breadcrumbs.scss        |  6 ++--
 .../vendor/previous-next-navigation.scss      | 10 +++----
 app/assets/stylesheets/views/api.scss         |  2 +-
 app/assets/stylesheets/views/dashboard.scss   | 10 +++----
 app/assets/stylesheets/views/get_started.scss |  6 ++--
 app/assets/stylesheets/views/history.scss     |  6 ++--
 .../stylesheets/views/notification.scss       |  2 +-
 .../stylesheets/views/product-page.scss       | 16 +++++------
 app/assets/stylesheets/views/template.scss    |  2 +-
 app/assets/stylesheets/views/users.scss       |  8 +++---
 35 files changed, 139 insertions(+), 139 deletions(-)

diff --git a/app/assets/stylesheets/_grids.scss b/app/assets/stylesheets/_grids.scss
index 4efe1f317..bf89c79e9 100644
--- a/app/assets/stylesheets/_grids.scss
+++ b/app/assets/stylesheets/_grids.scss
@@ -23,28 +23,28 @@
 .top-gutter {
   @extend %contain-floats;
   display: block;
-  margin-top: $gutter;
+  margin-top: govuk-spacing(6);
   clear: both;
 }
 
 .top-gutter-4-3 {
   @extend %top-gutter;
-  margin-top: $gutter * 4 / 3;
+  margin-top: govuk-spacing(7);
 }
 
 .top-gutter-1-2 {
   @extend %top-gutter;
-  margin-top: $gutter-half;
+  margin-top: govuk-spacing(3);
 }
 
 .top-gutter-1-3 {
   @extend %top-gutter;
-  margin-top: $gutter / 3;
+  margin-top: govuk-spacing(2);
 }
 
 .top-gutter-2-3 {
   @extend %top-gutter;
-  margin-top: $gutter * 2 / 3;
+  margin-top: govuk-spacing(4);
 }
 
 .top-gutter-0 {
@@ -54,41 +54,41 @@
 %bottom-gutter,
 .bottom-gutter {
   @extend %contain-floats;
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
   clear: both;
 }
 
 .bottom-gutter-2-3 {
   @extend %bottom-gutter;
-  margin-bottom: $gutter-two-thirds;
+  margin-bottom: govuk-spacing(4);
 }
 
 .bottom-gutter-1-2 {
   @extend %bottom-gutter;
-  margin-bottom: $gutter-half;
+  margin-bottom: govuk-spacing(3);
 }
 
 .bottom-gutter-1-3 {
   @extend %bottom-gutter;
-  margin-bottom: $gutter/3;
+  margin-bottom: govuk-spacing(2);
 }
 
 .bottom-gutter-3-2 {
   @extend %bottom-gutter;
-  margin-bottom: $gutter * 3/2;
+  margin-bottom: govuk-spacing(6) * 3/2;
 }
 
 .bottom-gutter-2 {
   @extend %bottom-gutter;
-  margin-bottom: $gutter * 2;
+  margin-bottom: govuk-spacing(9);
 }
 
 .left-gutter {
-  padding-left: $gutter;
+  padding-left: govuk-spacing(6);
 }
 
 .left-gutter-4-3 {
-  padding-left: $gutter * 4 / 3;
+  padding-left: govuk-spacing(7);
 }
 
 .align-with-heading {
@@ -111,5 +111,5 @@
 }
 
 .align-with-big-number-hint {
-  margin-top: $gutter / 0.6;
+  margin-top: govuk-spacing(8);
 }
diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index afa76d974..b7de09d84 100644
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -17,7 +17,7 @@
 
   .heading-large,
   > .heading-medium {
-    margin: $gutter-half 0 ($gutter / 3 * 2) 0;
+    margin: govuk-spacing(3) 0 govuk-spacing(4) 0;
     word-wrap: break-word;
 
     &.top-gutter-0 {
@@ -55,7 +55,7 @@ td {
 }
 
 .heading-medium {
-  margin-top: $gutter;
+  margin-top: govuk-spacing(6);
 }
 
 .form-label {
@@ -86,12 +86,12 @@ td {
 
 details summary {
   text-decoration: underline;
-  margin-bottom: $gutter-half;
+  margin-bottom: govuk-spacing(3);
 }
 
 .spreadsheet {
 
-  margin-bottom: -$gutter;
+  margin-bottom: -govuk-spacing(6);
 
   .table {
     margin-bottom: 0;
@@ -208,5 +208,5 @@ details .arrow {
 }
 
 .heading-upcoming-jobs {
-  margin-top: $gutter-half;
+  margin-top: govuk-spacing(3);
 }
diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index 9eed69c66..e25e20be8 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -5,8 +5,8 @@
   @include bold-19;
   color: $button-colour;
   display: block;
-  padding: $gutter-half;
-  margin: $gutter-half 0 $gutter 0;
+  padding: govuk-spacing(3);
+  margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
   text-align: left;
   position: relative;
   clear: both;
@@ -28,11 +28,11 @@
 
 %banner-with-tick,
 .banner-with-tick {
-  padding: $gutter-half ($gutter + $gutter-half);
+  padding: govuk-spacing(3) (govuk-spacing(6) + govuk-spacing(3));
   background-image: file-url('tick.png');
   background-size: 19px;
   background-repeat: no-repeat;
-  background-position: $gutter-half $gutter-half;
+  background-position: govuk-spacing(3) govuk-spacing(3);
 
 }
 
@@ -68,7 +68,7 @@
   color: $white;
   margin-top: 10px;
   margin-bottom: 0;
-  padding: $gutter;
+  padding: govuk-spacing(6);
   height: 425px;
   overflow: hidden;
   box-shadow: inset 0 -1em 1.6em 0 rgba(0, 0, 0, 0.05);
@@ -81,14 +81,14 @@
   p {
 
     margin-top: 0;
-    margin-bottom: $gutter;
+    margin-bottom: govuk-spacing(6);
 
     &:last-child {
       margin-bottom: 0;
     }
 
     & + p {
-      margin-top: -$gutter-half;
+      margin-top: -govuk-spacing(3);
     }
 
   }
@@ -98,7 +98,7 @@
     font-weight: bold;
     display: block;
     padding: 0 ;
-    margin: 0 0 $gutter 0;
+    margin: 0 0 govuk-spacing(6) 0;
 
     &:link,
     &:visited {
@@ -133,15 +133,15 @@
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
-  padding: ($gutter-half - 1px) 0 ($gutter-half + 1px) 0;
+  padding: (govuk-spacing(3) - 1px) 0 (govuk-spacing(3) + 1px) 0;
   border-top: 1px solid $border-colour;
   border-bottom: 1px solid $border-colour;
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
   text-decoration: none;
 
   &:focus {
     border-top: 1px solid transparent;
-    border-bottom: 1px solid transparent;    
+    border-bottom: 1px solid transparent;
   }
 
   &-count,
@@ -175,7 +175,7 @@
   }
 
   & + .banner-dashboard {
-    margin-top: -$gutter;
+    margin-top: -govuk-spacing(6);
     border-top: none;
   }
 }
diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss
index 035c99e70..bed587724 100644
--- a/app/assets/stylesheets/components/big-number.scss
+++ b/app/assets/stylesheets/components/big-number.scss
@@ -18,7 +18,7 @@
 
 .big-number-dark {
   @extend %big-number;
-  padding: $gutter-half;
+  padding: govuk-spacing(3);
   position: relative;
   background: $black;
   color: $white;
@@ -52,11 +52,11 @@
 
   @extend %big-number;
   position: relative;
-  margin-bottom: $gutter-two-thirds;
+  margin-bottom: govuk-spacing(4);
 
   .big-number,
   .big-number-smaller {
-    padding: $gutter-half;
+    padding: govuk-spacing(3);
     position: relative;
     background: $black;
     color: $white;
@@ -146,12 +146,12 @@
 .big-number-meta-wrapper {
 
   position: relative;
-  margin: $gutter-half 0 $gutter 0;
+  margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
   background: $govuk-blue;
 
   .big-number-meta {
 
-    padding: ($gutter / 3) $gutter-half;
+    padding: govuk-spacing(2) govuk-spacing(3);
     color: $white;
     pointer-events: none;
 
diff --git a/app/assets/stylesheets/components/browse-list.scss b/app/assets/stylesheets/components/browse-list.scss
index ec7008737..9b1647110 100644
--- a/app/assets/stylesheets/components/browse-list.scss
+++ b/app/assets/stylesheets/components/browse-list.scss
@@ -1,11 +1,11 @@
 .browse-list {
-  margin-bottom: $gutter-half;
+  margin-bottom: govuk-spacing(3);
 
   .browse-sub-list {
-    margin-top: $gutter-half;
-    margin-left: $gutter;
+    margin-top: govuk-spacing(3);
+    margin-left: govuk-spacing(6);
     @include media('desktop') {
-      margin-left: $gutter * 2;
+      margin-left: govuk-spacing(9);
     }
   }
 
@@ -13,7 +13,7 @@
   &-sub-item {
     @include bold-24;
     list-style: none;
-    margin-bottom: $gutter-half;
+    margin-bottom: govuk-spacing(3);
   }
 
   &-link {
diff --git a/app/assets/stylesheets/components/checkboxes.scss b/app/assets/stylesheets/components/checkboxes.scss
index 9189d46d7..3986c65bf 100644
--- a/app/assets/stylesheets/components/checkboxes.scss
+++ b/app/assets/stylesheets/components/checkboxes.scss
@@ -3,7 +3,7 @@
   .selection-summary__text {
     @include core-19($tabular-numbers: true);
     padding: 5px 0 0 0;
-    margin-bottom: $gutter / 2;
+    margin-bottom: govuk-spacing(3);
 
     &:focus {
       outline: none;
@@ -66,7 +66,7 @@
 }
 
 .selection-content {
-  margin-bottom: ($gutter / 3) * 2;
+  margin-bottom: govuk-spacing(4);
 
   .checkboxes-nested {
     margin-bottom: 0;
diff --git a/app/assets/stylesheets/components/conditional-radios.scss b/app/assets/stylesheets/components/conditional-radios.scss
index e23eccae4..7a6a36783 100644
--- a/app/assets/stylesheets/components/conditional-radios.scss
+++ b/app/assets/stylesheets/components/conditional-radios.scss
@@ -1,5 +1,5 @@
 $border-thickness: 4px;
-$top-spacing: $gutter - 5px;
+$top-spacing: govuk-spacing(5);
 
 .multiple-choice {
 
@@ -17,8 +17,8 @@ $top-spacing: $gutter - 5px;
 
   &-panel {
     border-left: $border-thickness solid $border-colour;
-    margin: 0 0 (-$gutter-half) ($gutter-half + ($border-thickness / 2));
-    padding: $gutter-half 0 0 ($gutter - ($border-thickness / 2));
+    margin: 0 0 (-govuk-spacing(3)) (govuk-spacing(3) + ($border-thickness / 2));
+    padding: govuk-spacing(3) 0 0 (govuk-spacing(6) - ($border-thickness / 2));
     position: relative;
     top: -$top-spacing;
     z-index: 1;
diff --git a/app/assets/stylesheets/components/email-message.scss b/app/assets/stylesheets/components/email-message.scss
index c829a0de3..8147ed3db 100644
--- a/app/assets/stylesheets/components/email-message.scss
+++ b/app/assets/stylesheets/components/email-message.scss
@@ -1,12 +1,12 @@
 $white-50-opaque: rgba($white, 0.5);
 $button-bottom-border-colour: rgba(0, 0, 0, 0.17);
-$email-message-gutter: $gutter * 2;
+$email-message-gutter: govuk-spacing(9);
 
 // sass-lint:disable no-important
 
 .email-message {
 
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
   border: 1px solid $border-colour;
 
   &-meta {
@@ -49,7 +49,7 @@ $email-message-gutter: $gutter * 2;
 
     width: 100%;
     box-sizing: border-box;
-    padding: $gutter-half $email-message-gutter 0 $email-message-gutter;
+    padding: govuk-spacing(3) $email-message-gutter 0 $email-message-gutter;
     margin: 0 0 0 0;
     clear: both;
     position: relative;
diff --git a/app/assets/stylesheets/components/file-upload.scss b/app/assets/stylesheets/components/file-upload.scss
index 8ff2e92a9..5e99592f2 100644
--- a/app/assets/stylesheets/components/file-upload.scss
+++ b/app/assets/stylesheets/components/file-upload.scss
@@ -31,7 +31,7 @@
     &-filename {
       @include bold-19;
       display: inline-block;
-      padding-left: $gutter-half;
+      padding-left: govuk-spacing(3);
     }
 
     &-submit {
diff --git a/app/assets/stylesheets/components/fullscreen-table.scss b/app/assets/stylesheets/components/fullscreen-table.scss
index 08da3dfad..57c400a31 100644
--- a/app/assets/stylesheets/components/fullscreen-table.scss
+++ b/app/assets/stylesheets/components/fullscreen-table.scss
@@ -6,7 +6,7 @@
     z-index: 10;
     overflow-y: hidden;
     box-sizing: border-box;
-    margin: 0 0 $gutter 0;
+    margin: 0 0 govuk-spacing(6) 0;
     padding: 0 0 0 0;
     overflow: hidden;
     border-bottom: 1px solid $border-colour;
diff --git a/app/assets/stylesheets/components/letter.scss b/app/assets/stylesheets/components/letter.scss
index 500fe32ac..49f25bc3c 100644
--- a/app/assets/stylesheets/components/letter.scss
+++ b/app/assets/stylesheets/components/letter.scss
@@ -9,7 +9,7 @@ $iso-paper-ratio: 141.42135624%;
 .letter {
 
   padding: $iso-paper-ratio 0 0 0;
-  margin: 0 0 $gutter 0;
+  margin: 0 0 govuk-spacing(6) 0;
   position: relative;
   background: $panel-colour;
 
diff --git a/app/assets/stylesheets/components/live-search.scss b/app/assets/stylesheets/components/live-search.scss
index acd868b13..d1fd91b60 100644
--- a/app/assets/stylesheets/components/live-search.scss
+++ b/app/assets/stylesheets/components/live-search.scss
@@ -14,7 +14,7 @@ input[type=search] {
   }
 
   .form-group {
-    margin-bottom: $gutter * 2 / 3;
+    margin-bottom: govuk-spacing(4);
   }
 
 }
diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index 7844997f1..60b203f8c 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -2,7 +2,7 @@
   display: inline-block;
   vertical-align: top;
   width: 20px;
-  height: $gutter;
+  height: govuk-spacing(6);
   position: relative;
 
   &:before {
@@ -31,8 +31,8 @@
     margin: 0;
 
     a {
-      margin-bottom: -$gutter;
-      padding-bottom: $gutter;
+      margin-bottom: -govuk-spacing(6);
+      padding-bottom: govuk-spacing(6);
 
       &:hover .message-name-separator:before {
         border-color: $link-hover-colour;
@@ -64,7 +64,7 @@
 
   &-type {
     color: $secondary-text-colour;
-    margin: 0 0 $gutter-two-thirds 0;
+    margin: 0 0 govuk-spacing(4) 0;
     pointer-events: none;
   }
 
@@ -72,7 +72,7 @@
 
 #template-list {
 
-  margin-top: $gutter;
+  margin-top: govuk-spacing(6);
 
   &.top-gutter-5px {
     margin-top: 5px;
@@ -87,7 +87,7 @@
     &-with-checkbox {
 
       position: relative;
-      padding-left: $gutter * 2;
+      padding-left: govuk-spacing(9);
 
       .multiple-choice {
         position: absolute;
@@ -148,22 +148,22 @@
 
   &-empty {
     color: $secondary-text-colour;
-    padding: $gutter-half 0 $gutter-one-third 0;
+    padding: govuk-spacing(3) 0 govuk-spacing(2) 0;
   }
 
   &-selected-counter {
     color: $secondary-text-colour;
-    margin: $gutter-half 0;
+    margin: govuk-spacing(3) 0;
 
     @include media(tablet) {
       position: absolute;
       right: 0;
-      top: $gutter - 1px;
+      top: govuk-spacing(6) - 1px;
       margin: 0;
     }
 
     .content-fixed & {
-      right: $gutter-half;
+      right: govuk-spacing(3);
     }
 
   }
@@ -173,7 +173,7 @@
 .folder-heading {
 
   .govuk-grid-row & {
-    margin: $gutter-half 0 20px 0;
+    margin: govuk-spacing(3) 0 20px 0;
     word-wrap: break-word;
   }
 
@@ -246,7 +246,7 @@
   &-manage-link {
     display: block;
     text-align: right;
-    padding: $gutter-two-thirds 0 0 0;
+    padding: govuk-spacing(4) 0 0 0;
     position: relative;
     top: -6px;
   }
diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
index 5b71a68dd..1357ca9b0 100644
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -1,7 +1,7 @@
 .navigation {
 
   @include govuk-font($size: 19);
-  padding: 0 $gutter 0 0;
+  padding: 0 govuk-spacing(6) 0 0;
 
   $padding-top: 14px;
   $padding-bottom: 11px;
@@ -53,7 +53,7 @@
       position: absolute;
       top: 0;
       right: 0;
-      padding: $padding-top 0 $padding-bottom $gutter-half;
+      padding: $padding-top 0 $padding-bottom govuk-spacing(3);
 
       &:focus {
         outline: none;
@@ -67,7 +67,7 @@
 
     &-back-to {
 
-      padding: $padding-top $gutter-half $padding-bottom 0;
+      padding: $padding-top govuk-spacing(3) $padding-bottom 0;
       display: inline-block;
 
     }
@@ -145,7 +145,7 @@
 // https://github.com/alphagov/product-page-example/blob/master/source/stylesheets/modules/_sub-navigation.scss
 .sub-navigation {
   @include media(tablet) {
-    margin-top: $gutter * 1.5;
+    margin-top: govuk-spacing(6) * 1.5;
   }
 
   ol,
@@ -160,7 +160,7 @@
 
     border-bottom: 1px $grey-3 solid;
     display: block;
-    padding: $gutter-one-third 0;
+    padding: govuk-spacing(2) 0;
 
     a:link {
       text-decoration: none;
@@ -172,7 +172,7 @@
     }
 
     ol ol & {
-      padding-left: $gutter;
+      padding-left: govuk-spacing(6);
     }
   }
 
diff --git a/app/assets/stylesheets/components/page-footer.scss b/app/assets/stylesheets/components/page-footer.scss
index 56611d425..19209a24c 100644
--- a/app/assets/stylesheets/components/page-footer.scss
+++ b/app/assets/stylesheets/components/page-footer.scss
@@ -17,7 +17,7 @@
 
   &-secondary-link {
     display: block;
-    margin-top: $gutter;
+    margin-top: govuk-spacing(6);
   }
 
   &-right-aligned-link {
diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
index d8dab6cdf..72004fa1a 100644
--- a/app/assets/stylesheets/components/pill.scss
+++ b/app/assets/stylesheets/components/pill.scss
@@ -88,7 +88,7 @@
 
     display: block;
     text-align: left;
-    padding: 10px $gutter-half;
+    padding: 10px govuk-spacing(3);
     text-align: center;
 
     &:link,
diff --git a/app/assets/stylesheets/components/preview-pane.scss b/app/assets/stylesheets/components/preview-pane.scss
index 12b8c28c5..9b2c8618f 100644
--- a/app/assets/stylesheets/components/preview-pane.scss
+++ b/app/assets/stylesheets/components/preview-pane.scss
@@ -3,7 +3,7 @@
   box-sizing: border-box;
   border: solid 1px $border-colour;
   min-height: 200px;
-  margin-bottom: $gutter
+  margin-bottom: govuk-spacing(6)
 }
 
 #logo-img {
diff --git a/app/assets/stylesheets/components/show-more.scss b/app/assets/stylesheets/components/show-more.scss
index cf912a311..3cba1623a 100644
--- a/app/assets/stylesheets/components/show-more.scss
+++ b/app/assets/stylesheets/components/show-more.scss
@@ -4,7 +4,7 @@
   @include core-16;
   display: block;
   padding: 0 0;
-  margin: $gutter-half 0 $gutter-half 0;
+  margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
   text-align: center;
   border-top: 1px solid $border-colour;
 
diff --git a/app/assets/stylesheets/components/site-footer.scss b/app/assets/stylesheets/components/site-footer.scss
index e4f2e24e1..ad0c1ace8 100644
--- a/app/assets/stylesheets/components/site-footer.scss
+++ b/app/assets/stylesheets/components/site-footer.scss
@@ -3,8 +3,8 @@
     margin: 0 auto;
 
     &-wrapper {
-      margin-bottom: $gutter;
-      padding-bottom: $gutter * 2;
+      margin-bottom: govuk-spacing(6);
+      padding-bottom: govuk-spacing(9);
       border-bottom: 1px solid $grey-2;
     }
 
diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss
index 054d6b797..f524532b3 100644
--- a/app/assets/stylesheets/components/sms-message.scss
+++ b/app/assets/stylesheets/components/sms-message.scss
@@ -6,12 +6,12 @@ $tail-angle: 20deg;
   width: 100%;
   max-width: 464px;
   box-sizing: border-box;
-  padding: $gutter-half $gutter-half $gutter-half $gutter-half;
+  padding: govuk-spacing(3);
   background: $panel-colour;
   border: 1px solid $panel-colour;
   border-radius: 5px;
   white-space: normal;
-  margin: 0 0 $gutter 0;
+  margin: 0 0 govuk-spacing(6) 0;
   clear: both;
   word-wrap: break-word;
 
@@ -63,7 +63,7 @@ $tail-angle: 20deg;
 .sms-message-status {
   @include core-16;
   color: $secondary-text-colour;
-  margin: -20px $gutter-half 20px $gutter-half;
+  margin: -20px govuk-spacing(3) 20px govuk-spacing(3);
 }
 
 .sms-message-status-outbound {
diff --git a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
index c60647f9b..540c13f85 100644
--- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
+++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
@@ -1,14 +1,14 @@
 // CSS adapted from
 // https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling
 
-$sticky-padding: $gutter * 2 / 3;
+$sticky-padding: govuk-spacing(4);
 
 .js-stick-at-top-when-scrolling,
 .js-stick-at-bottom-when-scrolling {
 
   overflow: hidden;
-  margin-left: -$gutter-half;
-  padding: 10px 0 0 $gutter-half;
+  margin-left: -govuk-spacing(3);
+  padding: 10px 0 0 govuk-spacing(3);
   position: relative;
 
   .form-group {
@@ -21,8 +21,8 @@ $sticky-padding: $gutter * 2 / 3;
 
   .back-to-top-link {
     position: absolute;
-    top: $gutter;
-    right: $gutter-half;
+    top: govuk-spacing(6);
+    right: govuk-spacing(3);
     opacity: 0;
     transition: opacity 0.1s ease-in-out;
   }
@@ -41,7 +41,7 @@ $sticky-padding: $gutter * 2 / 3;
 .js-stick-at-bottom-when-scrolling {
 
   transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
-  padding: $sticky-padding 0 $sticky-padding $gutter-half;
+  padding: $sticky-padding 0 $sticky-padding govuk-spacing(3);
   margin-top: -$sticky-padding;
 
   & + .js-stick-at-bottom-when-scrolling {
@@ -68,7 +68,7 @@ $sticky-padding: $gutter * 2 / 3;
   position: fixed;
   background: $white;
   z-index: 100;
-  padding-right: $gutter-half;
+  padding-right: govuk-spacing(3);
   margin-top: 0;
 
   .back-to-top-link {
diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index d69b25af5..ffc84f021 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -1,11 +1,11 @@
 .table {
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
   width: 100%;
 }
 
 .table-heading {
   text-align: left;
-  margin: $gutter-half 0 $gutter-half 0;
+  margin: govuk-spacing(3) 0 govuk-spacing(3) 0;
 }
 
 .dashboard-table {
@@ -119,7 +119,7 @@
 
   table {
     table-layout: fixed;
-    margin-bottom: $gutter / 6;
+    margin-bottom: govuk-spacing(1);
   }
 
   th {
@@ -343,10 +343,10 @@
 
       position: absolute;
 
-      top: -$gutter-half;
+      top: -govuk-spacing(3);
       right: 0;
-      bottom: -$gutter-half + 4px;
-      left: -$gutter-half;
+      bottom: -govuk-spacing(3) + 4px;
+      left: -govuk-spacing(3);
 
       background: transparent;
     }
@@ -381,13 +381,13 @@ td.table-empty-message {
 
   @include core-16;
   color: $secondary-text-colour;
-  margin-bottom: $gutter * 1.3333;
+  margin-bottom: govuk-spacing(7);
   border-bottom: 1px solid $border-colour;
   padding: 35px 0 10px 0;
   text-align: center;
 
   .table + & {
-    margin-top: -$gutter;
+    margin-top: -govuk-spacing(6);
   }
 
 }
@@ -400,7 +400,7 @@ a.table-show-more-link {
   @include core-16;
   color: $secondary-text-colour;
   margin-top: 10px;
-  margin-bottom: $gutter * 1.3333;
+  margin-bottom: govuk-spacing(7);
   border-top: 1px solid $border-colour;
   border-bottom: 1px solid $border-colour;
   padding: 0.75em 0 0.5625em 0;
diff --git a/app/assets/stylesheets/components/task-list.scss b/app/assets/stylesheets/components/task-list.scss
index 3330fd32d..5fe309920 100644
--- a/app/assets/stylesheets/components/task-list.scss
+++ b/app/assets/stylesheets/components/task-list.scss
@@ -6,7 +6,7 @@ $indicator-colour: $black;
   padding: 3px 8px 1px 8px;
   position: absolute;
   right: 0;
-  top: $gutter - 2px;
+  top: govuk-spacing(6) - 2px;
   margin-top: -15px;
   border: 2px solid $indicator-colour;
   pointer-events: none;
@@ -18,7 +18,7 @@ $indicator-colour: $black;
 .task-list {
 
   border-top: 1px solid $border-colour;
-  margin: $gutter 0;
+  margin: govuk-spacing(6) 0;
 
   &-item {
 
@@ -27,7 +27,7 @@ $indicator-colour: $black;
     a {
       border-bottom: 1px solid $border-colour;
       display: block;
-      padding: $gutter-half 0;
+      padding: govuk-spacing(3) 0;
       padding-right: 20%;
       position: relative;
 
@@ -37,8 +37,8 @@ $indicator-colour: $black;
         border-color: transparent;
         top: -1px;
         margin-bottom: -2px;
-        padding-top: $gutter-half + 1px;
-        padding-bottom: $gutter-half + 1px;
+        padding-top: govuk-spacing(3) + 1px;
+        padding-bottom: govuk-spacing(3) + 1px;
       }
 
     }
diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss
index 4e6c4e484..f3a170eb4 100644
--- a/app/assets/stylesheets/components/textbox.scss
+++ b/app/assets/stylesheets/components/textbox.scss
@@ -36,7 +36,7 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
     border: 2px solid transparent;
-    padding-bottom: $gutter-half;
+    padding-bottom: govuk-spacing(3);
     z-index: 10;
 
     .placeholder,
diff --git a/app/assets/stylesheets/components/tick-cross.scss b/app/assets/stylesheets/components/tick-cross.scss
index b0a5938bc..0258b4f4f 100644
--- a/app/assets/stylesheets/components/tick-cross.scss
+++ b/app/assets/stylesheets/components/tick-cross.scss
@@ -51,10 +51,10 @@
 
           position: absolute;
 
-          top: -$gutter-half - 1;
+          top: -govuk-spacing(3) - 1;
           right: 0;
-          bottom: -$gutter-half;
-          left: -$gutter-half;
+          bottom: -govuk-spacing(3);
+          left: -govuk-spacing(3);
 
           background: transparent;
         }
diff --git a/app/assets/stylesheets/components/vendor/breadcrumbs.scss b/app/assets/stylesheets/components/vendor/breadcrumbs.scss
index 64f200a86..53a233b8a 100644
--- a/app/assets/stylesheets/components/vendor/breadcrumbs.scss
+++ b/app/assets/stylesheets/components/vendor/breadcrumbs.scss
@@ -32,11 +32,11 @@
   @include govuk-width-container;
   @include core-16($line-height: (25 / 16), $line-height-640: 1.75);
 
-  padding: $gutter-one-third 0;
+  padding: govuk-spacing(2) 0;
   list-style: none;
 
   @include media(tablet) {
-    margin-bottom: $gutter;
+    margin-bottom: govuk-spacing(6);
   }
 
   ol {
@@ -49,7 +49,7 @@
     display: inline-block;
 
     margin: 0;
-    padding: 0 $gutter-one-quarter 0 (11px + $gutter-one-quarter);
+    padding: 0 (govuk-spacing(6) / 4) 0 (11px + govuk-spacing(6) / 4);
 
     background-image: file-url('separator.png');
     background-repeat: no-repeat;
diff --git a/app/assets/stylesheets/components/vendor/previous-next-navigation.scss b/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
index 5db0b9be8..ca86045ee 100644
--- a/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
+++ b/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
@@ -30,10 +30,10 @@ $is-ie: false !default;
 
 .govuk-previous-and-next-navigation {
   display: block;
-  margin-top: $gutter;
-  margin-bottom: $gutter;
-  margin-left: -$gutter-half;
-  margin-right: -$gutter-half;
+  margin-top: govuk-spacing(6);
+  margin-bottom: govuk-spacing(6);
+  margin-left: -govuk-spacing(3);
+  margin-right: -govuk-spacing(3);
   overflow: hidden;
 
   ul {
@@ -52,7 +52,7 @@ $is-ie: false !default;
 
     a {
       display: block;
-      padding: $gutter-half;
+      padding: govuk-spacing(3);
       text-decoration: none;
 
       &:hover,
diff --git a/app/assets/stylesheets/views/api.scss b/app/assets/stylesheets/views/api.scss
index 4049c43c5..f2f1b717b 100644
--- a/app/assets/stylesheets/views/api.scss
+++ b/app/assets/stylesheets/views/api.scss
@@ -18,7 +18,7 @@
 
     &__heading {
       display: block;
-      margin-bottom: $gutter-half;
+      margin-bottom: govuk-spacing(3);
 
       &::before {
         top: -1.3em;
diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index 8faef80c7..b0035347b 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -5,14 +5,14 @@
   }
 
   > .heading-medium:first-of-type {
-    margin-top: $gutter-half;
+    margin-top: govuk-spacing(3);
   }
 
 }
 
 .keyline-block {
   border-top: 1px solid $border-colour;
-  padding-top: $gutter-half;
+  padding-top: govuk-spacing(3);
 }
 
 .spark-bar {
@@ -21,8 +21,8 @@
   box-sizing: border-box;
   display: block;
   width: 100%;
-  margin-bottom: $gutter-half;
-  height: $gutter-half;
+  margin-bottom: govuk-spacing(3);
+  height: govuk-spacing(3);
   color: $text-colour;
   text-align: left;
 
@@ -92,5 +92,5 @@
 
 .align-with-message-body {
   display: block;
-  margin-top: $gutter * 5 / 6;
+  margin-top: govuk-spacing(5);
 }
diff --git a/app/assets/stylesheets/views/get_started.scss b/app/assets/stylesheets/views/get_started.scss
index b46ae0115..ed914894f 100644
--- a/app/assets/stylesheets/views/get_started.scss
+++ b/app/assets/stylesheets/views/get_started.scss
@@ -5,8 +5,8 @@
   &__item {
 
     counter-increment: get-started-counter;
-    padding: 0 0 0 $gutter + 5px;
-    margin: ($gutter * 1.67) 0 0 0;
+    padding: 0 0 0 govuk-spacing(6) + 5px;
+    margin: govuk-spacing(8) 0 0 0;
     position: relative;
 
     &:before {
@@ -26,7 +26,7 @@
   &__heading {
     @include bold-24;
     display: inline-block;
-    margin: 5px 0 $gutter-half 0;
+    margin: 5px 0 govuk-spacing(3) 0;
   }
 
 }
diff --git a/app/assets/stylesheets/views/history.scss b/app/assets/stylesheets/views/history.scss
index b625c82e1..a8d16514e 100644
--- a/app/assets/stylesheets/views/history.scss
+++ b/app/assets/stylesheets/views/history.scss
@@ -1,13 +1,13 @@
-$item-top-padding: $gutter-half;
+$item-top-padding: govuk-spacing(3);
 
 .history-list {
 
   @include core-19;
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
 
   &-item {
 
-    padding: $item-top-padding 0 $gutter-half 0;
+    padding: $item-top-padding 0 govuk-spacing(3) 0;
     border-top: 1px solid $border-colour;
     position: relative;
 
diff --git a/app/assets/stylesheets/views/notification.scss b/app/assets/stylesheets/views/notification.scss
index 0961dc815..73153cddb 100644
--- a/app/assets/stylesheets/views/notification.scss
+++ b/app/assets/stylesheets/views/notification.scss
@@ -2,7 +2,7 @@
 
   @include core-16;
   color: $secondary-text-colour;
-  margin-top: -$gutter-half;
+  margin-top: -govuk-spacing(3);
 
   &.error {
 
diff --git a/app/assets/stylesheets/views/product-page.scss b/app/assets/stylesheets/views/product-page.scss
index 0be9acc9a..d1de13f70 100644
--- a/app/assets/stylesheets/views/product-page.scss
+++ b/app/assets/stylesheets/views/product-page.scss
@@ -11,8 +11,8 @@ $button-shadow-size: $govuk-border-width-form-element;
     // We need the `<main>` section to be above it, like the default order, so when we apply the
     // negative margin-top it overlaps the theme bar at the bottom of the header
     position: relative;
-    margin: -10px 0 $gutter * 1.5 0;
-    padding: 0 0 $gutter * 2 0;
+    margin: -10px 0 govuk-spacing(6) * 1.5 0;
+    padding: 0 0 govuk-spacing(9) 0;
     background: $product-page-blue;
     color: $white;
 
@@ -31,12 +31,12 @@ $button-shadow-size: $govuk-border-width-form-element;
 
     h1 {
       @include bold-48;
-      margin: 20px 0 $gutter 0;
+      margin: 20px 0 govuk-spacing(6) 0;
     }
 
     p {
       @include core-24;
-      margin: $gutter-half 0 $gutter;
+      margin: govuk-spacing(3) 0 govuk-spacing(6);
     }
 
     .govuk-link {
@@ -58,21 +58,21 @@ $button-shadow-size: $govuk-border-width-form-element;
   &-section {
 
     @include govuk-width-container;
-    margin-bottom: $gutter-half;
+    margin-bottom: govuk-spacing(3);
 
     h2 {
       @include bold-27;
-      margin: 0 0 $gutter;
+      margin: 0 0 govuk-spacing(6);
     }
 
     .with-keyline {
       border-top: 1px solid $border-colour;
-      padding: $gutter * 1.5 0 0 0;
+      padding: govuk-spacing(6) * 1.5 0 0 0;
     }
 
     img {
       width: 100%;
-      margin: 0 0 $gutter * 1.5 0;
+      margin: 0 0 govuk-spacing(6) * 1.5 0;
     }
 
   }
diff --git a/app/assets/stylesheets/views/template.scss b/app/assets/stylesheets/views/template.scss
index df7539f5b..201abefac 100644
--- a/app/assets/stylesheets/views/template.scss
+++ b/app/assets/stylesheets/views/template.scss
@@ -9,7 +9,7 @@
   position: absolute;
   background: $link-colour;
   color: $white;
-  padding: 10px $gutter-half;
+  padding: 10px govuk-spacing(3);
   z-index: 10000;
 
   &:link, &:visited {
diff --git a/app/assets/stylesheets/views/users.scss b/app/assets/stylesheets/views/users.scss
index 3610e7567..259d14bcc 100644
--- a/app/assets/stylesheets/views/users.scss
+++ b/app/assets/stylesheets/views/users.scss
@@ -1,19 +1,19 @@
-$item-top-padding: $gutter-half;
+$item-top-padding: govuk-spacing(3);
 
 .user-list {
 
   @include core-19;
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
 
   &-item {
 
-    padding: $item-top-padding 150px $gutter-half 0;
+    padding: $item-top-padding 150px govuk-spacing(3) 0;
     border-top: 1px solid $border-colour;
     position: relative;
 
     h3 {
 
-      padding-right: $gutter-half;
+      padding-right: govuk-spacing(3);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;