diff --git a/ListPage.qml b/ListPage.qml
index 0871b2d..79fd490 100644
--- a/ListPage.qml
+++ b/ListPage.qml
@@ -15,7 +15,7 @@ Page {
 
         delegate: ListItemDelegate {}
         highlight: Rectangle {
-            color: "lightgray"
+            color: wccLavenderDefault
             radius: 5
         }
 
@@ -36,13 +36,14 @@ Page {
             height: 50
             gradient: mainGradient
             border {
-                color: "lightgreen"
+                color: wccPurpleDark
                 width: 2
             }
             Text {
                 anchors.centerIn: parent
                 text: window.title
                 font.pixelSize: 32
+                color: wccDarkLight
             }
         }
     }
@@ -51,11 +52,11 @@ Page {
         id: mainGradient
         GradientStop {
             position: 0.0
-            color: "#56FF56"
+            color: wccPurpleDefault
         }
         GradientStop {
             position: 0.66
-            color: "#7ED24E"
+            color: wccPurpleDark
         }
     }
 }
diff --git a/Main.qml b/Main.qml
index 56a0fb3..4f3271f 100644
--- a/Main.qml
+++ b/Main.qml
@@ -9,9 +9,22 @@ Window {
     visible: true
     title: `${Application.name}`
 
-    property color textColor: "black"
     property int fontSize: 16
 
+    property color textColor: "black"
+
+    property color wccDarkDark: "#010101"
+    property color wccDarkDefault: "#3C3B3B"
+    property color wccDarkLight: "#828282"
+
+    property color wccPurpleDark: "#631A61"
+    property color wccPurpleDefault: "#A834A5"
+    property color wccPurpleLight: "#E88FE5"
+
+    property color wccLavenderDark: "#8C52FF"
+    property color wccLavenderDefault: "#9D74EE"
+    property color wccLavenderLight: "#BC9AFF"
+
     ListPage {
         id: listPage
         anchors.fill: parent