Code-311 · Code-311 · Mar 10, 2026 · Mar 10, 2026 · Mar 10, 2026
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ An ASP.NET Core MVC (.NET 8) website focused on explaining why complex organizat
 ## Stack
 - ASP.NET Core MVC + Razor Views
 - Plain CSS (design tokens + responsive layout)
-- Vanilla JavaScript (theme/accent controls + restrained reveal motion)
+- Vanilla JavaScript (theme control + restrained reveal motion)
 
 ## Sitemap
 - /
@@ -28,7 +28,6 @@ dotnet run
 ## UI behavior
 - System color mode is respected by default (`prefers-color-scheme`).
 - Users can override light/dark mode in the header; preference is saved in `localStorage`.
-- Users can switch among curated accent colors; preference is saved in `localStorage`.
 - Motion is subtle and respects `prefers-reduced-motion`.
 
 ## CI/CD

diff --git a/Views/Shared/_Footer.cshtml b/Views/Shared/_Footer.cshtml
@@ -1,3 +1,3 @@
 <footer class="site-footer">
-    <p>Manpreet Singh · How organizations really work.</p>
+    <p><img src="~/img/Logo-Out.svg" alt="" class="footer-logo" /> Manpreet Singh · How organizations really work.</p>
 </footer>
diff --git a/Views/Shared/_Header.cshtml b/Views/Shared/_Header.cshtml
@@ -1,6 +1,9 @@
 <header class="site-header" id="top">
     <div class="header-wrap">
-        <a class="wordmark" asp-controller="Home" asp-action="Index">MANPREET SINGH</a>
+        <a class="wordmark" asp-controller="Home" asp-action="Index" aria-label="Manpreet Singh home">
+            <img src="~/img/Logo-Out.svg" alt="" class="brand-logo" />
+            <span>MANPREET SINGH</span>
+        </a>
         <nav aria-label="Main">
             <ul class="main-nav">
                 <li><a asp-controller="Home" asp-action="Index">Home</a></li>
@@ -14,11 +17,6 @@
         </nav>
         <div class="header-controls" aria-label="Display controls">
             <button type="button" class="toggle-btn" data-theme-toggle aria-label="Toggle light and dark theme">Theme</button>
-            <div class="accent-switch" role="group" aria-label="Accent color switcher">
-                <button type="button" data-accent-option="graphite" aria-label="Graphite accent"></button>
-                <button type="button" data-accent-option="indigo" aria-label="Indigo accent"></button>
-                <button type="button" data-accent-option="oxide" aria-label="Oxide accent"></button>
-            </div>
         </div>
     </div>
 </header>
diff --git a/Views/Shared/_Hero.cshtml b/Views/Shared/_Hero.cshtml
@@ -1,7 +1,7 @@
 @model HomePageViewModel
 <section class="hero section-reveal" aria-labelledby="hero-thesis">
     <div class="identity-block">
-        <p class="ms-mark" aria-hidden="true">MS</p>
+        <img src="~/img/Logo-Out.svg" alt="" class="hero-logo" />
         <p class="identity-name">manpreet singh</p>
     </div>
     <div class="thesis-block">

diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="system" data-accent="graphite">
+<html lang="en" data-theme="system">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css
@@ -5,7 +5,7 @@
   --muted: #5b5b5b;
   --border: #16161633;
   --accent: #2b2b2b;
-  --accent-2: #4a4a4a;
+  --logo-filter: none;
   --space-1: clamp(0.6rem, 0.55rem + 0.2vw, 0.8rem);
   --space-2: clamp(1rem, 0.8rem + 0.5vw, 1.4rem);
   --space-3: clamp(1.8rem, 1.3rem + 1vw, 2.8rem);
@@ -20,6 +20,7 @@
     --text: #ececec;
     --muted: #a9a9a9;
     --border: #ffffff24;
+    --logo-filter: invert(1) brightness(1.1);
   }
 }
 
