foundersandcoders
diff --git a/‎app/globals.css‎
Lines changed: 0 additions & 77 deletions b/‎app/globals.css‎
Lines changed: 0 additions & 77 deletions
diff --git a/‎index.html‎
Lines changed: 6 additions & 0 deletions b/‎index.html‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎public/lift_logo.png‎
3.22 KB b/‎public/lift_logo.png‎
3.22 KB
diff --git a/‎src/index.css‎
Lines changed: 30 additions & 17 deletions b/‎src/index.css‎
Lines changed: 30 additions & 17 deletions
diff --git a/‎tailwind.config.js‎
Lines changed: 16 additions & 0 deletions b/‎tailwind.config.js‎
Lines changed: 16 additions & 0 deletions
@@ -6,6 +6,12 @@
     <title>Nassport</title>
   </head>
   <body>
+    <header class="flex items-center p-4 bg-[color:var(--primary)]">
+      <img src="/lift_logo.png" alt="LIFT Logo" class="h-10 mr-4" />
+      <h1 class="text-xl font-bold text-[color:var(--primary-foreground)]">
+        Leading Inclusive Futures through Technology
+      </h1>
+    </header>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 
@@ -13,18 +13,32 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
+    /* Brand colours from LIFT Guidelines */
+    --brand-pink: #d600a8;
+    --brand-black: #ed7112;
+    --brand-white: #ffffff;
+    --brand-green: #29e2a3;
+    --brand-teal: #00a7a8;
+    --brand-blue: #2235e2;
+    --brand-orange: #ec5d2a;
+    --brand-yellow: #ffcb00;
+    --brand-purple: #7900d6;
+    --brand-darkPurple: #4d1b9b;
+
+    /* Set primary, secondary and accent using the brand colours */
+    --primary: var(--brand-pink);
+    --primary-foreground: var(--brand-white);
+
+    --secondary: var(--brand-black);
+    --secondary-foreground: var(--brand-white);
+
+    --accent: var(--brand-blue);
+    --accent-foreground: var(--brand-white);
+
+    /* Retain existing variables for muted, destructive etc. */
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
@@ -45,17 +59,17 @@
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: var(--brand-pink);
+    --primary-foreground: var(--brand-white);
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: var(--brand-darkPurple);
+    --secondary-foreground: var(--brand-white);
 
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent: var(--brand-blue);
+    --accent-foreground: var(--brand-white);
 
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
@@ -71,7 +85,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans;
   }
 }
-
 
@@ -49,6 +49,19 @@ export default {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        // LIFT Brand Colors
+        brand: {
+          pink: '#D600A8',
+          black: '#ED7112',
+          white: '#FFFFFF',
+          green: '#29E2A3',
+          teal: '#00A7A8',
+          blue: '#2235E2',
+          orange: '#EC5D2A',
+          yellow: '#FFCB00',
+          purple: '#7900D6',
+          darkPurple: '#4D1B9B',
+        },
       },
       borderRadius: {
         lg: 'var(--radius)',
@@ -69,6 +82,9 @@ export default {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
       },
+      fontFamily: {
+        sans: ['Metropolis', 'Arial', 'sans-serif'],
+      },
     },
   },
   plugins: [require('tailwindcss-animate')],