CodeLabsAI29 · malavya1411 · Jul 13, 2026 · Jul 13, 2026
diff --git a/README.md b/README.md
@@ -1,6 +1,10 @@
-# 📬 InboxOS — The AI Inbox Operating System
+<p align="center">
+  <img src="logo.svg" alt="INBOXOS - The Inbox Operating System" width="380" />
+</p>
 
-**Not an email client. A decision + execution layer that reads your inbox, understands what matters, and acts on it automatically.**
+<p align="center">
+  <strong>Not an email client. A decision + execution layer that reads your inbox, understands what matters, and acts on it automatically.</strong>
+</p>
 
 <p align="center">
   <img src="https://img.shields.io/badge/Python-3.11%2B-blue?style=for-the-badge&logo=python&logoColor=white" alt="Python Version" />

diff --git a/frontend/index.html b/frontend/index.html
@@ -6,10 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="InboxOS is an open-source AI email operating system that reads, understands, prioritizes, and acts on your inbox automatically." />
     <title>InboxOS — AI Email Operating System</title>
-    <!-- Google Fonts Inter -->
+    <!-- Google Fonts Inter & Oswald -->
     <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@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Oswald:wght@700&display=swap" rel="stylesheet">
   </head>
   <body class="bg-bg-base text-gray-100 min-h-screen">
     <div id="root"></div>

diff --git a/frontend/src/components/AuthLayout.tsx b/frontend/src/components/AuthLayout.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
-  Sparkles,
   Inbox,
   Cpu,
   Zap,
@@ -11,6 +10,7 @@ import {
   Sun,
   Moon,
 } from 'lucide-react';
