diff --git a/src/lib/assets/colors/index.js b/src/lib/assets/colors/index.js
index 05e984fb9908028f3cdd8f52d1c7a9da8f0673b6..c7914933cc504e0ec8c91dfc6a7e150e2456ec3f 100644
--- a/src/lib/assets/colors/index.js
+++ b/src/lib/assets/colors/index.js
@@ -1,24 +1,66 @@
 const green = '#1CB569'
+const darkGreen = '#0D8767'
+const darkestGreen = '#095D4F'
+
 const blue = '#4A90E2'
-const grey = '#9B9B9B'
-const red = '#BB2D00'
+const darkBlue = '#5E62A3'
+const darkestBlue = '#383A61'
+
+const red = '#E2384D'
+const darkRed = '#E2384D'
+
+const lightGrey = '#A0ADC0'
+const grey = '#8494AD'
+const darkGrey = '#647490'
+const darkestGrey = '#3F495A'
+
+// old colours
+/**
+ * @deprecated
+ */
 const green10 = '#e8f7f0'
-const darkgreen = '#0d8767'
+/**
+ * @deprecated
+ */
 const blue10 = '#ecf3fc'
-const darkblue = '#5e62a3'
+/**
+ * @deprecated
+ */
 const darkgrey = '#5A719A'
+/**
+ * @deprecated
+ */
 const white = '#FFFFFF'
+/**
+ * @deprecated
+ */
 const wine = '#862957'
