diff --git a/packages/react-component-library/package.json b/packages/react-component-library/package.json
index 242deb21d6..4cb8e8587d 100644
--- a/packages/react-component-library/package.json
+++ b/packages/react-component-library/package.json
@@ -182,7 +182,8 @@
     "react-select": "^4.1.0",
     "react-tether": "^2.0.7",
     "react-toast-notifications": "^2.4.0",
-    "react-transition-group": "^4.4.1"
+    "react-transition-group": "^4.4.1",
+    "styled-normalize": "^8.0.7"
   },
   "peerDependencies": {
     "styled-components": ">= 5"
diff --git a/packages/react-component-library/src/index.ts b/packages/react-component-library/src/index.ts
index d604d8162f..96085d3d17 100755
--- a/packages/react-component-library/src/index.ts
+++ b/packages/react-component-library/src/index.ts
@@ -1,6 +1,5 @@
-// Third party
 import { useToasts } from 'react-toast-notifications'
-import * as Icons from './icons' // deprecated
+import * as Icons from './icons' // Deprecated legacy icons
 
 export { Icons, useToasts }
 
@@ -10,6 +9,9 @@ export { Formik } from './components/Formik'
 // Enhancers
 export * from './enhancers'
 
+// Styled Components utility
+export * from './styled-components'
+
 // Components
 export * from './components/Alert'
 export * from './components/Avatar'
diff --git a/packages/react-component-library/src/styled-components/GlobalStyle.tsx b/packages/react-component-library/src/styled-components/GlobalStyle.tsx
new file mode 100644
index 0000000000..ddf041e4fb
--- /dev/null
+++ b/packages/react-component-library/src/styled-components/GlobalStyle.tsx
@@ -0,0 +1,115 @@
+import React, { createContext } from 'react'
+import { createGlobalStyle } from 'styled-components'
+import { Normalize } from 'styled-normalize'
+import { selectors, BreakpointSize } from '@royalnavy/design-tokens'
+import '@royalnavy/fonts'
+
+interface GlobalStyleContextDefaults {
+  theme?: string
+}
+
+interface GlobalStyleProviderProps {
+  children?: React.ReactNode
+  theme?: string
+}
+
+const breakpoints: BreakpointSize[] = ['s', 'xs', 'm', 'l', 'xl', 'xxl']
+
+const { mq, breakpoint, fontSize } = selectors
+
+/**
+ * Globally setting `border-box`
+ */
+const BoxSizing = createGlobalStyle`
+  html {
+    box-sizing: border-box;
+  }
+
+  * {
+    &,
+    &::before,
+    &::after {
+      box-sizing: border-box;
+    }
+  }
+`
+
+/**
+ * Generate base font size
+ */
+const Fonts = createGlobalStyle`
+  html {
+    font-family: "lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+    ${breakpoints
+      .map((bp) => {
+        return mq({ gte: bp })`
+          font-size: ${breakpoint(bp).baseFontSize};
+        `
+      })
+      .join('\n\n')}
+  }
+
+  h1,
+  .rn-h1 {
+    margin: 0;
+    font-size: ${fontSize('xxl')};
+  }
+
+  h2,
+  .rn-h2 {
+    margin: 0;
+    font-size: ${fontSize('xl')};
+  }
+
+  h3,
+  .rn-h3 {
+    margin: 0;
+    font-size: ${fontSize('l')};
+  }
+
+  h4,
+  .rn-h4 {
+    margin: 0;
+    font-size: ${fontSize('m')};
+  }
+
+  h5,
+  .rn-h5 {
+    margin: 0;
+    font-size: ${fontSize('base')};
+  }
+
+  h6,
+  .rn-h6 {
+    margin: 0;
+    font-size: ${fontSize('s')};
+  }
+
+  ol, ul, li,
+  p, .rn-p {
+    margin: 0;
+    font-size: ${fontSize('base')};
+    line-height: 1.5;
+  }
+`
+
+const globalStyleContextDefaults: GlobalStyleContextDefaults = {
+  theme: null,
+}
+
+export const GlobalStyleContext = createContext(globalStyleContextDefaults)
+
+export const GlobalStyleProvider: React.FC<GlobalStyleProviderProps> = ({
+  children,
+  theme = 'light',
+}) => {
+  return (
+    <GlobalStyleContext.Provider value={{ theme }}>
+      <Normalize />
+      <BoxSizing />
+      <Fonts />
+      {children}
+    </GlobalStyleContext.Provider>
+  )
+}
diff --git a/packages/react-component-library/src/styled-components/index.ts b/packages/react-component-library/src/styled-components/index.ts
index 114afe81bd..726ad4cc68 100644
--- a/packages/react-component-library/src/styled-components/index.ts
+++ b/packages/react-component-library/src/styled-components/index.ts
@@ -1 +1,2 @@
 export * from './input'
+export * from './GlobalStyle'
diff --git a/yarn.lock b/yarn.lock
index bb08744be9..8e3caebb71 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -22557,6 +22557,11 @@ styled-components@^5.2.0:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
+styled-normalize@^8.0.7:
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/styled-normalize/-/styled-normalize-8.0.7.tgz#e883bff6a0c59a65a39365a4eb9c6cf48372c61f"
+  integrity sha512-qQV4O7B9g7ZUnStCwGde7Dc/mcFF/pz0Ha/LL7+j/r6uopf6kJCmmR7jCPQMCBrDkYiQ4xvw1hUoceVJkdaMuQ==
+
 stylehacks@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.0.0.tgz#c49b0b2cf9917fe37dc030b96a4c34698b932933"