+import { Logo } from './Logo';
 
 interface Testimonial {
   text: string;
@@ -143,19 +143,16 @@ export const AuthLayout: React.FC<AuthLayoutProps> = ({ children }) => {
           className="absolute bottom-[20%] left-[6%] w-24 h-24 rounded-[22px] bg-white/30 dark:bg-white/5 border border-white/40 dark:border-white/10 backdrop-blur-md shadow-[0_4px_24px_rgba(0,0,0,0.01)] pointer-events-none"
         />
 
-        {/* Branding */}
         <div className="flex items-center justify-between z-10 relative">
           <div className="flex items-center gap-3">
-            <div className="flex items-center justify-center w-[34px] h-[34px] rounded-[14px] bg-[#5F6B38] shadow-sm">
-              <Sparkles size={16} strokeWidth={1.5} className="text-white" />
-            </div>
+            <Logo iconOnly size={34} className="shrink-0" />
             <div>
-              <h2 className="text-sm font-bold tracking-tight text-[#1D1D1D] dark:text-zinc-100 leading-none">
+              <h2 
+                className="text-[17px] font-bold tracking-tight text-[#1D1D1D] dark:text-zinc-100 leading-none"
+                style={{ fontFamily: "'Oswald', sans-serif", letterSpacing: '-0.3px' }}
+              >
                 InboxOS
               </h2>
-              <span className="text-[9px] font-bold text-[#5F6B38] tracking-widest uppercase block mt-0.5">
-                AI Operating System
-              </span>
             </div>
           </div>
           <span className="text-[10px] font-bold px-3 py-1 bg-white dark:bg-zinc-800 border border-[#EAE5DA] dark:border-zinc-700 text-[#6B7280] dark:text-zinc-400 rounded-full shadow-sm">

diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
@@ -7,6 +7,7 @@ import {
   useTransform,
 } from 'framer-motion';
 import { Avatar } from './Avatar';
+import { Logo } from './Logo';
 import {
   Sparkles,
   Inbox,
@@ -419,16 +420,14 @@ export const LandingPage: React.FC = () => {
             className="flex items-center gap-3 cursor-pointer select-none"
             onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
           >
-            <div className="flex items-center justify-center w-[34px] h-[34px] rounded-[14px] bg-[#5F6B38] shadow-sm transition-transform duration-200 hover:scale-105 active:scale-95">
-              <Sparkles size={16} strokeWidth={1.5} className="text-white" />
-            </div>
+            <Logo iconOnly size={34} className="shrink-0 transition-transform duration-200 hover:scale-105 active:scale-95" />
             <div className="flex flex-col justify-center">
-              <h1 className="text-sm font-bold tracking-tight text-[#1D1D1D] leading-none">
+              <h1 
+                className="text-[17px] font-bold tracking-tight text-[#1D1D1D] leading-none"
+                style={{ fontFamily: "'Oswald', sans-serif", letterSpacing: '-0.3px' }}
+              >
                 InboxOS
               </h1>
-              <span className="text-[9px] font-bold text-[#5F6B38] tracking-widest uppercase block mt-0.5">
-                AI Operating System
-              </span>
             </div>
           </div>
 
@@ -2282,14 +2281,13 @@ export const LandingPage: React.FC = () => {
                 className="flex items-center gap-3 cursor-pointer select-none"
                 onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
               >
-                <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-[#5F6B38] shadow-sm">
-                  <Sparkles
-                    size={14}
-                    strokeWidth={1.5}
-                    className="text-white"
-                  />
-                </div>
-                <h4 className="text-sm font-bold text-[#1D1D1D]">InboxOS</h4>
+                <Logo iconOnly size={32} className="shrink-0" />
+                <h4 
+                  className="text-[17px] font-bold text-[#1D1D1D]"
+                  style={{ fontFamily: "'Oswald', sans-serif", letterSpacing: '-0.3px' }}
+                >
+                  InboxOS
+                </h4>
               </div>
 
               {/* Company description */}

diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+
+interface LogoProps {
+  /** Renders only the geometric envelope icon without typography */
+  iconOnly?: boolean;
+  /** If false, renders with the dark background (#1E1E1E) and white typography, otherwise transparent */
+  transparent?: boolean;
+  /** Custom class for styling the outer container */
+  className?: string;
+  /** Width size override (e.g. "40px", 40) */
+  size?: number | string;
+}
+
+export const Logo: React.FC<LogoProps> = ({
+  iconOnly = false,
+  transparent = true,
+  className = '',
+  size,
+}) => {
+  // If iconOnly, the viewBox wraps only the envelope geometry centered in the 1024x544 canvas.
+  // The envelope bounds are approximately min-x: 417, min-y: 138, width: 192, height: 148.
+  const viewBox = iconOnly ? '417 138 192 148' : '0 0 1024 450';
+
+  // Set dimensions based on size or fallback to defaults.
+  // Using width: size and height: auto ensures the browser computes the height dynamically
+  // and maintains the exact vector aspect ratio without letterboxing/squishing.
+  const style: React.CSSProperties = size !== undefined ? {
+    width: size,
+    height: 'auto',
+  } : {};
+
+  return (
+    <div 
+      className={`inline-flex items-center justify-center ${className}`}
+      style={style}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={viewBox}
+        aria-label="INBOXOS - The Inbox Operating System"
+        role="img"
+        className="w-full h-auto select-none"
+      >
+        {/* Render dark background only if transparent is false and we are displaying the full logo */}
+        {!transparent && !iconOnly && (
+          <rect width="1024" height="450" fill="#1E1E1E" />
+        )}
+
+        {/* Exact Paths from the provided logo.svg */}
+        <g>
+          {/* Chevron Path 1 */}
+          <path 
+            d="M478.491 212.532C459.411 198.222 440.652 184.082 421.791 170.079C419.096 168.078 417.896 165.882 418.023 162.527C418.236 156.87 418.045 151.198 418.119 145.534C418.144 143.612 417.471 141.111 419.679 140.15C422.009 139.137 424.578 139.429 426.772 141.095C430.222 143.713 433.701 146.293 437.142 148.923C461.099 167.233 485.098 185.489 508.942 203.946C512.012 206.322 513.918 206.4 517.025 204.005C543.808 183.356 570.734 162.894 597.625 142.384C598.68 141.579 599.711 140.638 600.912 140.146C605.573 138.239 607.995 139.844 608.037 144.793C608.089 150.958 608.008 157.124 608.107 163.288C608.151 166.042 607.098 167.976 604.893 169.624C575.543 191.569 546.207 213.534 516.949 235.601C514.077 237.767 511.993 237.901 509.084 235.641C499.089 227.873 488.897 220.358 478.491 212.532Z" 
+            fill="#00CB80"
+          />
+          {/* Base Path 2 */}
+          <path 
+            d="M508.678 245.349C511.745 248.378 514.218 247.864 517.21 245.492C523.727 240.327 530.584 235.593 537.193 230.539C539.607 228.693 541.364 228.724 543.66 230.861C561.445 247.415 579.336 263.854 597.172 280.354C598.091 281.204 599.425 281.855 599.322 283.927C541.927 283.927 484.549 283.927 425.689 283.927C431.885 278.061 437.079 273.047 442.378 268.147C455.454 256.057 468.692 244.139 481.604 231.876C484.91 228.736 487.208 228.983 490.462 231.587C496.306 236.266 502.404 240.628 508.678 245.349Z" 
+            fill="#5C5656"
+          />
+          {/* Base Path 3 */}
+          <path 
+            d="M418.216 275.814C418.139 243.414 418.139 211.389 418.139 179.364C418.66 179.108 419.182 178.852 419.704 178.596C439.229 193.298 458.755 208.001 478.849 223.132C470.526 230.928 462.943 238.116 455.266 245.202C444.507 255.133 433.716 265.031 422.819 274.812C421.743 275.777 420.783 279.111 418.216 275.814Z" 
+            fill="#5C5656"
+          />
+          {/* Base Path 4 */}
+          <path 
+            d="M607.986 210C607.985 232.706 607.985 254.912 607.985 276.843C605.678 277.572 604.959 276.445 604.159 275.708C586.41 259.357 568.704 242.959 550.927 226.638C548.567 224.471 547.465 222.909 550.751 220.456C568.488 207.216 586.113 193.825 603.79 180.503C604.562 179.922 605.465 179.515 607.734 178.2C608.312 189.258 607.849 199.394 607.986 210Z" 
+            fill="#5C5656"
+          />
+          {/* Chevron Path 5 */}
+          <path 
+            d="M473.205 143.67C485.413 152.97 497.377 161.987 509.185 171.204C512.024 173.421 514.07 173.509 516.973 171.236C529.029 161.797 541.331 152.671 553.401 143.249C556.586 140.763 559.766 139.452 563.877 139.613C570.921 139.888 577.984 139.689 584.997 139.689C585.176 142.505 583.476 142.966 582.372 143.808C560.658 160.347 538.887 176.809 517.231 193.423C514.293 195.677 512.195 196.084 509.025 193.647C486.726 176.499 464.277 159.548 441.886 142.519C441.382 142.136 441.007 141.581 440.593 141.129C441.46 139.019 443.203 139.756 444.529 139.734C450.188 139.64 455.86 139.911 461.506 139.624C465.926 139.399 469.716 140.357 473.205 143.67Z" 
+            fill="#00CB80"
+          />
+          {/* Chevron Path 6 */}
+          <path 
+            d="M500.153 153.887C494.422 149.501 488.978 145.327 483.535 141.153C483.695 140.812 483.855 140.471 484.015 140.13C503.31 140.13 522.604 140.13 541.88 140.13C542.545 141.978 541.134 142.616 540.137 143.365C532.3 149.253 524.383 155.035 516.604 160.999C514.1 162.92 512.08 163.14 509.58 161.006C506.681 158.53 503.499 156.386 500.153 153.887Z" 
+            fill="#00CB80"
+          />
+        </g>
+
+        {/* Typography (Hidden if iconOnly is true) */}
+        {!iconOnly && (
+          <g>
+            <text
+              x="512"
+              y="385"
+              textAnchor="middle"
+              className={transparent ? "font-bold fill-[#2D3436] dark:fill-zinc-100" : "font-bold fill-white"}
+              style={{
+                fontFamily: "'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+                fontWeight: 700,
+                fontSize: '110px',
+                letterSpacing: '-1.5px',
+              }}
+            >
+              INBOXOS
+            </text>
+          </g>
+        )}
+      </svg>
+    </div>
+  );
+};
diff --git a/frontend/src/components/SidebarNav.tsx b/frontend/src/components/SidebarNav.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Inbox, Settings, Plus, X, Sparkles } from 'lucide-react';
+import { Inbox, Settings, Plus, X } from 'lucide-react';
 import { useCompose } from '../context/ComposeContext';
+import { Logo } from './Logo';
 
 export interface SidebarNavProps {
   onCloseMobileMenu?: () => void;
@@ -75,19 +76,15 @@ export const SidebarNav: React.FC<SidebarNavProps> = ({
         className={`flex items-center justify-between ${isMobile ? 'pb-4 mb-2' : 'px-5 py-5'}`}
       >
         <div className="flex items-center gap-2.5">
-          {/* Logo mark: olive rounded */}
-          <div
-            className="flex items-center justify-center w-8 h-8 rounded-[10px] shrink-0"
-            style={{ backgroundColor: 'var(--color-primary)' }}
-          >
-            <Sparkles size={15} className="text-white" fill="white" />
-          </div>
+          {/* Logo mark */}
+          <Logo iconOnly size={32} className="shrink-0" />
           <div className="text-left">
             <h1
-              className="text-[15px] leading-none font-bold tracking-tight dark:text-zinc-100"
+              className="text-[17px] leading-none font-bold tracking-tight dark:text-zinc-100"
               style={{
-                fontFamily: 'var(--font-display)',
+                fontFamily: "'Oswald', sans-serif",
                 color: 'var(--color-ink)',
+                letterSpacing: '-0.3px',
               }}
             >
               InboxOS

diff --git a/logo.svg b/logo.svg
diff --git a/package-lock.json b/package-lock.json