add basic color scheme

site/layouts/partials/hero.html

@@ -1,7 +1,6 @@
 <article id="home">
   <div id="js-block-parent" class="l-screen-full l-relative l-flex l-flex-center l-flex-wrap l-justify-around u-overflow-hidden">
     <div class="block-container block-grid">
-      {{ partial "blocks.html" . }}
     </div>
   </div>
 </article>

src/css/imports/base.scss

@@ -0,0 +1,6 @@
+body {
+  font-family: "Montserrat", sans-serif;
+  color: var(--color__body);
+  background-color: var(--color__bg);
+}
+

src/css/imports/variables.scss

@@ -1,5 +1,47 @@
 $z-index__header: 100;
 
 :root {
-  --color__bg: #eee;
+  --primary-100: #eff8ff;
+  --primary-200: #aad4f5;
+  --primary-300: #63a2d8;
+  --primary-400: #3183c8;
+  --primary-500: #2368a2;
+  --primary-600: #1a4971;
+  --primary-700: #203d54;
+  // --primary-800: #203d54;
+  // --primary-900: #203d54;
+  --neutral-100: #f8f9fa;
+  --neutral-200: #e1e7ec;
+  --neutral-300: #cfd6de;
+  --neutral-400: #b8c4ce;
+  --neutral-500: #8895a7;
+  --neutral-600: #5f6b7a;
+  --neutral-700: #212934;
+  // --neutral-800: #212934;
+  // --neutral-900: #212934;
+  --accent-primary-100: #e3fcec;
+  --accent-primary-200: #a8eec1;
+  --accent-primary-300: #74d99f;
+  --accent-primary-400: #38c172;
+  --accent-primary-500: #259d58;
+  --accent-primary-600: #197741;
+  --accent-primary-700: #145239;
+  // --accent-primary-800: #145239;
+  // --accent-primary-900: #145239;
+  --accent-secondary-100: #fce8e8;
+  --accent-secondary-200: #f5aaaa;
+  --accent-secondary-300: #e46464;
+  --accent-secondary-400: #dc3030;
+  --accent-secondary-500: #b82020;
+  --accent-secondary-600: #891b1b;
+  --accent-secondary-700: #611818;
+  // --accent-secondary-800: #611818;
+  // --accent-secondary-900: #611818;
+
+  // --accent-tertiary-100: #e7ffee;
+  // --accent-quaternary-100: #fffcf4;
+  // --accent-quinary-100: #ffeefc;
+
+  --color__bg: var(--neutral-100);
+  --color__body: var(--neutral-600);
 }

src/css/main.css

@@ -3,6 +3,7 @@
 
 @import "imports/variables.scss";
 
+@import "imports/base.scss";
 @import "imports/layout.scss";
 @import "imports/utility.scss";
 @import "imports/mixins.scss";
@@ -10,11 +11,6 @@
 
 @import "mapbox-gl/dist/mapbox-gl.css";
 
-// fonts
-body {
-  font-family: "Montserrat", sans-serif;
-}
-
 // swup transition classes
 .transition-fade {
   transition: 0.3s;