Update colors

assets/scss/globals.scss

@@ -1,5 +1,10 @@
 $unit: 8px;
 
 // Colors
-$bg-color: #efefef;
+$grey-00: #444;
-$text-color: #333;
+$grey-10: #777;
+$grey-80: #E9E9E9;
+$grey-90: #F6F6F6;
+
+$blue: #61B3FF;
+$red: #FF6161;

src/components/App/index.scss

@@ -1,15 +1,15 @@
 @import '~meyer-reset-scss';
 
 html {
-    background: $bg-color;
+    background: $grey-80;
     font-size: 62.5%;
     padding: $unit * 2;
 }
 
 body {
     font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
-
     font-size: 1.4rem;
+    
     &.no-scroll {
         overflow: hidden;
     }
@@ -19,12 +19,15 @@ a {
     text-decoration: none;
 }
 
+button, input {
+    font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
 h1, h2, h3, p {
-    color: $text-color;
+    color: $grey-00;
 }
 
 h1 {
-    font-size: 18px;
     font-size: 2.1rem;
     font-weight: 500;
     text-align: center;

src/components/Segment/index.scss

@@ -1,22 +1,21 @@
 .Segment {
     border-radius: 4px;
-    color: #888;
+    color: $grey-10;
     cursor: pointer;
-    font-size: 16px;
     font-size: 1.4rem;
     font-weight: 500;
     min-width: 100px;
 
     &:hover label {
-      background: #f9f9f9;
+      background: $grey-90;
-      color: #555;
+      color: $grey-00;
     }
 
     & input {
       display: none;
 
       &:checked + label {
-        background: #2360C5;
+        background: $blue;
         color: white;
       }
     }