diff --git a/app/assets/scss/app-ie8.scss b/app/assets/scss/app-ie8.scss
index 88a20b34b6..9234d4fa7e 100644
--- a/app/assets/scss/app-ie8.scss
+++ b/app/assets/scss/app-ie8.scss
@@ -1,6 +1,2 @@
-// If you want to display the currently active breakpoint in the top
-// right corner of your site during development, add the breakpoints
-// to this list, ordered by width, e.g. (mobile, tablet, desktop).
-$mq-show-breakpoints: (desktop);
 @import "../../../src/all-ie8";
 @import "partials/app";
diff --git a/app/assets/scss/app.scss b/app/assets/scss/app.scss
index d5b68abf58..2954948360 100644
--- a/app/assets/scss/app.scss
+++ b/app/assets/scss/app.scss
@@ -1,6 +1,4 @@
-// If you want to display the currently active breakpoint in the top
-// right corner of your site during development, add the breakpoints
-// to this list, ordered by width, e.g. (mobile, tablet, desktop).
-$mq-show-breakpoints: (mobile, tablet, desktop);
+$govuk-show-breakpoints: true;
+
 @import "../../../src/all";
 @import "partials/app";
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 71722a50c3..689016f7ce 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -4,6 +4,11 @@
 
 @include govuk-exports("govuk/component/button") {
 
+  $govuk-button-colour: #00823b;
+  $govuk-button-hover-colour: darken($govuk-button-colour, 5%);
+  $govuk-button-shadow-colour: darken($govuk-button-colour, 15%);
+  $govuk-button-text-colour: $govuk-white;
+
   // Because the shadow (s0) is visually 'part of' the button, we need to reduce
   // the height of the button to compensate by adjusting its padding (s1) and
   // increase the bottom margin to include it (s2).
diff --git a/src/helpers/_media-queries.scss b/src/helpers/_media-queries.scss
index 90bff65ad1..edf7fc4845 100644
--- a/src/helpers/_media-queries.scss
+++ b/src/helpers/_media-queries.scss
@@ -1,4 +1,23 @@
-// We use sass-mq module for media queries
+// Import sass-mq as a helper for media queries
+
+// Pass our breakpoints and static breakpoint definitions through to sass-mq.
+$mq-breakpoints: if(variable-exists(govuk-breakpoints), $govuk-breakpoints, ());
+$mq-static-breakpoint: if(variable-exists(govuk-ie8-breakpoint), $govuk-ie8-breakpoint, desktop);
+
+$mq-show-breakpoints: ();
+
+@if (variable-exists(govuk-show-breakpoints) and $govuk-show-breakpoints) {
+  $mq-show-breakpoints: map-keys($govuk-breakpoints);
+}
+
+// When building a stylesheet for IE8, set $mq-responsive to false in order to
+// 'rasterize' any media queries.
+
+@if (variable-exists(govuk-is-ie8) and $govuk-is-ie8) {
+  $mq-responsive: false;
+} @else {
+  $mq-responsive: true;
+}
 
 // This is a horrible, horrible hack to prevent the 'dev mode' CSS to display
 // the current breakpoint from being included multiple times.
diff --git a/src/helpers/_typography.scss b/src/helpers/_typography.scss
index ad02c2e1c9..aabf1f7b61 100644
--- a/src/helpers/_typography.scss
+++ b/src/helpers/_typography.scss
@@ -3,18 +3,18 @@
 // Sets the font family and associated properties, such as font smoothing. Also
 // overrides the font for print.
 
-@mixin govuk-typography-common($font-family: $govuk-font-stack) {
+@mixin govuk-typography-common($font-family: $govuk-font-family) {
   font-family: $font-family;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
   // If using NTA, include the font-face definition
-  @if ($govuk-font-stack == $govuk-nta-light) {
+  @if ($govuk-font-family == $govuk-font-family-nta) {
     @include govuk-font-face-nta;
   }
 
   @include mq($media-type: print) {
-    font-family: $govuk-font-stack-print;
+    font-family: $govuk-font-family-print;
   }
 }
 
@@ -215,7 +215,7 @@
 // Regular weights, tabular numbers
 
 @mixin govuk-font-regular-tabular {
-  @include govuk-typography-common($font-family: $govuk-nta-light-tabular);
+  @include govuk-typography-common($font-family: $govuk-font-family-tabular);
   @include govuk-typography-weight-regular;
 }
 
@@ -262,7 +262,7 @@
 // Bold weights, tabular numbers
 
 @mixin govuk-font-bold-tabular {
-  @include govuk-typography-common($font-family: $govuk-nta-light-tabular);
+  @include govuk-typography-common($font-family: $govuk-font-family-tabular);
   @include govuk-typography-weight-bold;
 }
 
diff --git a/src/helpers/grid.test.js b/src/helpers/grid.test.js
index ae111b3bdb..a88ab5e2fc 100644
--- a/src/helpers/grid.test.js
+++ b/src/helpers/grid.test.js
@@ -14,11 +14,15 @@ const sassConfig = {
 }
 describe('grid system', () => {
   const sassImports = `
-    @import "tools/exports";
+    @import "settings/ie8";
+    @import "settings/media-queries";
     @import "settings/spacing";
     @import "settings/measurements";
+
     @import "helpers/grid";
     @import "helpers/media-queries";
+
+    @import "tools/exports";
   `
   describe('grid-width function', () => {
     it('outputs the specified key value from the map of widths', async () => {
@@ -115,7 +119,7 @@ describe('grid system', () => {
           box-sizing: border-box;
           width: 100%;
           padding: 0 15px; }
-          @media (min-width: 46.25em) {
+          @media (min-width: 40.0625em) {
             .govuk-grid-column-full {
               width: 100%;
               float: left; } }`)
@@ -137,7 +141,7 @@ describe('grid system', () => {
           box-sizing: border-box;
           width: 100%;
           padding: 0 15px; }
-          @media (min-width: 46.25em) {
+          @media (min-width: 40.0625em) {
             .govuk-grid-column-two-thirds {
               width: 66.6666%;
               float: left; } }
@@ -148,7 +152,7 @@ describe('grid system', () => {
       const sass = `
         ${sassImports}
 
-        @include govuk-grid-column(three-quarters, $class:'large-columnumn');
+        @include govuk-grid-column(three-quarters, $class:'large-column');
       `
       const results = await sassRender({ data: sass, ...sassConfig })
 
@@ -156,12 +160,12 @@ describe('grid system', () => {
         .toString()
         .trim())
         .toBe(outdent`
-        .large-columnumn-three-quarters {
+        .large-column-three-quarters {
           box-sizing: border-box;
           width: 100%;
           padding: 0 15px; }
-          @media (min-width: 46.25em) {
-            .large-columnumn-three-quarters {
+          @media (min-width: 40.0625em) {
+            .large-column-three-quarters {
               width: 75%;
               float: left; } }
         `)
@@ -182,7 +186,7 @@ describe('grid system', () => {
         .govuk-grid-column-one-quarter {
           box-sizing: border-box;
           padding: 0 15px; }
-          @media (min-width: 61.25em) {
+          @media (min-width: 48.0625em) {
             .govuk-grid-column-one-quarter {
               width: 25%;
               float: left; } }
@@ -227,7 +231,7 @@ describe('grid system', () => {
           box-sizing: border-box;
           width: 100%;
           padding: 0 15px; }
-          @media (min-width: 46.25em) {
+          @media (min-width: 40.0625em) {
             .govuk-grid-column-one-half {
               width: 50%;
               float: right; } }
diff --git a/src/helpers/spacing.test.js b/src/helpers/spacing.test.js
index 41a941d0c7..95a8e13ead 100644
--- a/src/helpers/spacing.test.js
+++ b/src/helpers/spacing.test.js
@@ -14,7 +14,10 @@ const sassConfig = {
 }
 
 const sassBootstrap = `
-  $mq-breakpoints: (
+  @import "settings/media-queries";
+  @import "settings/ie8";
+
+  $govuk-breakpoints: (
     my_breakpoint: 30em
   );
 
diff --git a/src/helpers/typography.test.js b/src/helpers/typography.test.js
index 8fff535fe4..350a6f319d 100644
--- a/src/helpers/typography.test.js
+++ b/src/helpers/typography.test.js
@@ -14,7 +14,10 @@ const sassConfig = {
 }
 
 const sassBootstrap = `
-  $mq-breakpoints: (
+  @import "settings/media-queries";
+  @import "settings/ie8";
+
+  $govuk-breakpoints: (
     my_breakpoint: 30em
   );
 
diff --git a/src/settings/_all.scss b/src/settings/_all.scss
index 71170754d9..8bde28e9ed 100644
--- a/src/settings/_all.scss
+++ b/src/settings/_all.scss
@@ -16,6 +16,6 @@
 @import "spacing";
 @import "measurements";
 
-@import "typography-font-stacks";
+@import "typography-font-families";
 @import "typography-font";
 @import "typography-responsive";
diff --git a/src/settings/_assets.scss b/src/settings/_assets.scss
index c937f7a36b..43a5b139f0 100644
--- a/src/settings/_assets.scss
+++ b/src/settings/_assets.scss
@@ -1,3 +1,7 @@
+////
+/// @group settings/assets
+////
+
 /// Path to the assets directory, with trailing slash.
 ///
 /// This is the directory where the images and fonts subdirectories live. You
@@ -5,18 +9,21 @@
 /// README for details.
 ///
 /// @type String
+/// @access public
 
 $govuk-assets-path: "/assets/" !default;
 
 /// Path to the images folder, with trailing slash.
 ///
 /// @type String
+/// @access public
 
 $govuk-images-path: "#{$govuk-assets-path}images/" !default;
 
 /// Path to the fonts folder, with trailing slash.
 ///
 /// @type String
+/// @access public
 
 $govuk-fonts-path: "#{$govuk-assets-path}fonts/" !default;
 
@@ -37,10 +44,13 @@ $govuk-fonts-path: "#{$govuk-assets-path}fonts/" !default;
 /// @example scss - Custom asset handling
 ///
 ///   @function my-url-handler($filename) {
-///     @return ''; // Some custom URL handling
+///     // Some custom URL handling
+///     @return url('example.jpg');
 ///   }
 ///
 ///   $govuk-image-url-function: 'my-url-handler';
+///
+/// @access public
 
 $govuk-image-url-function: false !default;
 
@@ -61,9 +71,12 @@ $govuk-image-url-function: false !default;
 /// @example scss - Custom asset handling
 ///
 ///   @function my-url-handler($filename) {
-///     @return ''; // Some custom URL handling
+///     // Some custom URL handling
+///     @return url('example.woff');
 ///   }
 ///
 ///   $govuk-font-url-function: 'my-url-handler';
+///
+/// @access public
 
 $govuk-font-url-function: false !default;
diff --git a/src/settings/_colours-applied.scss b/src/settings/_colours-applied.scss
index ccedb0a286..df14e8d804 100644
--- a/src/settings/_colours-applied.scss
+++ b/src/settings/_colours-applied.scss
@@ -1,59 +1,120 @@
-// Text colour
+////
+/// @group settings/colours
+////
 
-$govuk-text-colour: $govuk-black;
 
-// Canvas background colour
-// Used by the footer component and template to give the illusion of a long footer.
-$govuk-canvas-background-colour: $govuk-grey-3;
 
-// Body background colour
-$govuk-body-background-colour: $govuk-white;
+// =========================================================
+// Generic
+// =========================================================
 
-// Text colour for print media
-//
-// Use 'true black' to avoid printers using colour ink to print body text
+/// Text colour
+///
+/// @type Colour
+/// @access public
 
-$govuk-print-text-colour: #000000;
+$govuk-text-colour: $govuk-black !default;
 
-// Secondary text colour
-//
-// Used for 'muted' text, help text, etc.
+/// Canvas background colour
+///
+/// Used by the footer component and template to give the illusion of a long footer.
+///
+/// @type Colour
+/// @access public
 
-$govuk-secondary-text-colour: $govuk-grey-1;
+$govuk-canvas-background-colour: $govuk-grey-3 !default;
 
-// Links
+/// Body background colour
+///
+/// @type Colour
+/// @access public
+
+$govuk-body-background-colour: $govuk-white !default;
+
+/// Text colour for print media
+///
+/// Use 'true black' to avoid printers using colour ink to print body text
+///
+/// @type Colour
+/// @access public
+
+$govuk-print-text-colour: #000000 !default;
+
+/// Secondary text colour
+///
+/// Used for 'muted' text, help text, etc.
+///
+/// @type Colour
+/// @access public
+
+$govuk-secondary-text-colour: $govuk-grey-1 !default;
+
+/// Focus colour
+///
+/// Used for outline (and background, where appropriate) when interactive
+/// elements (links, form controls) have keyboard focus.
+///
+/// @type Colour
+/// @access public
 
-$govuk-link-colour: $govuk-blue;
-$govuk-link-visited-colour: #4c2c92;
-$govuk-link-hover-colour: $govuk-light-blue;
-$govuk-link-active-colour: $govuk-light-blue;
+$govuk-focus-colour: $govuk-yellow !default;
 
-// Focus colour
-//
-// Used for outline (and background, where appropriate) when interactive
-// elements (links, form controls) have keyboard focus.
+/// Error colour
+///
+/// Used to highlight error messages and form controls in an error state
+///
+/// @type Colour
+/// @access public
+$govuk-error-colour: $govuk-red !default;
 
-$govuk-focus-colour: $govuk-yellow;
+/// Border colour
+///
+/// Used for borders, separators, rules, keylines etc.
+///
+/// @type Colour
+/// @access public
+
+$govuk-border-colour: $govuk-grey-2 !default;
+
+/// Input border colour
+///
+/// Used for form inputs and controls
+///
+/// @type Colour
+/// @access public
+
+$govuk-input-border-colour: $govuk-black !default;
+
+
+
+// =============================================================================
+// Links
+// =============================================================================
 
-// Error colour
-//
-// Used to highlight error messages and form controls in an error state
+/// Link colour
+///
+/// @type Colour
+/// @access public
 
-$govuk-error-colour: $govuk-red;
+$govuk-link-colour: $govuk-blue !default;
 
-// Border colour
-//
-// Used for borders, separators, rules, keylines etc.
+/// Visited link colour
+///
+/// @type Colour
+/// @access public
 
-$govuk-border-colour: $govuk-grey-2;
+$govuk-link-visited-colour: #4c2c92 !default;
 
-// Used for form inputs and controls
+/// Link hover colour
+///
+/// @type Colour
+/// @access public
 
-$govuk-input-border-colour: $govuk-black;
+$govuk-link-hover-colour: $govuk-light-blue !default;
 
-// Buttons
+/// Active link colour
+///
+/// @type Colour
+/// @access public
 
-$govuk-button-colour: #00823b;
-$govuk-button-hover-colour: darken($govuk-button-colour, 5%);
-$govuk-button-shadow-colour: darken($govuk-button-colour, 15%);
-$govuk-button-text-colour: $govuk-white;
+$govuk-link-active-colour: $govuk-light-blue !default;
diff --git a/src/settings/_compatibility.scss b/src/settings/_compatibility.scss
index 12bc4c4151..f8cc1c8e22 100644
--- a/src/settings/_compatibility.scss
+++ b/src/settings/_compatibility.scss
@@ -1,33 +1,50 @@
-// We default these settings to true so that if they are missed we opt for a
-// mild performance hit over a potential broken experience for the end-user.
+////
+/// Compatibility with legacy repos (govuk_elements, govuk_frontend_tookkit and
+/// govuk_template) settings
+///
+/// We default these settings to `true` so that if they are missed we opt for a
+/// mild performance hit over a potential broken experience for the end-user.
+///
+/// @group settings/compatibility
+////
+
 
 /// Compatibility Mode: alphagov/govuk_frontend_toolkit
 ///
-/// @type Boolean True if used in a project that also includes
-///               alphagov/govuk_frontend_toolkit.
+/// True if used in a project that also includes alphagov/govuk_frontend_toolkit.
+///
+/// @type Boolean
+/// @access public
 
 $govuk-compatibility-govukfrontendtoolkit: true !default;
 
 /// Compatibility Mode: alphagov/govuk_template
 ///
-/// @type Boolean True if used in a project that also includes
-///               alphagov/govuk_template
+/// True if used in a project that also includes alphagov/govuk_template.
+///
+/// @type Boolean
+/// @access public
 
 $govuk-compatibility-govuktemplate: true !default;
 
 /// Compatibility Mode: alphagov/govuk_elements
 ///
-/// @type Boolean True if used in a project that also includes
-///               alphagov/govuk_elements
+/// True if used in a project that also includes alphagov/govuk_elements.
+///
+/// @type Boolean
+/// @access public
 
 $govuk-compatibility-govukelements: true !default;
 
 /// Compatibility Product Map
 ///
-/// @type Map Map of product names to their settings that we can use to lookup
-///           states from within the `@govuk-compatibility` mixin.
+/// Maps product names to their settings that we can use to lookup states from
+/// within the `@govuk-compatibility` mixin.
+///
+/// @type Map
+/// @access private
 
-$govuk-compatibility: (
+$_govuk-compatibility: (
   govuk_frontend_toolkit: $govuk-compatibility-govukfrontendtoolkit,
   govuk_template: $govuk-compatibility-govuktemplate,
   govuk_elements: $govuk-compatibility-govukelements,
diff --git a/src/settings/_global-styles.scss b/src/settings/_global-styles.scss
index e5be624abf..d356129e8e 100644
--- a/src/settings/_global-styles.scss
+++ b/src/settings/_global-styles.scss
@@ -1,3 +1,13 @@
-// set to include optional globals styles 
+////
+/// @group settings/global-styles
+////
+
+/// Include 'global' styles
+///
+/// Whether to style paragraphs (`<p>`) and links (`<a>`) without explicitly
+/// having to apply the `govuk-body` and `govuk-link` classes.
+///
+/// @type Boolean
+/// @access public
 
 $govuk-global-styles: false !default;
diff --git a/src/settings/_ie8.scss b/src/settings/_ie8.scss
index 3c0d0aafed..2098da72e6 100644
--- a/src/settings/_ie8.scss
+++ b/src/settings/_ie8.scss
@@ -1,4 +1,18 @@
-// Whether the stylesheet being built is targeting Internet Explorer 8. Used by
-// the ie8 mixin tools and in other settings.
-// @type Bool
+////
+/// @group settings/ie8
+////
+
+/// Whether the stylesheet being built is targeting Internet Explorer 8.
+///
+/// @type Boolean
+/// @access public
+
 $govuk-is-ie8: false !default;
+
+/// The name of the breakpoint to use as the target when rasterizing media
+/// queries
+///
+/// @type String
+/// @access public
+
+$govuk-ie8-breakpoint: desktop !default;
diff --git a/src/settings/_measurements.scss b/src/settings/_measurements.scss
index f76ccc35c8..7e2d3413b5 100644
--- a/src/settings/_measurements.scss
+++ b/src/settings/_measurements.scss
@@ -1,17 +1,85 @@
-// Site width and grid gutters
-$govuk-page-width: 960px;
+////
+/// @group settings/measurements
+////
+
+
+
+// =========================================================
+// Page layout
+// =========================================================
+
+/// Width of main container
+///
+/// @type Number
+/// @access public
+
+$govuk-page-width: 960px !default;
+
+/// Width of gutter between grid columns
+///
+/// @type Number
+/// @access public
+
+$govuk-gutter: $govuk-spacing-scale-6 !default;
+
+/// Width of half the gutter between grid columns
+///
+/// @type Number
+/// @access public
 
-$govuk-gutter: $govuk-spacing-scale-6;
 $govuk-gutter-half: $govuk-gutter / 2;
 
-// Border widths
-$govuk-border-width: 5px;
-$govuk-border-width-wide: 10px;
 
-$govuk-border-width-mobile: 4px;
-$govuk-border-width-form-element: 2px;
-$govuk-border-width-form-element-error: 4px;
-$govuk-border-width-form-group-error: $govuk-border-width;
 
-// Focus
-$govuk-focus-width: 3px;
+// =========================================================
+// Borders
+// =========================================================
+
+/// Standard border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width: 5px !default;
+
+/// Wide border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-wide: 10px !default;
+
+/// Border width on mobile
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-mobile: 4px !default;
+
+/// Form control border width
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-form-element: 2px !default;
+
+/// Form control border width when in error state
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-form-element-error: 4px !default;
+
+/// Form group border width when in error state
+///
+/// @type Number
+/// @access public
+
+$govuk-border-width-form-group-error: $govuk-border-width !default;
+
+/// Border width of focus outline
+///
+/// @type Number
+/// @access public
+
+$govuk-focus-width: 3px !default;
diff --git a/src/settings/_media-queries.scss b/src/settings/_media-queries.scss
index e34384d8a1..20ddca8606 100644
--- a/src/settings/_media-queries.scss
+++ b/src/settings/_media-queries.scss
@@ -1,60 +1,23 @@
-// Media query helpers using sass-mq
-// https://github.com/sass-mq/sass-mq
+////
+/// @group settings/media-queries
+////
 
-// mq() takes up to three optional parameters:
-// $from: inclusive min-width boundary
-// $until: exclusive max-width boundary
-// $and: additional custom directives
-// $media-type: $mq-media-type // defaults to 'all'
+/// Breakpoint definitions
+///
+/// @type Map
+/// @access public
 
-// Write css mobile-first, overriding mobile styles for tablet and desktop
-//
-// .govuk-component {
-//    // Apply styling to mobile and upwards
-//    @include mq($from: mobile) {
-//        color: red;
-//    }
-//    // Apply styling up to devices smaller than tablets (exclude tablets)
-//    @include mq($until: tablet) {
-//        color: blue;
-//    }
-//    // Same thing, in landscape orientation
-//    @include mq($until: tablet, $and: '(orientation: landscape)') {
-//        color: hotpink;
-//    }
-//    // Apply styling to tablets up to desktop (exclude desktop)
-//    @include mq(tablet, desktop) {
-//        color: green;
-//    }
-//    // Print only styling
-//    @include mq($media-type: print) {
-//        display: none;
-//    }
-// }
-
-
-// To enable support for browsers that do not support @media queries,
-// (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
-// Create a separate stylesheet served exclusively to these browsers,
-// meaning @media queries will be rasterized, relying on the cascade itself
-@if ($govuk-is-ie8) {
-  $mq-responsive: false;
-} @else {
-  $mq-responsive: true;
-}
-
-// Name your breakpoints in a way that creates a ubiquitous language
-// across team members. It will improve communication between
-// stakeholders, designers, developers, and testers.
-$mq-breakpoints: (
+$govuk-breakpoints: (
   mobile:  320px,
-  // Support max-width value from FET ?
-  // mobile: 640px,
   tablet:  641px,
   desktop: 769px
-);
+) !default;
+
+/// Show active breakpoint in top-right corner.
+///
+/// Only use this during local development.
+///
+/// @type Boolean
+/// @access public
 
-// Define the breakpoint from the $mq-breakpoints list that should
-// be used as the target width when outputting a static stylesheet
-// (i.e. when $mq-responsive is set to 'false').
-$mq-static-breakpoint: desktop;
+$govuk-show-breakpoints: false !default;
diff --git a/src/settings/_typography-font-families.scss b/src/settings/_typography-font-families.scss
new file mode 100644
index 0000000000..2b58323dc2
--- /dev/null
+++ b/src/settings/_typography-font-families.scss
@@ -0,0 +1,22 @@
+////
+/// @group settings/typography
+////
+
+/// List of font families to use if using NTA (the default font 'stack' for
+/// GOV.UK)
+///
+/// @type List
+/// @access public
+
+$govuk-font-family-nta: "nta", Arial, sans-serif;
+
+/// List of font families to use if using the 'tabular numbers' subset of NTA
+/// (the default font 'stack' for GOV.UK)
+///
+/// Because ntatabularnumbers only includes the digits 0-10, all other glyphs
+/// will 'fall-through' the stack to NTA.
+///
+/// @type List
+/// @access public
+
+$govuk-font-family-nta-tabular: "ntatabularnumbers", $govuk-font-family-nta;
diff --git a/src/settings/_typography-font-stacks.scss b/src/settings/_typography-font-stacks.scss
deleted file mode 100644
index 59c6bd1d69..0000000000
--- a/src/settings/_typography-font-stacks.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// Fonts
-
-// New Transport Light font family
-$govuk-nta-light: "nta", Arial, sans-serif;
-$govuk-nta-light-tabular: "ntatabularnumbers", $govuk-nta-light;
diff --git a/src/settings/_typography-font.scss b/src/settings/_typography-font.scss
index e2858a7c2b..bc251304f0 100644
--- a/src/settings/_typography-font.scss
+++ b/src/settings/_typography-font.scss
@@ -1,8 +1,48 @@
-// Allow font stack to be overridden
-$govuk-font-stack: $govuk-nta-light !default;
-$govuk-font-stack-tabular: $govuk-nta-light-tabular !default;
-$govuk-font-stack-print: sans-serif !default;
+////
+/// @group settings/typography
+////
 
+
+
+// =========================================================
+// Font families
+// =========================================================
+
+/// Font families to use for all typography on screen media
+///
+/// @type List
+/// @access public
+
+$govuk-font-family: $govuk-font-family-nta !default;
+
+/// Font families to use when displaying tabular numbers
+///
+/// @type List
+/// @access public
+
+$govuk-font-family-tabular: $govuk-font-family-nta-tabular !default;
+
+/// Font families to use for print media
+///
+/// @type List
+/// @access public
+
+$govuk-font-family-print: sans-serif !default;
+
+
+
+// =========================================================
 // Font weights
-$govuk-font-weight-regular: 400;
-$govuk-font-weight-bold: 700;
+// =========================================================
+
+/// Font weight for regular typography
+///
+/// @type Number
+/// @access public
+$govuk-font-weight-regular: 400 !default;
+
+/// Font weight for bold typography
+///
+/// @type Number
+/// @access public
+$govuk-font-weight-bold: 700 !default;
diff --git a/src/tools/_compatibility.scss b/src/tools/_compatibility.scss
index 5f842c2c8b..91da7eed76 100644
--- a/src/tools/_compatibility.scss
+++ b/src/tools/_compatibility.scss
@@ -20,8 +20,8 @@
 /// @throw If product name is not recognised
 
 @mixin govuk-compatibility($product) {
-  @if map-has-key($govuk-compatibility, $product) {
-    @if map-get($govuk-compatibility, $product) == true {
+  @if map-has-key($_govuk-compatibility, $product) {
+    @if map-get($_govuk-compatibility, $product) == true {
       @content;
     }
   } @else {
diff --git a/src/tools/compatibility.test.js b/src/tools/compatibility.test.js
index eab0aad324..1ad39accbb 100644
--- a/src/tools/compatibility.test.js
+++ b/src/tools/compatibility.test.js
@@ -15,7 +15,7 @@ const sassConfig = {
 describe('@mixin govuk-compatibility', () => {
   it('does not output if the app is not marked as included', async () => {
     const sass = `
-      $govuk-compatibility: (existing_app: false);
+      $_govuk-compatibility: (existing_app: false);
 
       @import "tools/compatibility";
 
@@ -32,7 +32,7 @@ describe('@mixin govuk-compatibility', () => {
 
   it('outputs if the app is not marked as included', async () => {
     const sass = `
-      $govuk-compatibility: (existing_app: true);
+      $_govuk-compatibility: (existing_app: true);
 
       @import "tools/compatibility";
 
@@ -49,7 +49,7 @@ describe('@mixin govuk-compatibility', () => {
 
   it('throws an exception if the app is not recognised', async () => {
     const sass = `
-      $govuk-compatibility: (existing_app: true);
+      $_govuk-compatibility: (existing_app: true);
 
       @import "tools/compatibility";
 
diff --git a/tasks/gulp/sassdoc.js b/tasks/gulp/sassdoc.js
index e11bb0d465..116d7f8bfb 100644
--- a/tasks/gulp/sassdoc.js
+++ b/tasks/gulp/sassdoc.js
@@ -1,14 +1,21 @@
 const sassdoc = require('sassdoc')
 const gulp = require('gulp')
 const paths = require('../../config/paths.json')
-const debug = require('gulp-debug')
 
 gulp.task('sassdoc', function () {
   return gulp.src([paths.src + '**/**/*.scss', `!${paths.src}/vendor/*`])
-    .pipe(debug())
     .pipe(sassdoc({
       dest: paths.sassdoc,
       groups: {
+        'settings/assets': 'Settings / Assets',
+        'settings/colours': 'Settings / Colours',
+        'settings/compatibility': 'Settings / Compatibility',
+        'settings/global-styles': 'Settings / Global Styles',
+        'settings/ie8': 'Settings / IE8',
+        'settings/measurements': 'Settings / Measurements',
+        'settings/media-queries': 'Settings / Media Queries',
+        'settings/spacing': 'Settings / Spacing',
+        'settings/typography': 'Settings / Typography',
         tools: 'Tools',
         helpers: 'Helpers',
         overrides: 'Overrides'