@@ -29,6 +30,7 @@ html[data-theme='light'] {
   --text: #111111;
   --muted: #5b5b5b;
   --border: #16161633;
+  --logo-filter: none;
 }
 
 html[data-theme='dark'] {
@@ -37,11 +39,9 @@ html[data-theme='dark'] {
   --text: #ececec;
   --muted: #a9a9a9;
   --border: #ffffff24;
+  --logo-filter: invert(1) brightness(1.1);
 }
 
-html[data-accent='graphite'] { --accent: #2b2b2b; --accent-2: #4a4a4a; }
-html[data-accent='indigo'] { --accent: #3f4fd6; --accent-2: #7a84e2; }
-html[data-accent='oxide'] { --accent: #8f4f39; --accent-2: #c47e64; }
 
 * { box-sizing: border-box; }
 html, body { margin: 0; }
@@ -93,6 +93,15 @@ body {
   font-size: 0.72rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.brand-logo {
+  width: 1.3rem;
+  height: 1.3rem;
+  filter: var(--logo-filter);
 }
 
 .main-nav {
@@ -163,18 +172,6 @@ body {
   padding: 0.35rem 0.5rem;
 }
 
-.accent-switch { display: inline-flex; gap: 0.38rem; }
-.accent-switch button {
-  width: 0.95rem;
-  height: 0.95rem;
-  border-radius: 999px;
-  border: 1px solid var(--border);
-  padding: 0;
-  background: var(--surface);
-}
-.accent-switch [data-accent-option='graphite'] { background: #3a3a3a; }
-.accent-switch [data-accent-option='indigo'] { background: #5664d8; }
-.accent-switch [data-accent-option='oxide'] { background: #a35d43; }
 
 .site-main { padding: var(--space-4) 0 var(--space-5); }
 section { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
@@ -188,10 +185,10 @@ section { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
 }
 
 .identity-block { border-top: 1px solid var(--border); padding-top: var(--space-2); }
-.ms-mark {
-  margin: 0;
-  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
-  letter-spacing: 0.06em;
+.hero-logo {
+  width: clamp(3rem, 2.4rem + 1.7vw, 4.3rem);
+  height: auto;
+  filter: var(--logo-filter);
 }
 .identity-name {
   margin: 0.4rem 0 0;
@@ -297,6 +294,19 @@ h2 {
   text-transform: uppercase;
 }
 
+.site-footer p {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.footer-logo {
+  width: 0.95rem;
+  height: 0.95rem;
+  filter: var(--logo-filter);
+}
+
 .section-reveal {
   opacity: 0;
   transform: translateY(12px);

diff --git a/wwwroot/img/Logo-Out.svg b/wwwroot/img/Logo-Out.svg
diff --git a/wwwroot/js/site.js b/wwwroot/js/site.js
@@ -1,7 +1,6 @@
 (() => {
   const root = document.documentElement;
   const themeKey = 'ms-theme';
-  const accentKey = 'ms-accent';
   const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
   const storedTheme = localStorage.getItem(themeKey);
@@ -11,11 +10,6 @@
     root.setAttribute('data-theme', 'system');
   }
 
-  const storedAccent = localStorage.getItem(accentKey);
-  if (storedAccent) {
-    root.setAttribute('data-accent', storedAccent);
-  }
-
   const themeButton = document.querySelector('[data-theme-toggle]');
   themeButton?.addEventListener('click', () => {
     const current = root.getAttribute('data-theme');
@@ -24,15 +18,6 @@
     localStorage.setItem(themeKey, next);
   });
 
-  document.querySelectorAll('[data-accent-option]').forEach((button) => {
-    button.addEventListener('click', () => {
-      const accent = button.getAttribute('data-accent-option');
-      if (!accent) return;
-      root.setAttribute('data-accent', accent);
-      localStorage.setItem(accentKey, accent);
-    });
-  });
-
   if (prefersReducedMotion) {
     document.querySelectorAll('.section-reveal').forEach((item) => item.classList.add('is-visible'));
     return;