diff --git a/sass/_personnel.scss b/sass/_personnel.scss
index bfe3085..8cc1d28 100644
--- a/sass/_personnel.scss
+++ b/sass/_personnel.scss
@@ -9,22 +9,22 @@
 		.button {
 			padding: .5em 1.5em;
 			font-weight: bold;
-			border: 2px solid #ccc;
-			border-radius: .5em;
+			border: 2px solid $col-bg-2-light;
+			border-radius: .3em;
 			cursor: pointer;
-			box-shadow: 0 0 10px rgba(0,0,0,0.1);
-			transition: border-color .2s ease-out;
+			transition: all .2s ease-out;
 
 			&:hover, &.active {
-				border-color: #333;
+				border-color: $col-bg-3-dark;
+				box-shadow: 0 0 10px rgba(0,0,0,0.1);
 
 				@media (prefers-color-scheme: dark) {
-					border-color: #ccc;
+					border-color: $col-bg-2-light;
 				}
 			}
 
 			@media (prefers-color-scheme: dark) {
-				border-color: #333;
+				border-color: $col-bg-3-dark;
 			}
 		}
 	}
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 7789458..b573600 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -1 +1,27 @@
 $width-mobile: 900px;
+
+$col-bg-0-light: #f8f8f8;
+$col-bg-1-light: #e8e8e8;
+$col-bg-2-light: #d8d8d8;
+$col-bg-3-light: #b8b8b8;
+$col-fg-0-light: #181818;
+$col-fg-1-light: #282828;
+$col-fg-2-light: #383838;
+$col-fg-3-light: #585858;
+
+$col-bg-0-dark: #181818;
+$col-bg-1-dark: #282828;
+$col-bg-2-dark: #383838;
+$col-bg-3-dark: #585858;
+$col-fg-0-dark: #f8f8f8;
+$col-fg-1-dark: #e8e8e8;
+$col-fg-2-dark: #d8d8d8;
+$col-fg-3-dark: #b8b8b8;
+
+$col-red-light:    #bf616a;
+$col-orange-light: #d08770;
+$col-yellow-light: #ebcb8b;
+$col-green-light:  #a3be8c;
+$col-cyan-light:   #86c1b9;
+$col-blue-light:   #7cafc2;
+$col-purple-light: #b48ead;
diff --git a/sass/style.scss b/sass/style.scss
index 1206b28..ec8cc04 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -16,7 +16,8 @@ body {
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 	line-height: 1.6;
 	font-size: 16px;
-	color: #333;
+	color: $col-fg-0-light;
+	background-color: $col-bg-0-light;
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
@@ -27,8 +28,8 @@ body {
 	}
 
 	@media (prefers-color-scheme: dark) {
-		color: #ddd;
-		background-color: #222;
+		color: $col-fg-0-dark;
+		background-color: $col-bg-0-dark;
 	}
 }
 
@@ -43,7 +44,7 @@ nav {
 	display: flex;
 	align-items: center;
 	border-bottom: 8px solid;
-	border-image: linear-gradient(to right, #BF616A 20%, #D08770 20%, #D08770 40%, #EBCB8B 40%, #EBCB8B 60%, #A3BE8C 60%, #A3BE8C 80%, #B48EAD 80%) 5;
+	border-image: linear-gradient(to right, $col-red-light 20%, $col-orange-light 20%, $col-orange-light 40%, $col-yellow-light 40%, $col-yellow-light 60%, $col-green-light 60%, $col-green-light 80%, $col-purple-light 80%) 5;
 
 	.wrap {
 		width: 100%;
@@ -78,11 +79,15 @@ nav {
 			}
 		}
 	}
+
+	@media (prefers-color-scheme: dark) {
+		background-color: $col-bg-0-dark;
+	}
 }
 
 a {
 	text-decoration: none;
-	color: #353;
+	color: $col-red-light;
 
 	&:hover {
 		text-decoration: underline;
@@ -105,7 +110,7 @@ img {
 header {
 	position: relative;
 	min-height: 35em;
-	color: #fff;
+	color: $col-bg-0-light;
 	overflow: hidden;
 
 	.wrap {
@@ -145,9 +150,10 @@ header {
 		background-size: contain;
 		background-position: center bottom -4px; // -4px fixes a visible line on some resolutions
 		background-repeat: no-repeat;
+		filter: invert(0%) contrast(94.5%);
 
 		@media (prefers-color-scheme: dark) {
-			filter: invert(100%) contrast(73%);
+			filter: invert(100%) contrast(81%);
 		}
 	}
 }