couple primary colour scales

.storybook/preview.ts

@@ -66,6 +66,11 @@ export const parameters = {
             '*',
           ],
           'Borders',
+          'Colours', [
+            'Primary',
+            'Thematic',
+            '*',
+          ]
         ],
         'Actions',
         ['Intro', '*'],

src/docs/styles/colours/primary.stories.mdx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
+import { extractCssColourVariables } from '../../utils/parseCss';
+
+{/* @ts-ignore */}
+import greyScheme from '$lib/scss/colours/primary/\_grey.scss?raw';
+
+{/* @ts-ignore */}
+import redScheme from '$lib/scss/colours/primary/\_red.scss?raw';
+
+{/* @ts-ignore */}
+import blueScheme from '$lib/scss/colours/primary/\_blue.scss?raw';
+
+<Meta title="Styles/Colours/Primary" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Primary colours
+
+<CopyColourTable
+  title="Grey"
+  header={['Colour', 'CSS variable']}
+  body={extractCssColourVariables(greyScheme)}
+  included
+  partial="primary/_grey.scss"
+/>
+
+<CopyColourTable
+  title="Red"
+  header={['Colour', 'CSS variable']}
+  body={extractCssColourVariables(redScheme)}
+  partial="primary/_red.scss"
+/>
+
+<CopyColourTable
+  title="Blue"
+  header={['Colour', 'CSS variable']}
+  body={extractCssColourVariables(blueScheme)}
+  partial="primary/_blue.scss"
+/>

src/docs/styles/colours/thematic.stories.mdx

@@ -3,9 +3,6 @@ import { parameters } from '$docs/utils/docsPage.js';
 import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
 import { extractCssColourVariables } from '../../utils/parseCss';
 
-{/* @ts-ignore */}
-import greyScheme from '$lib/scss/colours/thematic/\_grey.scss?raw';
-
 {/* @ts-ignore */}
 import trScheme from '$lib/scss/colours/thematic/\_tr.scss?raw';
 
@@ -16,17 +13,7 @@ import nordScheme from '$lib/scss/colours/thematic/\_nord.scss?raw';
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 
-# Colours
+# Thematic colours
-
-Several colour schemes are accessible through CSS variables in the tables below.
-
-<CopyColourTable
-  title="Grey"
-  header={['Colour', 'CSS variable']}
-  body={extractCssColourVariables(greyScheme)}
-  included
-  partial="thematic/_grey.scss"
-/>
 
 <CopyColourTable
   title="Thomson Reuters"

src/scss/colours/primary/_blue.scss

@@ -0,0 +1,13 @@
+:root {
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-200: #bfdbfe;
+  --blue-300: #93c5fd;
+  --blue-400: #60a5fa;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+  --blue-800: #1e40af;
+  --blue-900: #1e3a8a;
+  --blue-950: #172554;
+}

src/scss/colours/primary/_grey.scss

@@ -0,0 +1,13 @@
+:root {
+  --grey-50: #f9fafb;
+  --grey-100: #f3f4f6;
+  --grey-200: #e5e7eb;
+  --grey-300: #d1d5db;
+  --grey-400: #9ca3af;
+  --grey-500: #6b7280;
+  --grey-600: #4b5563;
+  --grey-700: #374151;
+  --grey-800: #1f2937;
+  --grey-900: #111827;
+  --grey-950: #030712;
+}

src/scss/colours/primary/_red.scss

@@ -0,0 +1,13 @@
+:root {
+  --red-50: #fef2f2;
+  --red-100: #fee2e2;
+  --red-200: #fecaca;
+  --red-300: #fca5a5;
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --red-700: #b91c1c;
+  --red-800: #991b1b;
+  --red-900: #7f1d1d;
+  --red-950: #450a0a;
+}