+/**
+ * @deprecated
+ */
+const darkblue = '#5e62a3'
+/**
+ * @deprecated
+ */
+const darkgreen = '#0d8767'
 
 export {
   blue,
   blue10,
+  darkBlue,
+  darkGreen,
+  darkGrey,
+  darkRed,
   darkblue,
+  darkestBlue,
+  darkestGreen,
+  darkestGrey,
   darkgreen,
   darkgrey,
   green,
   green10,
   grey,
+  lightGrey,
   red,
   white,
   wine,
@@ -27,13 +69,21 @@ export {
 export default {
   blue,
   blue10,
-  green,
-  grey,
-  red,
-  green10,
+  darkBlue,
+  darkGreen,
+  darkGrey,
+  darkRed,
   darkblue,
+  darkestBlue,
+  darkestGreen,
+  darkestGrey,
   darkgreen,
   darkgrey,
+  green,
+  green10,
+  grey,
+  lightGrey,
+  red,
   white,
   wine,
 }
diff --git a/tests/__snapshots__/storyshots.test.js.snap b/tests/__snapshots__/storyshots.test.js.snap
index ed272f935594d32683e6cc8a8aef29dfd58b87be..cc1be137999f8c768566dabcd0b438ae23dd610a 100644
--- a/tests/__snapshots__/storyshots.test.js.snap
+++ b/tests/__snapshots__/storyshots.test.js.snap
@@ -29,7 +29,7 @@ exports[`Storyshots Atoms/Buttons Button Default 1`] = `
 
 .c1:disabled,
 .c1:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -94,7 +94,7 @@ exports[`Storyshots Atoms/Buttons Button/font size 1`] = `
 
 .c1:disabled,
 .c1:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -128,7 +128,7 @@ exports[`Storyshots Atoms/Buttons Button/font size 1`] = `
 
 .c2:disabled,
 .c2:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -194,7 +194,7 @@ exports[`Storyshots Atoms/Buttons Button/nav 1`] = `
 
 .c1:disabled,
 .c1:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -269,7 +269,7 @@ exports[`Storyshots Atoms/Buttons Button/sizing 1`] = `
 
 .c1:disabled,
 .c1:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -379,7 +379,7 @@ exports[`Storyshots Atoms/Buttons Button/variants 1`] = `
 
 .c1:disabled,
 .c1:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -412,7 +412,7 @@ exports[`Storyshots Atoms/Buttons Button/variants 1`] = `
 
 .c2:disabled,
 .c2:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -426,7 +426,7 @@ exports[`Storyshots Atoms/Buttons Button/variants 1`] = `
   -webkit-transition: background 50ms linear,color 50ms linear,box-shadow cubic-bezier(0.4,0,0.2,1) 200ms;
   transition: background 50ms linear,color 50ms linear,box-shadow cubic-bezier(0.4,0,0.2,1) 200ms;
   font-weight: semibold;
-  background: #BB2D00;
+  background: #E2384D;
   color: white;
 }
 
@@ -445,7 +445,7 @@ exports[`Storyshots Atoms/Buttons Button/variants 1`] = `
 
 .c3:disabled,
 .c3:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -480,7 +480,7 @@ exports[`Storyshots Atoms/Buttons Button/variants 1`] = `
 
 .c4:disabled,
 .c4:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -555,19 +555,19 @@ exports[`Storyshots Atoms/Color Colorable 1`] = `
 
 .c2 {
   color: white;
-  background-color: #9B9B9B;
+  background-color: #8494AD;
   -webkit-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear;
 }
 
 .c2:active,
 .c2:hover {
-  background-color: #9B9B9B;
+  background-color: #8494AD;
 }
 
 .c3 {
   color: white;
-  background-color: #BB2D00;
+  background-color: #E2384D;
   -webkit-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear;
 }
@@ -623,7 +623,7 @@ exports[`Storyshots Atoms/Color Colorable 1`] = `
 exports[`Storyshots Atoms/Form Elements Multiple Line Input 1`] = `
 .c9 {
   border-radius: 100%;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c12 {
@@ -632,14 +632,14 @@ exports[`Storyshots Atoms/Form Elements Multiple Line Input 1`] = `
 }
 
 .c2 {
-  color: #9B9B9B;
+  color: #8494AD;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
 }
 
 .c8 {
-  color: #BB2D00;
+  color: #E2384D;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
@@ -688,7 +688,7 @@ exports[`Storyshots Atoms/Form Elements Multiple Line Input 1`] = `
   margin: 0.5rem;
   border-style: solid;
   border-width: 3px;
-  border-color: #BB2D00;
+  border-color: #E2384D;
   border-radius: 3rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -968,7 +968,7 @@ exports[`Storyshots Atoms/Form Elements Multiple Line Input 1`] = `
 exports[`Storyshots Atoms/Form Elements Select 1`] = `
 .c7 {
   border-radius: 100%;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c10 {
@@ -977,14 +977,14 @@ exports[`Storyshots Atoms/Form Elements Select 1`] = `
 }
 
 .c2 {
-  color: #9B9B9B;
+  color: #8494AD;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
 }
 
 .c6 {
-  color: #BB2D00;
+  color: #E2384D;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
@@ -1033,7 +1033,7 @@ exports[`Storyshots Atoms/Form Elements Select 1`] = `
   margin: 0.5rem;
   border-style: solid;
   border-width: 3px;
-  border-color: #BB2D00;
+  border-color: #E2384D;
   border-radius: 3rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1077,7 +1077,7 @@ exports[`Storyshots Atoms/Form Elements Select 1`] = `
   outline: none;
   background: none;
   border: none;
-  border-bottom: 3px solid #9B9B9B;
+  border-bottom: 3px solid #8494AD;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
   font-size: 1rem;
   color: #4A90E2;
@@ -1340,12 +1340,12 @@ exports[`Storyshots Atoms/Form Elements Select 1`] = `
 exports[`Storyshots Atoms/Form Elements Selector Single Choice 1`] = `
 .c7 {
   border-radius: 100%;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c8 {
   border-radius: 100%;
-  color: #9B9B9B;
+  color: #8494AD;
 }
 
 .c9 {
@@ -1746,12 +1746,12 @@ exports[`Storyshots Atoms/Form Elements Selector Single Choice 1`] = `
 exports[`Storyshots Atoms/Form Elements Selector Single Choice with Background 1`] = `
 .c7 {
   border-radius: 100%;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c8 {
   border-radius: 100%;
-  color: #9B9B9B;
+  color: #8494AD;
 }
 
 .c9 {
@@ -2145,12 +2145,12 @@ exports[`Storyshots Atoms/Form Elements Selector Single Choice with Background 1
 exports[`Storyshots Atoms/Form Elements Selector multiple Choice 1`] = `
 .c7 {
   border-radius: 100%;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c8 {
   border-radius: 100%;
-  color: #9B9B9B;
+  color: #8494AD;
 }
 
 .c9 {
@@ -2567,12 +2567,12 @@ exports[`Storyshots Atoms/Form Elements Selector multiple Choice 1`] = `
 exports[`Storyshots Atoms/Form Elements Selector multiple Choice with Background 1`] = `
 .c7 {
   border-radius: 100%;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c8 {
   border-radius: 100%;
-  color: #9B9B9B;
+  color: #8494AD;
 }
 
 .c9 {
@@ -2982,7 +2982,7 @@ exports[`Storyshots Atoms/Form Elements Selector multiple Choice with Background
 exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = `
 .c7 {
   border-radius: 100%;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c10 {
@@ -2991,14 +2991,14 @@ exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = `
 }
 
 .c2 {
-  color: #9B9B9B;
+  color: #8494AD;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
 }
 
 .c6 {
-  color: #BB2D00;
+  color: #E2384D;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
@@ -3047,7 +3047,7 @@ exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = `
   margin: 0.5rem;
   border-style: solid;
   border-width: 3px;
-  border-color: #BB2D00;
+  border-color: #E2384D;
   border-radius: 3rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3082,7 +3082,7 @@ exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = `
 .c4 {
   width: 100%;
   border: none;
-  border-bottom: 3px solid #9B9B9B;
+  border-bottom: 3px solid #8494AD;
   background: none;
   font-family: Linguala-Title;
   font-size: 1rem;
@@ -3090,22 +3090,22 @@ exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = `
 }
 
 .c4::-webkit-input-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c4::-moz-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c4:-ms-input-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c4::placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
@@ -3253,7 +3253,7 @@ exports[`Storyshots Atoms/Form Elements Single Line Input 1`] = `
 exports[`Storyshots Atoms/Form Elements Single Line Input Password 1`] = `
 .c7 {
   border-radius: 100%;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c10 {
@@ -3262,14 +3262,14 @@ exports[`Storyshots Atoms/Form Elements Single Line Input Password 1`] = `
 }
 
 .c2 {
-  color: #9B9B9B;
+  color: #8494AD;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
 }
 
 .c6 {
-  color: #BB2D00;
+  color: #E2384D;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
@@ -3318,7 +3318,7 @@ exports[`Storyshots Atoms/Form Elements Single Line Input Password 1`] = `
   margin: 0.5rem;
   border-style: solid;
   border-width: 3px;
-  border-color: #BB2D00;
+  border-color: #E2384D;
   border-radius: 3rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3353,7 +3353,7 @@ exports[`Storyshots Atoms/Form Elements Single Line Input Password 1`] = `
 .c4 {
   width: 100%;
   border: none;
-  border-bottom: 3px solid #9B9B9B;
+  border-bottom: 3px solid #8494AD;
   background: none;
   font-family: Linguala-Password;
   font-size: 1rem;
@@ -3361,22 +3361,22 @@ exports[`Storyshots Atoms/Form Elements Single Line Input Password 1`] = `
 }
 
 .c4::-webkit-input-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c4::-moz-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c4:-ms-input-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c4::placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
@@ -3601,7 +3601,7 @@ exports[`Storyshots Atoms/Form Elements Toggle 1`] = `
   width: 57.400000000000006px;
   border-radius: 20px;
   border: 1.3333333333333333px solid currentColor;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c5 {
@@ -3665,7 +3665,7 @@ exports[`Storyshots Atoms/Form Elements Toggle 1`] = `
 
 .c11 {
   border-radius: 100%;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c13 {
@@ -3674,14 +3674,14 @@ exports[`Storyshots Atoms/Form Elements Toggle 1`] = `
 }
 
 .c8 {
-  color: #9B9B9B;
+  color: #8494AD;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
 }
 
 .c10 {
-  color: #BB2D00;
+  color: #E2384D;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
@@ -4045,7 +4045,7 @@ Array [
 }
 
 .c3 {
-  color: #9B9B9B;
+  color: #8494AD;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
@@ -4111,7 +4111,7 @@ Array [
 
 .c16:disabled,
 .c16:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -4119,7 +4119,7 @@ Array [
 .c5 {
   width: 100%;
   border: none;
-  border-bottom: 3px solid #9B9B9B;
+  border-bottom: 3px solid #8494AD;
   background: none;
   font-family: Linguala-Title;
   font-size: 1rem;
@@ -4127,29 +4127,29 @@ Array [
 }
 
 .c5::-webkit-input-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c5::-moz-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c5:-ms-input-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c5::placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c6 {
   width: 100%;
   border: none;
-  border-bottom: 3px solid #9B9B9B;
+  border-bottom: 3px solid #8494AD;
   background: none;
   font-family: Linguala-Password;
   font-size: 1rem;
@@ -4157,22 +4157,22 @@ Array [
 }
 
 .c6::-webkit-input-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c6::-moz-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c6:-ms-input-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c6::placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
@@ -4241,7 +4241,7 @@ Array [
   outline: none;
   background: none;
   border: none;
-  border-bottom: 3px solid #9B9B9B;
+  border-bottom: 3px solid #8494AD;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
   font-size: 1rem;
   color: #4A90E2;
@@ -4502,7 +4502,7 @@ Array [
 
 .c1:disabled,
 .c1:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -4536,7 +4536,7 @@ Array [
 exports[`Storyshots Atoms/Forms Simple Form 1`] = `
 Array [
   .c3 {
-  color: #9B9B9B;
+  color: #8494AD;
   font-size: 1rem;
   margin-bottom: 0.5rem;
   font-family: Libre Baskerville,Helvetica,Arial,serif;
@@ -4602,7 +4602,7 @@ Array [
 
 .c10:disabled,
 .c10:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -4610,7 +4610,7 @@ Array [
 .c5 {
   width: 100%;
   border: none;
-  border-bottom: 3px solid #9B9B9B;
+  border-bottom: 3px solid #8494AD;
   background: none;
   font-family: Linguala-Title;
   font-size: 1rem;
@@ -4618,22 +4618,22 @@ Array [
 }
 
 .c5::-webkit-input-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c5::-moz-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c5:-ms-input-placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
 .c5::placeholder {
-  color: #9B9B9B;
+  color: #8494AD;
   opacity: 0.4;
 }
 
@@ -4822,7 +4822,7 @@ Array [
 
 .c1:disabled,
 .c1:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -8773,7 +8773,7 @@ exports[`Storyshots Atoms/Spin Button Linear 1`] = `
 
 .c1:disabled,
 .c1:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -10450,7 +10450,7 @@ exports[`Storyshots documentation/overview atoms/button 1`] = `
 
 .c0:disabled,
 .c0:invalid {
-  background: #9B9B9B;
+  background: #8494AD;
   color: white;
   pointer-events: none;
 }
@@ -10825,7 +10825,7 @@ exports[`Storyshots documentation/overview molecules/statelesstoggle 1`] = `
   width: 57.400000000000006px;
   border-radius: 20px;
   border: 1.3333333333333333px solid currentColor;
-  color: #BB2D00;
+  color: #E2384D;
 }
 
 .c1 {