add fonts and colors

code/frontend/src/App.tsx

@@ -1,6 +1,8 @@
 import React, { use } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import './colors.css';
+import './fonts.css';
 import { useState, useEffect } from 'react';
 import LoginAndSignUpPage from './LoginAndSignUpPage';
 

code/frontend/src/Footer.css

@@ -1,8 +1,3 @@
-:root {
-  --Rotkehlchen-gray: #e7ecf2;
-  --Rotkehlchen-brown1: #a28d7a;
-  --Rotkehlchen-orange-default: #e79a0e;
-}
 
 /*mobile style first*/
 .footer {
@@ -29,7 +24,7 @@
   align-items: center;
   gap: 0.5rem;            /*Gap between icon and logo */
   text-decoration: none;  /*prevents constant underline*/
-  color: black;         
+  color: black;     
   font-weight: 500;
 }
 

code/frontend/src/Footer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./Footer.css";
+import "./footer.css";
 
 function Footer() {
 

code/frontend/src/colors.css

@@ -0,0 +1,9 @@
+:root {
+    --Rotkehlchen-gray: #e7ecf2;
+    --Rotkehlchen-brown-light: #a28d7a;
+    --Rotkehlchen-brown-middle: #7F6D6D;
+    --Rotkehlchen-brown-dark: #4C4141;
+    --Rotkehlchen-yellow: #FED640;
+    --Rotkehlchen-yellow-hover: #EAC22A;
+    --Rotkehlchen-orange-default: #e79a0e;
+  }

code/frontend/src/fonts.css

@@ -0,0 +1,60 @@
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: url(../public/assets/fonts/Inter/static/Inter_24pt-Medium.ttf);
+  unicode-range: U+00-52F, U+1E00-1FFF, U+2200-22FF;
+}
+.title-h1 {
+  font-family: "Inter";
+  font-size: 2.5rem;
+  line-height: 130%;
+  letter-spacing: 3.2px;
+}
+
+.base-header-title {
+  font-family: "Lora";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 40px;
+}
+
+@media (width >= 768px) {
+  .title-h1 {
+    font-size: 4rem;
+  }
+}
+
+h1 {
+  font-family: "Inter";
+}
+@font-face {
+  font-family: "Lora";
+  font-style: normal;
+  src: url(../public/assets/fonts/Lora/Lora-VariableFont_wght.ttf);
+}
+.body-l,
+.body-m {
+  font-family: "Lora";
+}
+.body-l {
+  font-size: 1.5rem;
+  line-height: 110%;
+  letter-spacing: 1.2px;
+}
+.body-m {
+  font-size: 1rem;
+  line-height: 100%;
+  letter-spacing: 0.8px;
+}
+.footer-link {
+  font-family: "Lora";
+  font-size: 1rem;
+  line-height: 100%;
+  letter-spacing: 0.8px;
+}
+
+p {
+  font-family: "Lora";
+}

code/frontend/src/header.css

@@ -1,9 +1,3 @@
-:root {
-  --Rotkehlchen-gray: #e7ecf2;
-  --Rotkehlchen-brown1: #a28d7a;
-  --Rotkehlchen-orange-default: #e79a0e;
-}
-
 .base-header {
   width: 100vw;
   display: flex;
@@ -11,7 +5,7 @@
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
-  border-bottom: 3px solid var(--Rotkehlchen-brown1);
+  border-bottom: 3px solid var(--Rotkehlchen-brown-light);
   background: var(--Rotkehlchen-gray);
   position: fixed;
   top: 0;
@@ -24,12 +18,9 @@
   flex-direction: column;
   justify-content: center;
   flex-shrink: 0;
+
   color: var(--Rotkehlchen-orange-default);
   text-align: center;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 40px;
 }
 
 .base-header-icon {