fonts

src/components/Header.vue

@@ -3,7 +3,13 @@ import { getTitle } from '@/utils/env'
 </script>
 
 <template>
-  <h1>{{ getTitle() }}</h1>
+  <header class="header">
+    <div class="header-container">
+      <div class="container">
+        <h1 class="">{{ getTitle() }}</h1>
+      </div>
+    </div>
+  </header>
 </template>
 
 <style scoped></style>

src/styles/colors.css

@@ -0,0 +1,8 @@
+:root {
+    --color-main: #5ba8ff;
+    --color-text: #181f23;
+    --color-subtext: #2a363e;
+    --color-main-background:  #fff;
+    --color-secondary-background: #e7e7e8;
+
+}

src/styles/common.css

@@ -79,3 +79,36 @@ body,
     max-width: 1440px;
   }
 }
+
+.container {
+  margin: 0 auto;
+  max-width: 1320px;
+  padding: 10px 30px;
+}
+
+body {
+  width: 100%;
+  position: relative;
+  background: var(--color-main-background);
+  color: var(--color-text);
+  font-family: 'Onest', sans-serif;
+  font-weight: var(--main-font-weight);
+  font-size: var(--main-font-size);
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+
+}
+
+a, button {
+  background: 0;
+  color: var(--color-text);
+  font-family: var(--main-font-family);
+  font-weight: var(--main-font-weight);
+  font-size: var(--main-font-size);
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  text-decoration: none;
+  border: 0;
+}

src/styles/fonts.css

@@ -0,0 +1,29 @@
+@font-face {
+    src: url("@/assets/fonts/Onest-Bold.ttf");
+    font-family: "Onest";
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    src: url("@/assets/fonts/Onest-Medium.ttf");
+    font-family: "Onest";
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    src: url("@/assets/fonts/Onest-Regular.ttf");
+    font-family: "Onest";
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+:root {
+    --main-font-family: 'Onest', sans-serif;
+    --main-font-size: 18px;
+    --main-font-weight: 200;
+}