Code-4-Community · janekamata · Feb 10, 2026 · Feb 5, 2026 · Feb 5, 2026 · Feb 5, 2026
diff --git a/frontend/index.html b/frontend/index.html
@@ -5,6 +5,10 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <!-- Non-web-safe fonts: load from Google Fonts so they render consistently across devices. Swap font by changing the href and --font-sans in index.css. -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/src/main-page/grants/grant-details/GrantDetails.tsx b/frontend/src/main-page/grants/grant-details/GrantDetails.tsx
diff --git a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
diff --git a/frontend/src/main-page/grants/new-grant/UserDropdown.tsx b/frontend/src/main-page/grants/new-grant/UserDropdown.tsx
@@ -49,7 +49,7 @@ const UserDropdown: React.FC<UserDropdownProps> = ({
     <div ref={dropdownRef} className="user-dropdown-container">
       {/* Input field that opens dropdown */}
       <input
-        className="user-dropdown-input font-family-helvetica"
+        className="user-dropdown-input"
         placeholder={placeholder}
         value={selectedUser ? selectedUser.name : searchTerm}
         onChange={(e) => {

diff --git a/frontend/src/main-page/grants/styles/CalendarDropdown.css b/frontend/src/main-page/grants/styles/CalendarDropdown.css
@@ -12,7 +12,7 @@
     background-color: white;
     cursor: pointer;
     font-size: 1rem;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-sans);
     width: 100%;
     height: 42px;
 }

diff --git a/frontend/src/main-page/grants/styles/NewGrantModal.css b/frontend/src/main-page/grants/styles/NewGrantModal.css
@@ -85,7 +85,7 @@
   grid-column: 1 / span 2; /* let the title span across both columns */
   margin-top: 0;
   margin-bottom: 1rem;
-  font-size: 1.8rem;
+  font-size: var(--font-size-2xl);
   font-weight: 600;
   text-align: center;
   text-align: left;
@@ -97,7 +97,7 @@
 .modal-content textarea {
   width: 100%;
   padding: 0.6rem;
-  font-size: 1rem;
+  font-size: var(--font-size-base);
   margin-bottom: 0.25rem;
   border: 0.075rem solid black;
   border-radius: 15px;
@@ -177,7 +177,7 @@
   border: black 0.075rem solid;
   color: black;
   padding: 0.75rem 1.25rem;
-  font-size: 1rem;
+  font-size: var(--font-size-base);
   border-radius: 15px;
   cursor: pointer;
   transition: background-color 0.2s ease;

diff --git a/frontend/src/main-page/grants/styles/UserDropdown.css b/frontend/src/main-page/grants/styles/UserDropdown.css
@@ -14,6 +14,7 @@
   padding: 0 12px;
   cursor: pointer;
   color: var(--color-grey-800);
+  font-size: 16px;
 }
 
 .user-dropdown-input:focus {
@@ -64,7 +65,6 @@
   font-size: 14px;
   color: gray;
   margin-top: 2px;
-  font-family: helvetica;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
@@ -2,7 +2,30 @@
 @tailwind components;
 @tailwind utilities;
 
+/*
+ * Design style guide: global font definitions (single source of truth).
+ * - Font family and size baseline live here. Non-web-safe fonts are loaded via
+ *   Google Fonts in index.html (see https://getdevdone.com/blog/non-web-fonts.html).
+ * - To swap fonts: (1) update the link in index.html to the new font’s Google Fonts URL,
+ *   (2) set --font-sans (or --font-serif) in :root below to the new family name.
+ */
 :root {
+  /* Font families: use CSS vars so swapping is a one-line change. */
+  --font-sans: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;
+  --font-serif: Georgia, "Times New Roman", serif;
+
+  /* Size baseline and scale (all relative to base for easy swapping). */
+  --font-size-base: 1rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-hero: 3.2rem;
+
   --color-green-dark: #119548;
   --color-green: #5ab911;
   --color-green-light: #c6fbd3;
@@ -52,7 +75,8 @@
   --color-black: #000000;
   --color-white: #ffffff;
 
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-base);
   line-height: 1.5;
   font-weight: 400;
 
@@ -84,17 +108,17 @@ body {
 }
 
 h1 {
-  font-size: 3.2em;
+  font-size: var(--font-size-hero);
   line-height: 1.1;
 }
 
 button {
   border-radius: 15px;
   border: 0.1rem solid transparent;
   padding: 0.6em 1.2em;
-  font-size: 1em;
+  font-size: var(--font-size-base);
   font-weight: 500;
-  font-family: inherit;
+  font-family: var(--font-sans);
   background-color: black;
   cursor: pointer;
   transition: border-color 0.25s;

diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css
@@ -22,9 +22,8 @@
 
 
 .popup-header h3 {
-  font-size: 1.1rem;
+  font-size: var(--font-size-lg);
   font-weight: 600;
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   color: black;
   margin: 0;
 }
@@ -33,7 +32,7 @@
 .close-button {
   background: none;
   border: none;
-  font-size: 1rem;
+  font-size: var(--font-size-base);
   cursor: pointer;
   color: gray;
 }
@@ -58,7 +57,7 @@
   padding: 8px 10px;
   padding-right: 35px;
   margin-bottom: 2px;
-  font-size: 0.9rem;
+  font-size: var(--font-size-sm);
   transition: background-color 0.2s ease;
   display: flex;
 }
@@ -83,13 +82,13 @@
 
 .notification-title {
   font-weight: 600;
-  font-size: 13px;
+  font-size: var(--font-size-sm);
   color: black;
   line-height: 1.15;
 }
 
 .notification-message {
-  font-size: 12.5px;
+  font-size: var(--font-size-xs);
   color: var(--color-grey-600);
   margin-top: 4px;
   line-height: 1.2;
@@ -105,7 +104,7 @@
   right: 10px;
   color: gray;
   cursor: pointer;
-  font-size: 0.9rem
+  font-size: var(--font-size-sm);
 }
 
 .notification-trash-icon:hover {

diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
@@ -71,10 +71,20 @@ export default {
       black: "#000000",
     },
     fontFamily: {
-      sans: ["Montserrat", "sans-serif"],
-      serif: ["Georgia", "serif"],
+      sans: ["var(--font-sans)", "sans-serif"],
+      serif: ["var(--font-serif)", "serif"],
     },
     extend: {
+      fontSize: {
+        xs: ["var(--font-size-xs)", { lineHeight: "1rem" }],
+        sm: ["var(--font-size-sm)", { lineHeight: "1.25rem" }],
+        base: ["var(--font-size-base)", { lineHeight: "1.5rem" }],
+        lg: ["var(--font-size-lg)", { lineHeight: "1.75rem" }],
+        xl: ["var(--font-size-xl)", { lineHeight: "1.75rem" }],
+        "2xl": ["var(--font-size-2xl)", { lineHeight: "2rem" }],
+        "3xl": ["var(--font-size-3xl)", { lineHeight: "2.25rem" }],
+        "4xl": ["var(--font-size-4xl)", { lineHeight: "2.5rem" }],
+      },
       spacing: {
         "8xl": "96rem",
         "9xl": "128rem",