VectorInstitute
diff --git a/‎services/onboarding-status-web/app/globals.css‎
Lines changed: 42 additions & 8 deletions b/‎services/onboarding-status-web/app/globals.css‎
Lines changed: 42 additions & 8 deletions
diff --git a/‎services/onboarding-status-web/app/layout.tsx‎
Lines changed: 9 additions & 5 deletions b/‎services/onboarding-status-web/app/layout.tsx‎
Lines changed: 9 additions & 5 deletions
@@ -2,40 +2,74 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Vector Institute Brand Variables */
 :root {
+  /* Primary Colors */
+  --vector-magenta: #EB088A;
+  --vector-black: #000000;
+  --vector-grey: #E9E8E8;
+
+  /* Secondary Colors */
+  --vector-cobalt: #313CFF;
+  --vector-violet: #8A25C9;
+  --vector-turquoise: #48C0D9;
+  --vector-tangerine: #FF9E00;
+  --vector-lime: #CFF933;
+
+  /* Light theme */
   --background: #ffffff;
-  --foreground: #171717;
-  --card-bg: #ffffff;
-  --border: #e5e7eb;
+  --foreground: #000000;
+  --card-bg: rgba(255, 255, 255, 0.95);
+  --border: #E9E8E8;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
-    --foreground: #ededed;
-    --card-bg: #1a1a1a;
+    --foreground: #ffffff;
+    --card-bg: rgba(26, 26, 26, 0.95);
     --border: #2a2a2a;
   }
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
   min-height: 100vh;
 }
 
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
+
+  /* Vector Institute gradient backgrounds */
+  .bg-vector-gradient {
+    background: linear-gradient(135deg, #EB088A 0%, #8A25C9 50%, #313CFF 100%);
+  }
+
+  .bg-vector-gradient-subtle {
+    background: linear-gradient(135deg,
+      rgba(235, 8, 138, 0.1) 0%,
+      rgba(138, 37, 201, 0.1) 50%,
+      rgba(49, 60, 255, 0.1) 100%);
+  }
 }
 
 @layer components {
   .card {
     background: var(--card-bg);
     border: 1px solid var(--border);
-    border-radius: 0.75rem;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+    border-radius: 1rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+  }
+
+  .card-highlight {
+    background: var(--card-bg);
+    border: 2px solid var(--vector-magenta);
+    border-radius: 1rem;
+    box-shadow: 0 4px 6px -1px rgba(235, 8, 138, 0.2), 0 2px 4px -2px rgba(235, 8, 138, 0.2);
   }
 }
@@ -1,12 +1,16 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { Open_Sans } from 'next/font/google'
 import './globals.css'
 
-const inter = Inter({ subsets: ['latin'] })
+const openSans = Open_Sans({
+  subsets: ['latin'],
+  weight: ['400', '600', '700'],
+  variable: '--font-open-sans',
+})
 
 export const metadata: Metadata = {
-  title: 'Participant Onboarding Status',
-  description: 'View participant onboarding status and team assignments',
+  title: 'Vector Institute - Onboarding Status',
+  description: 'Track technical onboarding progress for Vector Institute participants and facilitators',
 }
 
 export default function RootLayout({
@@ -16,7 +20,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={openSans.className}>{children}</body>
     </html>
   )
 }