diff --git a/sass/_utils.scss b/sass/_utils.scss
index 47e23f7540..b7e9acdfab 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -45,7 +45,7 @@ body:not(.show_drafts) .public_draft:not(.active_draft) {
 .anchor-link:link,
 .anchor-link:visited {
   margin-left: 0.3rem;
-  color: #505050;
+  color: #737373;
   text-shadow: none;
   font-weight: 500;
 }
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 51e5ba7cf3..18f0c0ed57 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -22,7 +22,7 @@ $color-black: #000;
 $color-white: #ececec;
 $color-grey-800: #232326;
 $color-grey-900: #1e1e22;
-$color-pink: #bb799c;
+$color-pink: #9f517a;
 $color-gold: #d2be4a;
 
 $headerbar-color: #1e1e22;
@@ -31,7 +31,7 @@ $hover-shadow-color: #d6d6d6;
 $link-color: #7c90ff;
 $link-hover-shadow-color: #6c82ff;
 $default-color: #ececec;
-$subtitle-color: #8f8f8f;
+$subtitle-color: #999;
 $syntax-theme-background: #2b2c2f;
 $syntax-theme-background-hover: #414247;
 $default-image-background-color: #1b1b1b;
diff --git a/sass/components/_button.scss b/sass/components/_button.scss
index 8fea451997..b491cfb952 100644
--- a/sass/components/_button.scss
+++ b/sass/components/_button.scss
@@ -1,10 +1,10 @@
 .button {
-  $color-blue: #799bbb;
+  $color-blue: #4a6e91;
 
   display: inline-flex;
   align-items: center;
   background-color: $color-blue;
-  border: 3px solid #576f86;
+  border: 3px solid lighten($color-blue, 13%);
   padding: 6px 8px;
   border-radius: $border-radius;
   font-size: 1.2rem;
@@ -35,7 +35,7 @@
 
   &--pink {
     background-color: $color-pink;
-    border-color: #865767;
+    border-color: lighten($color-pink, 13%);
 
     &:hover {
       background-color: darken($color-pink, 3%);
diff --git a/sass/components/_docs-footer.scss b/sass/components/_docs-footer.scss
index 95c1baab02..9ce5d7d434 100644
--- a/sass/components/_docs-footer.scss
+++ b/sass/components/_docs-footer.scss
@@ -1,6 +1,6 @@
 .docs-footer {
   $border-color: #2f3033;
-
+  $secondary-text-color: #8c8c8c;
   --docs-footer-gap: 12px;
 
   margin: 32px 0;
@@ -58,7 +58,7 @@
       grid-area: next;
       text-align: right;
       padding-right: 16px;
-
+      
       .docs-footer__label {
         padding: 0 12px 0 8px;
       }
@@ -95,13 +95,13 @@
     align-items: center;
     padding: 8px;
     font-size: 0.9rem;
-
+    
     @include override-anchor {
-      color: #555;
+      color: $secondary-text-color;
     }
 
     &:hover {
-      color: #aaa;
+      color: lighten($secondary-text-color, 20%);
     }
 
     .icon {
diff --git a/sass/components/_header.scss b/sass/components/_header.scss
index 808b72985b..747d725d7f 100644
--- a/sass/components/_header.scss
+++ b/sass/components/_header.scss
@@ -38,7 +38,7 @@
     display: none;
     font-size: 1.28rem;
     font-weight: 500;
-    color: #797979;
+    color: #868686;
     margin-left: 12px;
     white-space: nowrap;
 
diff --git a/sass/components/_syntax-theme.scss b/sass/components/_syntax-theme.scss
index ea89074585..c3a64250c7 100644
--- a/sass/components/_syntax-theme.scss
+++ b/sass/components/_syntax-theme.scss
@@ -4,15 +4,16 @@
 }
 
 div.incorrect {
+    $incorrect_block_background_color: #481e21;
     position: relative;
-    background-color: #542326;
+    background-color: $incorrect_block_background_color;
     border-left: 10px solid darkred;
     border-radius: 10px;
     padding-right: 55px;
 
     .z-code,
     .z-code code {
-        background-color: #542326;
+        background-color: $incorrect_block_background_color;
     }
 }
 
@@ -45,7 +46,7 @@ div.incorrect-image {
 
 .z-comment,
 .z-punctuation.z-definition.z-comment {
-    color: #65737e;
+    color: #8e9aa4;
 }
 
 .z-punctuation.z-definition.z-string,
@@ -116,7 +117,7 @@ div.incorrect-image {
 }
 
 .z-entity.z-name.z-tag {
-    color: #e05a67;
+    color: #e0858d;
 }
 
 .z-entity.z-other.z-attribute-name {