font and basic color setup with scss structure

src/components/home/home.scss

@@ -0,0 +1 @@
+@import '../../styles/index';

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+
 import Home from './components/home';
 import * as serviceWorker from './serviceWorker';
 
+// Styles
+import './styles/_index.scss';
+
 ReactDOM.render(
   <React.StrictMode>
-    <h1>this site is atleast working</h1>
+    <Home />
   </React.StrictMode>,
   document.getElementById('root')
 );

src/styles/_colors.scss

@@ -1 +1,8 @@
-$primary-color: #333;
+$primary-background: #fbf6f0;
+$primary-text: #3f4254;
+$secondary-text: #b5b5c3;
+
+body {
+  color: $primary-text;
+  background-color: $primary-background;
+}

src/styles/_fonts.scss

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
+
+html {
+  font-family: 'Fira Sans', sans-serif;
+}

src/styles/_index.scss

@@ -0,0 +1,2 @@
+@import './colors';
+@import './fonts';