diff --git a/static/css/style.css b/static/css/style.css
index 40262b61a8d0d39d3727f972ffba1836d2e2c54a..91938d9ac15f65f18a2a4a52a7549b2e882335bc 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -3,11 +3,11 @@ html, body {
 }
 
 a {
-	color: var(--teckids-blue-dark);
+	color: var(--teckids-secondary-dark);
 }
 
 .navbar {
-	border-bottom: var(--teckids-orange-dark) 3px solid;
+	border-bottom: var(--teckids-primary-dark) 3px solid;
         height: 80px;
 }
 
@@ -30,18 +30,18 @@ img#logo {
 }
 
 li.active > a {
-	background: var(--teckids-orange-light);
-	background: linear-gradient(var(--teckids-orange-dark), var(--teckids-orange-light), var(--teckids-orange-dark));
+	background: var(--teckids-primary-light);
+	background: linear-gradient(var(--teckids-primary-dark), var(--teckids-orange-light), var(--teckids-orange-dark));
 	color: #f8f8f8;
 }
 
 ul.dropdown-menu > li.active > a {
-	background: var(--teckids-orange-dark);
+	background: var(--teckids-primary-dark);
 	color: #f8f8f8;
 }
 
 footer#main-footer {
-	background: var(--teckids-blue-light);
+	background: var(--teckids-secondary-light);
 	color: #ffffff;
 	margin-top: 20px;
 	padding-top: 30px;
@@ -50,7 +50,7 @@ footer#main-footer {
 
 footer#sponsoren-footer {
         background: #ffffff;
-        border-top: var(--teckids-blue-light) 3px solid;
+        border-top: var(--teckids-secondary-light) 3px solid;
         margin-top: 50px;
         padding-top: 3px;
         padding-bottom: 20px;
@@ -161,22 +161,22 @@ time.icon strong {
 	top: 0;
 	padding: 0.4em 0;
 	color: #fff;
-	background-color: var(--teckids-orange-dark);
-	border-bottom: 1px dashed var(--teckids-orange-light);
-	box-shadow: 0 2px 0 var(--teckids-orange-light);
+	background-color: var(--teckids-primary-dark);
+	border-bottom: 1px dashed var(--teckids-primary-light);
+	box-shadow: 0 2px 0 var(--teckids-primary-light);
 }
 
 time.icon em {
 	position: absolute;
 	bottom: 0.3em;
-	color: var(--teckids-blue-light);
+	color: var(--teckids-secondary-light);
 }
 
 time.icon span {
 	font-size: 2.8em;
 	letter-spacing: -0.05em;
 	padding-top: 0.8em;
-	color: var(--teckids-blue-dark);
+	color: var(--teckids-secondary-dark);
 }
 
 .carousel .carousel-image {
@@ -198,5 +198,5 @@ time.icon span {
 }
 
 .product-button {
-	background: var(--teckids-orange-dark);
+	background: var(--teckids-primary-dark);
 }
diff --git a/templates/base.html b/templates/base.html
index d41290a9155323a4dc6c4a1542e1385f790db133..d6e6e6edf41a0ff0637a6d7c78666153fc03f751 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -19,10 +19,10 @@
     <meta name="author" content="Teckids e.V." />
     <style>
         :root {
-            --teckids-orange-light: {{ PRIMARY_LIGHT }};
-            --teckids-orange-dark: {{ PRIMARY_DARK }};
-            --teckids-blue-light: {{ SECONDARY_LIGHT }};
-            --teckids-blue-dark: {{ SECONDARY_DARK }};
+            --teckids-primary-light: {{ PRIMARY_LIGHT }};
+            --teckids-primary-dark: {{ PRIMARY_DARK }};
+            --teckids-secondary-light: {{ SECONDARY_LIGHT }};
+            --teckids-secondary-dark: {{ SECONDARY_DARK }};
         }
     </style>
     <link rel="stylesheet" type="text/css" href="/{{ THEME_STATIC_DIR }}/css/bootstrap.min.css" />