diff --git a/resources/css/app.css b/resources/css/app.css
index b5c61c9..fd40a31 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,3 +1,42 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+    /* TODO: Look into dark secondary, Will probs need to be some kinda grey */
+    /* TODO: Looks into adding text colours and sub-text colours */
+
+    /* Nexi Colours
+        Black - 24, 24, 24 (#181818) - Pantone 'Neutral Black C'
+        Red - 235, 49, 46 (#EB312E) - Pantone '1788C'
+        Grey - 228, 228, 228 (#E4E4E4)
+        Darker Grey - 210, 210, 210 (#D2D2D2)
+        Green - 54, 234, 123 (#36EA7B)
+        Cyan - 54, 233, 234 (#36E9EA)
+        Purple - 166, 37, 234 (#A625EA)
+        Orange - 241, 124, 37 (#F17C25)
+    */
+    :root {
+        --color-nexi-primary: 255 255 255;
+        --color-nexi-secondary: 24, 24, 24;
+        --color-nexi-red: 235, 49, 46;
+        --color-nexi-grey: 228, 228, 228;
+        --color-nexi-darker-grey: 210, 210, 210;
+        --color-nexi-green: 54, 234, 123;
+        --color-nexi-cyan: 247 147 34;
+        --color-nexi-purple: 166, 37, 234;
+        --color-nexi-orange: 241, 124, 37;
+    }
+
+    :root[class~="dark"] {
+        --color-nexi-primary: 24, 24, 24;
+        --color-nexi-secondary: 255, 255, 255;
+        --color-nexi-red: 235, 49, 46;
+        --color-nexi-grey: 228, 228, 228;
+        --color-nexi-darker-grey: 210, 210, 210;
+        --color-nexi-green: 54, 234, 123;
+        --color-nexi-cyan: 247 147 34;
+        --color-nexi-purple: 166, 37, 234;
+        --color-nexi-orange: 241, 124, 37;
+    }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 06a083a..7b159a8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,8 +11,20 @@ export default {
         './resources/**/*.vue',
     ],
 
+    // TODO: We'll wants want to add something like a text colour, sub-text colour
     theme: {
         extend: {
+            colors: {
+                nexiPrimary: "rgb(var(--color-nexi-primary) / <alpha-value>)",
+                nexiSecondary: "rgb(var(--color-nexi-secondary) / <alpha-value>)",
+                nexiRed: "rgb(var(--color-nexi-red) / <alpha-value>)",
+                nexiGrey: "rgb(var(--color-nexi-grey) / <alpha-value>)",
+                nexiDarkerGrey: "rgb(var(--color-nexi-darker-grey) / <alpha-value>)",
+                nexiGreen: "rgb(var(--color-nexi-green) / <alpha-value>)",
+                nexiCyan: "rgb(var(--color-nexi-cyan) / <alpha-value>)",
+                nexiPurple: "rgb(var(--color-nexi-purple) / <alpha-value>)",
+                nexiOrange: "rgb(var(--color-nexi-orange) / <alpha-value>)",
+            },
             fontFamily: {
                 sans: ['Figtree', ...defaultTheme.fontFamily.sans],
             },