more refactoring

src/assets/css/BottomBar/BottomBar.scss

@@ -35,7 +35,7 @@
 
         .artists {
           font-size: 0.8rem;
-          color: $highlight-blue;
+          color: $red;
         }
       }
     }
@@ -47,7 +47,7 @@
       align-items: center;
       margin: $small;
       padding: $small;
-      background-color: $bbb;
+      background-color: $gray5;
 
       .progress-bottom {
         display: flex;

src/assets/css/Search/Search.scss

@@ -27,8 +27,8 @@
     border-radius: $small;
     margin-bottom: $small;
     text-align: center !important;
-    font-size: 1;
-    color: #fff;
+    font-size: 2rem;
+    color: $white;
   }
 
   .input {
@@ -49,9 +49,9 @@
   .theme {
     background-image: linear-gradient(
       45deg,
-      #141414 0%,
-      #464545fd 50%,
-      #111111 100%
+      #464545fd 0%,
+      #1d1d1d 50%,
+      #4d4e50 100%
     );
     color: #fff;
   }

src/assets/css/_variables.scss

@@ -1,11 +1,7 @@
 // colors
 
-$card-dark: #040406;
-$red: #df4646;
-$blue: #055096;
-$green: #439443;
+$card-dark: #000000;
 $separator: #ffffff2f;
-$pink: #c43a3a;
 $highlight-blue: #006eff;
 $bbb: #161616; //bottom controls background
 $theme: #464545fd;
@@ -17,6 +13,28 @@ $medium: 0.75rem;
 $large: 1.5rem;
 $larger: 2rem;
 
+// apple human design guideline colors
+$black: #000000;
+$white: #ffffffde;
+
+$gray: #1c1c1e;
+$gray1: rgb(142, 142, 147);
+$gray2: rgb(99, 99, 102);
+$gray3: rgb(72, 72, 74);
+$gray4: rgb(58, 58, 60);
+$gray5: rgb(44, 44, 46);
+
+$red: rgb(255, 69, 58);
+$blue: rgb(10, 132, 255);
+$green: rgb(48, 209, 88);
+$yellow: rgb(255, 214, 10);
+$orange: rgb(255, 159, 10);
+$pink: rgb(255, 55, 95);
+$purple: rgb(191, 90, 242);
+$brown: rgb(172, 142, 104);
+$indigo: rgb(94, 92, 230);
+$teal: rgb(64, 200, 224);
+
 // media query mixins
 @mixin phone-only {
   @media (max-width: 599px) {

src/assets/css/global.scss

@@ -77,7 +77,7 @@ button {
   border-radius: $small;
 
   &:hover {
-    background-color: $pink !important;
+    background-color: $red !important;
   }
 }
 
@@ -157,7 +157,7 @@ button {
 }
 
 .shadow-sm {
-  box-shadow: 0 0 .5rem rgb(0, 0, 0);
+  box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.452);
 }
 
 .shadow-md {