diff --git a/client/assets/styles/colour-cards.css b/client/assets/styles/colour-cards.css
index 58d6f497..f53c7138 100644
--- a/client/assets/styles/colour-cards.css
+++ b/client/assets/styles/colour-cards.css
@@ -15,6 +15,9 @@
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
+
+  font-family: Poppins, sans-serif;
+  font-weight: 400;
 }
 
 .colour-cards input {
@@ -22,17 +25,13 @@
 }
 
 .colour-cards__card {
-  order: 2;
-
   height: 6rem;
   padding: 1rem;
-
-  border: var(--black) solid 0.2rem;
+  border: var(--dxw-black) solid 0.2rem;
   border-radius: 0.5rem;
 }
 
 .colour-cards input:checked + .colour-cards__card {
-  order: 1;
   outline: var(--selected) solid 0.2rem;
 }
 
diff --git a/client/assets/styles/main.css b/client/assets/styles/main.css
index 9a6745ed..c54e5c76 100644
--- a/client/assets/styles/main.css
+++ b/client/assets/styles/main.css
@@ -1,16 +1,17 @@
-@import url("https://fonts.googleapis.com/css?family=Poppins:600&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Poppins:400,600&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Merriweather:300&display=swap");
 @import url("colour-cards.css");
 
 
 body {
   --dxw-white: #f9f8f5;
+  --dxw-black: #243746;
 
   padding: 1rem;
 
   font-family: Merriweather, serif;
   font-weight: 300;
-  color: #243746;
+  color: var(--dxw-black);
 
   background-color: var(--dxw-white);
 }