diff --git a/src/components/Theme/themes/dark.js b/src/components/Theme/themes/dark.js
index 5483b0c3..8c304dd5 100644
--- a/src/components/Theme/themes/dark.js
+++ b/src/components/Theme/themes/dark.js
@@ -2,7 +2,7 @@
 export default {
   scale: {
     'size-base': 1.375,
-    'size-base-mobile': 1.25,
+    'size-base-mobile': 1.125,
     'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)',
     'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)',
     'size-3': 'calc(var(--theme-scale-size-base) * 1rem)',
diff --git a/src/docs/typography/demo.png b/src/docs/typography/demo.png
new file mode 100644
index 00000000..4c33e4a8
Binary files /dev/null and b/src/docs/typography/demo.png differ
diff --git a/src/docs/typography/docs/face.md b/src/docs/typography/docs/face.md
index aeef00cd..602131b7 100644
--- a/src/docs/typography/docs/face.md
+++ b/src/docs/typography/docs/face.md
@@ -1,5 +1,16 @@
 There are four font families provided via the `Theme`, which feeds into all the text styles. If you need to specifically apply font family styles to your HTML elements, you can use the following methods.
 
+<br />
+
+**These are the available font family types and their corresponding tokens.**
+
+| typeface        | class                  | mixin                 |
+| --------------- | ---------------------- | --------------------- |
+| Display font    | `.typeface-display`    | `typeface-display`    |
+| Serif font      | `.typeface-serif`      | `typeface-serif`      |
+| Sans-serif font | `.typeface-sans-serif` | `typeface-sans-serif` |
+| Monospace font  | `.typeface-monospace`  | `typeface-monospace`  |
+
 ## With CSS classes
 
 Add the `typeface-` class to any element for the classes to take effect. Check out the available classes and their associated sizes in the example below.
@@ -23,3 +34,5 @@ Include the mixins in your stylesheets as shown below.
   }
 </style>
 ```
+
+## See the typefaces in action
diff --git a/src/docs/typography/docs/size.md b/src/docs/typography/docs/size.md
index 369fdef1..d7bb0ab9 100644
--- a/src/docs/typography/docs/size.md
+++ b/src/docs/typography/docs/size.md
@@ -6,6 +6,22 @@ You may need to use the sizes from this scale in situations like -
 - Sizing chart elemnents in D3
 - Defining bespoke style beyond what is provided by the `text-styles`
 
+<br />
+
+**These are the available text size levels and their corresponding tokens.**
+
+| level | class          | mixin         |
+| ----- | -------------- | ------------- |
+| 1     | `.font-size-1` | `font-size-1` |
+| 2     | `.font-size-2` | `font-size-2` |
+| 3     | `.font-size-3` | `font-size-3` |
+| 4     | `.font-size-4` | `font-size-4` |
+| 5     | `.font-size-5` | `font-size-5` |
+| 6     | `.font-size-6` | `font-size-6` |
+
+> The text sizes are always a multiple of `size-base = 1.375`. On mobile
+> {max-width:510px}, levels 1, 2, 3, 4 scale down to `size-base-mobile = 1.125`
+
 ## With CSS classes
 
 Add the `font-size-*` class to any element for the classes to take effect, where `*` = 1 to 6. Check out the available classes and their associated sizes in the example below.
@@ -29,3 +45,5 @@ Include the mixins in your stylesheets as shown below.
   }
 </style>
 ```
+
+## See the text size levels in action
diff --git a/src/docs/typography/docs/style.md b/src/docs/typography/docs/style.md
index 0442231d..ed61ebd0 100644
--- a/src/docs/typography/docs/style.md
+++ b/src/docs/typography/docs/style.md
@@ -7,17 +7,34 @@ The styles are automatically applied to native HTML elements like the `H` and `p
 </div>
 ```
 
-## With CSS classes
+**These are the available styles and their corresponding tokens.**
 
-Add the `font-` class to any element for the classes to take effect. Check out the available classes and their associated styles in the example below.
+| Style         | class            | mixin           |
+| ------------- | ---------------- | --------------- |
+| Page title    | `.font-hed `     | `font-hed `     |
+| Section title | `.font-subhed-1` | `font-subhed-1` |
+| Subhed        | `.font-subhed-2` | `font-subhed-2` |
+| Smallhed      | `.font-subhed-3` | `font-subhed-3` |
+| Body text     | `.font-body `    | `font-body`     |
+| Body note     | `.font-note-1`   | `font-note-1`   |
+| Endnotes      | `.font-note-2`   | `font-note-2`   |
+| Footnotes     | `.font-note-3`   | `font-note-3`   |
+
+## Styling with with CSS classes
+
+> This is the most common way you probably will add styles inside your svelte components in the HTML code.
+
+Add the `font-` class to any element for the classes to take effect.
 
 ```svelte
-<div class="font-body">...your text here</div>
+<!-- Text using body font style --><div class="font-body">your text here</div>
 ```
 
-## With SCSS mixins
+## Styling with with SCSS mixins
 
-Include the mixins in your stylesheets as shown below.
+> This is useful when you need to compose styles for elements using your own classes.
+
+Include the mixins in your SCSS code block as shown below.
 
 ```svelte
 <div class="my-class">...your text here</div>
@@ -30,3 +47,7 @@ Include the mixins in your stylesheets as shown below.
   }
 </style>
 ```
+
+## See the styles in action
+
+Select a style from the menu in the `control` column and see it added to the text.
diff --git a/src/docs/typography/intro.stories.mdx b/src/docs/typography/intro.stories.mdx
index d94ee936..18b453de 100644
--- a/src/docs/typography/intro.stories.mdx
+++ b/src/docs/typography/intro.stories.mdx
@@ -3,6 +3,7 @@ import { parameters } from '$docs/utils/docsPage.js';
 
 import Typeset from './typeset.png';
 import TypeGuides from './type-guides.png'
+import DemoImg from './demo.png';
 
 <Meta title="Typography/Intro" parameters={{ ...parameters }} />
 
@@ -43,6 +44,13 @@ The styles are also applied to native HTML elements like the `H` and `p` tags.
 
 > For Graphics Kit users, the typographic styles are already imported and applied to the individual components. So, if you want to customise them, check the next `Customising text styles`  section.
 
+<img
+  className="feature"
+  src={DemoImg}
+  width="100%"
+  style={{ margin: '3rem 0' }}
+/>
+
 ## How it works
 
 Somthing about the base sizes and derived scale coupled with other styles
\ No newline at end of file
diff --git a/src/scss/typography/_mixins.scss b/src/scss/typography/_mixins.scss
index fbd93b5e..c1216a2c 100644
--- a/src/scss/typography/_mixins.scss
+++ b/src/scss/typography/_mixins.scss
@@ -57,6 +57,7 @@
   font-family: var(--theme-font-family-hed) #{$important};
   font-weight: 500 #{$important};
   line-height: 1.14 #{$important};
+  color: var(--theme-colour-text-primary) #{$important};
 }
 
 @mixin font-subhed-1($i: false) {
@@ -65,6 +66,7 @@
   font-family: var(--theme-font-family-subhed) #{$important};
   font-weight: 700 #{$important};
   line-height: 1.14 #{$important};
+  color: var(--theme-colour-text-primary) #{$important};
 }
 
 @mixin font-subhed-2($i: false) {
@@ -73,6 +75,7 @@
   font-family: var(--theme-font-family-subhed) #{$important};
   font-weight: 700 #{$important};
   line-height: 1.28 #{$important};
+  color: var(--theme-colour-text-primary) #{$important};
 }
 
 @mixin font-subhed-3($i: false) {
@@ -82,6 +85,7 @@
   font-weight: 500 #{$important};
   line-height: 1.4 #{$important};
   text-transform: uppercase #{$important};
+  color: var(--theme-colour-text-secondary) #{$important};
 }
 
 @mixin font-body($i: false) {
@@ -90,6 +94,7 @@
   font-family: var(--theme-font-family-body) #{$important};
   font-weight: 400 #{$important};
   line-height: 1.5 #{$important};
+  color: var(--theme-colour-text-primary) #{$important};
 }
 
 @mixin font-note-1($i: false) {
@@ -98,6 +103,7 @@
   font-family: var(--theme-font-family-note) #{$important};
   font-weight: 300 #{$important};
   line-height: 1.4 #{$important};
+  color: var(--theme-colour-text-primary) #{$important};
 }
 
 @mixin font-note-2($i: false) {
@@ -106,6 +112,7 @@
   font-family: var(--theme-font-family-note) #{$important};
   font-weight: 300 #{$important};
   line-height: 1.4 #{$important};
+  color: var(--theme-colour-text-secondary) #{$important};
 }
 
 @mixin font-note-3($i: false) {
@@ -114,4 +121,5 @@
   font-family: var(--theme-font-family-note) #{$important};
   font-weight: 400 #{$important};
   line-height: 1.4 #{$important};
+  color: var(--theme-colour-text-secondary) #{$important};
 }
diff --git a/src/scss/typography/_rules.scss b/src/scss/typography/_rules.scss
index 8c9b7d85..33b642b4 100644
--- a/src/scss/typography/_rules.scss
+++ b/src/scss/typography/_rules.scss
@@ -1,7 +1,19 @@
 /* RESPONSIVE SCALING */
 @media (max-width: 510px) {
   div.theme {
-    --theme-scale-size-base: var(--theme-scale-size-base-mobile);
+    // --theme-scale-size-base: var(--theme-scale-size-base-mobile) !important;
+    --theme-scale-size-1: calc(
+      var(--theme-scale-size-base-mobile) * 2.25rem
+    ) !important;
+    --theme-scale-size-2: calc(
+      var(--theme-scale-size-base-mobile) * 1.5rem
+    ) !important;
+    --theme-scale-size-3: calc(
+      var(--theme-scale-size-base-mobile) * 1rem
+    ) !important;
+    --theme-scale-size-4: calc(
+      var(--theme-scale-size-base-mobile) * 0.9rem
+    ) !important;
   }
 }