Finished adding typography and test pages

src/components/TestSquare.tsx

@@ -0,0 +1,9 @@
+export interface TestSquareProps {
+  className: string;
+}
+
+function TestSquare({ className }: TestSquareProps) {
+  return <div className={"w-[40px] h-[40px] " + className}></div>;
+}
+
+export default TestSquare;

src/index.css

@@ -4,26 +4,71 @@
 
 @font-face {
   font-family: "Proxima Nova";
-  src: url(@/assets/fonts/proximanova-regular.otf);
+  src: url(@/assets/fonts/ProximaNovaRegular.otf);
   font-weight: normal;
 }
 
 @font-face {
   font-family: "Proxima Nova";
-  src: url(@/assets/fonts/proximanova-semibold.otf);
+  src: url(@/assets/fonts/ProximaNovaSemibold.otf);
   font-weight: bold;
 }
 
 @font-face {
-  font-family: "Proxima Nova";
-  src: url(@/assets/fonts/proximanova-regularit.otf);
+  font-family: "Helvetica Now Display";
+  src: url(@/assets/fonts/HelveticaNowDisplay-Regular.otf);
   font-weight: normal;
-  font-style: italic;
 }
 
-@font-face {
-  font-family: "Proxima Nova";
-  src: url(@/assets/fonts/proximanova-semiboldit.otf);
-  font-weight: bold;
-  font-style: italic;
+@layer base {
+  .text-display1 {
+    font-family: "Proxima Nova";
+    font-weight: bold;
+    font-size: 64px;
+  }
+  .text-display2 {
+    font-family: "Proxima Nova";
+    font-weight: bold;
+    font-size: 56px;
+  }
+  .text-h1 {
+    font-family: "Proxima Nova";
+    font-weight: bold;
+    font-size: 40px;
+  }
+  .text-h2 {
+    font-family: "Proxima Nova";
+    font-weight: bold;
+    font-size: 32px;
+  }
+  .text-h3 {
+    font-family: "Proxima Nova";
+    font-weight: bold;
+    font-size: 24px;
+  }
+  .text-h4 {
+    font-family: "Proxima Nova";
+    font-weight: bold;
+    font-size: 16px;
+  }
+  .text-body-reg {
+    font-family: "Helvetica Now Display";
+    font-weight: normal;
+    font-size: 16px;
+  }
+  .text-body-sm {
+    font-family: "Helvetica Now Display";
+    font-weight: normal;
+    font-size: 14px;
+  }
+  .text-sm {
+    font-family: "Helvetica Now Display";
+    font-weight: normal;
+    font-size: 12px;
+  }
+  .text-tiny {
+    font-family: "Helvetica Now Display";
+    font-weight: normal;
+    font-size: 10px;
+  }
 }

src/main.tsx

@@ -1,10 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);

src/routes/Test.tsx

@@ -1,8 +1,23 @@
+import TestSquare from "../components/TestSquare";
+
 function Test() {
   return (
-    <div className="flex flex-col justify-center items-center min-h-screen bg-status-red-main text-white">
-      <div className="font-display text-6xl">Display 1</div>
-      <div className="font-display text-6xl font-bold">Display 1</div>
+    <div className="flex flex-col justify-center items-center min-h-screen">
+      <div className="text-display1">Display 1</div>
+      <div className="text-display2">Display 2</div>
+      <div className="text-h1">H1 Heading</div>
+      <div className="text-h2">H2 Heading</div>
+      <div className="text-h3">H3 Heading</div>
+      <div className="text-h4">H4 Heading</div>
+      <div className="text-body-reg">Body Regular</div>
+      <div className="text-body-sm">Body Small</div>
+      <div className="text-sm">Small</div>
+      <div className="text-tiny">Tiny</div>
+      <div className="grid grid-rows-auto grid-cols-3 gap-2">
+        <TestSquare className={"bg-primary-main"} />
+        <TestSquare className={"bg-secondary-main"} />
+        <TestSquare className={"bg-accent"} />
+      </div>
     </div>
   );
 }

tailwind.config.cjs

@@ -56,6 +56,7 @@ module.exports = {
       },
       fontFamily: {
         display: ['"Proxima Nova"', "sans-serif"],
+        body: ['"Helvetica Now Display"', "sans-serif"],
       },
     },
   },