diff --git a/.storybook/preview.js b/.storybook/preview.js
index b9d4325a..a61f075f 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -50,6 +50,8 @@ export const parameters = {
         ['Intro', '*'],
         'SCSS',
         ['Intro', '*'],
+        'Typography',
+        ['Intro', '*'],
         'Actions',
         ['Intro', '*'],
         'Contributing',
diff --git a/src/docs/typography/intro.stories.mdx b/src/docs/typography/intro.stories.mdx
new file mode 100644
index 00000000..bb36c3e9
--- /dev/null
+++ b/src/docs/typography/intro.stories.mdx
@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+import Typeset from './typeset.png';
+import TypeGuides from './type-guides.png'
+
+<Meta title="Typography/Intro" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Typography
+
+Our design system includes a typographic scale based on the scale of fifths to create six harmonic levels of font sizes. These will guide the basic sizing of headlines, body text and spacing in a graphics page. 
+
+The typographic scale is set using the CSS variable in the theme component. You can customise them if you need a bespoke typesetting for your project.
+
+## The type system
+
+<img
+  className="feature"
+  src={Typeset}
+  width="100%"
+  style={{ margin: '3rem 0' }}
+/>
+
+<img
+  className="feature"
+  src={TypeGuides}
+  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/docs/typography/type-guides.png b/src/docs/typography/type-guides.png
new file mode 100644
index 00000000..236cc7d7
Binary files /dev/null and b/src/docs/typography/type-guides.png differ
diff --git a/src/docs/typography/typeset.png b/src/docs/typography/typeset.png
new file mode 100644
index 00000000..e7cd98bc
Binary files /dev/null and b/src/docs/typography/typeset.png differ
diff --git a/src/docs/typography/using-styles.stories.mdx b/src/docs/typography/using-styles.stories.mdx
new file mode 100644
index 00000000..1c2a127f
--- /dev/null
+++ b/src/docs/typography/using-styles.stories.mdx
@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+
+
+<Meta title="Typography/Using text styles" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Applying typographic styles
+
+In your projects, you will use the typographic as per the function –
+- Page title, subheads and section titles
+- Body copy
+- Graphic descriptions, captions and other notes
\ No newline at end of file