Update styles from style guide

client/src/components/ModuleTeaser.vue

@@ -33,7 +33,7 @@
     }
 
     &__meta-title {
-      color: $grey-2;
+      color: $color-lightgrey;
       margin-bottom: 20px;
       font-size: 1.2rem;
     }

client/src/pages/topic.vue

@@ -29,7 +29,7 @@
 
   .topic {
     &__teaser {
-      color: $grey-2;
+      color: $color-grey;
       font-size: 1.2rem;
       line-height: 25px;
       max-width: 895px;

client/src/styles/_typography.scss

@@ -15,20 +15,20 @@ p, a {
 }
 
 h1 {
-  font-size: 5rem;
+  font-size: 4rem; // 64px
   font-weight: 800;
   color: $header-color;
   margin-bottom: 18px;
 }
 
 h2 {
-
+  font-size: 2.625rem; // 42px
 }
 
 h3 {
-  font-size: 2.5rem;
+  font-size: 2.1875rem; // 35px
 }
 
 h4 {
-  font-size: 1.5rem;
+  font-size: 1.3125rem; // 21px
 }

client/src/styles/_variables.scss

@@ -1,12 +1,39 @@
-$grey-1: #333333;;
-$grey-2: #A1A1A1;
-$grey-3: #F3F3F3;
+/*
+    Colors:
+*/
 
-$header-color: $grey-1;
-$intro-color: $grey-2;
+/* accent */
+$color-accent-1: #ffb800;
+$color-accent-1-dark: #d69d0a;
+$color-accent-1-light: #fff5d9;
+$color-accent-2-dark: #118dc2;
+$color-accent-2: #09a4e7;
+$color-accent-2-light: #daf2fc;
+$color-accent-3-dark: #bd4163;
+$color-accent-3: #e04570;
+$color-accent-3-light: #fbe3ea;
+$color-accent-4-dark: #96b23d;
+$color-accent-4: #afd240;
+$color-accent-4-light: #f3f9e3;
+
+/* brand */
+$color-brand-dark: #1c9076;
+$color-brand: #17a887;
+$color-brand-light: #ddf3ee;
+
+/* greyscale */
+$color-darkgrey-1: #333333;
+$color-darkgrey-2: #515151;
+$color-grey: #a1a1a1;
+$color-lightgrey: #f3f3f3;
+$color-white: #ffffff;
+
+
+$header-color: $color-darkgrey-1;
+$intro-color: $color-grey;
 
 $sans-serif-font-family: 'Montserrat', Arial, sans-serif;
 $serif-font-family: "ff-meta-serif-web-pro", serif;
-$base-font-size: 14px;
+$base-font-size: 100%; // 16px in most browsers