feat(web): adopt SHOC design system and shell layout (ADR 0003) (#221)

Port shoc-frontend-new dev's design system with its CSS-variable single-token-source mechanism: - src/styles/theme.css: SHOC token file ported verbatim (Montserrat/ DM Sans/JetBrains Mono, primary #1c75bc, navy #262262, full radius/ shadow/sidebar/header token layers); fonts self-hosted via @fontsource - src/lib/theme/{css-vars,mui-theme}.ts: getCssVar -> createTheme adapter mirroring SHOC's mui-theme.ts (palette, typography, shadows tuple, component overrides; MUI v9 slot renames expressed as class selectors); theme.ts is now a re-export - Shell: SHOC composition (sidebar column + sticky gradient topbar + scrolling main); sidebar 244px/76px collapse with brand header row, grouped nav, SHOC active treatment (white card + 3px accent bar); topbar 100-degree gradient, surface hamburger, gradient avatar pill - Brand: SeahavenMark + BrandLockup ported (Tailwind re-expressed as sx; wordmark subtitle localized to PROPOSAL SYSTEM) - Login: SHOC auth-card treatment (centered 384px card on #f9fafb) - Old "Sea Haven Ops" Inter/#2563EB theme and Nunito remnants removed; remaining hardcoded hexes replaced with tokens; lucide-react for shell/nav icons per SHOC convention Verify: tsc clean, 26/26 vitest, vite build OK; Playwright screenshots pixel-sampled against the extracted SHOC spec (all hard values exact, no blocking deviations).
2026-09-30 05:23:14 +00:00 · 2026-07-13 19:06:51 -04:00 · 2026-07-13 19:06:51 -04:00 · 8ce2a5cd8f
commit 8ce2a5cd8f
parent a4b09eb0ad
23 changed files with 1134 additions and 673 deletions
--- a/web/index.html
+++ b/web/index.html
@ -4,9 +4,6 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Proposal System - Sea Haven Industries</title>
-    <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>
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -10,11 +10,15 @@
      "dependencies": {
        "@emotion/react": "^11.14.0",
        "@emotion/styled": "^11.14.0",
+        "@fontsource/dm-sans": "^5.2.8",
+        "@fontsource/jetbrains-mono": "^5.2.8",
+        "@fontsource/montserrat": "^5.2.8",
        "@mui/icons-material": "^9.2.0",
        "@mui/material": "^9.1.1",
        "@reduxjs/toolkit": "^2.11.2",
        "@tanstack/react-query": "^5.101.2",
        "axios": "^1.18.1",
+        "lucide-react": "^1.24.0",
        "react": "^19.2.7",
        "react-dom": "^19.2.7",
        "react-redux": "^9.2.0",
@ -582,6 +586,33 @@
        }
      }
    },
+    "node_modules/@fontsource/dm-sans": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.2.8.tgz",
+      "integrity": "sha512-tlovG42m9ESG28WiHpLq3F5umAlm64rv0RkqTbYowRn70e9OlRr5a3yTJhrhrY+k5lftR/OFJjPzOLQzk8EfCA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/montserrat": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/montserrat/-/montserrat-5.2.8.tgz",
+      "integrity": "sha512-xTjLxSbSfCycDB0pwmNsfNvdfWPaDaRQ2LC6yt/ZI7SdvXG52zHnzNYC/09mzuAuWNJyShkteutfCoDgym56hQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.13",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@ -2943,6 +2974,15 @@
        "node": "20 || >=22"
      }
    },
+    "node_modules/lucide-react": {
+      "version": "1.24.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.24.0.tgz",
+      "integrity": "sha512-YT6mBD8lGKkg4nM39enlm94/sfJIiW0YKUT60fBy4YK8tai31ylg1VhGNWxkpSKHo9UagfnZqwIff3HTDQwXeA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/lz-string": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -13,11 +13,15 @@
  "dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
+    "@fontsource/dm-sans": "^5.2.8",
+    "@fontsource/jetbrains-mono": "^5.2.8",
+    "@fontsource/montserrat": "^5.2.8",
    "@mui/icons-material": "^9.2.0",
    "@mui/material": "^9.1.1",
    "@reduxjs/toolkit": "^2.11.2",
    "@tanstack/react-query": "^5.101.2",
    "axios": "^1.18.1",
+    "lucide-react": "^1.24.0",
    "react": "^19.2.7",
    "react-dom": "^19.2.7",
    "react-redux": "^9.2.0",
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@ -1,5 +1,5 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
-import { Box, Button, Card, CardContent, Toolbar, Typography } from '@mui/material';
+import { Box, Button, Card, CardContent, Typography } from '@mui/material';
 import PeopleIcon from '@mui/icons-material/People';
 import ProtectedRoute, { RoleGuard } from './components/ProtectedRoute';
 import Topbar from './components/Topbar';
@ -25,20 +25,21 @@ export default function App() {
        path="/*"
        element={
          <ProtectedRoute>
-            <Box sx={{ display: 'flex' }}>
-              <Topbar />
+            {/* SHOC shell composition (ADR 0003): sidebar column + [topbar / scrolling main] */}
+            <Box sx={{ display: 'flex', height: '100vh', width: '100%', overflow: 'hidden', backgroundColor: 'var(--background)' }}>
              <Sidebar />
-              <Box
-                component="main"
-                sx={{
-                  flexGrow: 1,
-                  minWidth: 0,
-                  p: 1.25,
-                  minHeight: '100vh',
-                }}
-              >
-                <Toolbar sx={{ minHeight: 64 }} />
-                <Routes>
+              <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0, height: '100vh', overflow: 'hidden' }}>
+                <Topbar />
+                <Box
+                  component="main"
+                  sx={{
+                    flex: 1,
+                    overflow: 'auto',
+                    p: 1.25,
+                    backgroundColor: 'var(--color-bg-page)',
+                  }}
+                >
+                  <Routes>
                  <Route path="/" element={<Dashboard />} />
                  <Route path="/proposals" element={<ProposalListPage />} />
                  <Route path="/proposals/new" element={<ProposalFormPage />} />
@ -55,7 +56,7 @@ export default function App() {
                      <Box sx={{ display: 'flex', justifyContent: 'center', pt: 6 }}>
                        <Card sx={{ maxWidth: 520, p: 4, textAlign: 'center' }}>
                          <CardContent>
-                            <PeopleIcon sx={{ fontSize: 48, color: '#94A3B8', mb: 2 }} />
+                            <PeopleIcon sx={{ fontSize: 48, color: 'var(--color-text-muted)', mb: 2 }} />
                            <Typography variant="h5" sx={{ mb: 1 }}>User Management</Typography>
                            <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
                              Users and roles are currently managed in AWS Cognito. Contact the system administrator to update access.
@ -75,8 +76,9 @@ export default function App() {
                    </RoleGuard>
                  } />

-                  <Route path="*" element={<Navigate to="/" replace />} />
-                </Routes>
+                    <Route path="*" element={<Navigate to="/" replace />} />
+                  </Routes>
+                </Box>
              </Box>
            </Box>
          </ProtectedRoute>
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@ -1,48 +1,45 @@
+// App shell sidebar — SHOC design system port (ADR 0003, mirrors app-sidebar.tsx).
+// Expanded 244px / collapsed 76px; brand header row; grouped nav with SHOC
+// active treatment (white card bg + shadow + 3px left accent bar).
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
+import { Drawer, Box, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import {
-  Drawer,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Toolbar,
-  Box,
-  Typography,
-  Tooltip,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import DescriptionIcon from '@mui/icons-material/Description';
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-import PeopleIcon from '@mui/icons-material/People';
-import BusinessIcon from '@mui/icons-material/Business';
-import MenuBookIcon from '@mui/icons-material/MenuBook';
+  LayoutDashboard,
+  FileText,
+  CirclePlus,
+  ClipboardList,
+  FolderOpen,
+  Building2,
+  BookOpen,
+  Users,
+  type LucideIcon,
+} from 'lucide-react';
 import { selectSidebarOpen, setSidebarOpen } from '../app/slices/uiSlice';
 import { selectUser } from '../app/slices/authSlice';
 import type { RootState } from '../app/store';
 import { DRAWER_WIDTH } from '../constants';
+import BrandLockup, { BrandMark } from './brand/BrandLockup';

-const COLLAPSED_WIDTH = 72;
+const COLLAPSED_WIDTH = 76; // --spacing-sidebar-collapsed

-const dispatcherNav = [
-  { label: 'Dashboard', path: '/', icon: <DashboardIcon fontSize="small" /> },
-  { label: 'My Proposals', path: '/proposals', icon: <DescriptionIcon fontSize="small" /> },
-  { label: 'New Proposal', path: '/proposals/new', icon: <AddCircleIcon fontSize="small" /> },
+type NavEntry = { label: string; path: string; icon: LucideIcon };
+
+const dispatcherNav: NavEntry[] = [
+  { label: 'Dashboard', path: '/', icon: LayoutDashboard },
+  { label: 'My Proposals', path: '/proposals', icon: FileText },
+  { label: 'New Proposal', path: '/proposals/new', icon: CirclePlus },
 ];

-const adminNav = [
-  { label: 'Admin Queue', path: '/admin', icon: <AdminPanelSettingsIcon fontSize="small" /> },
-  { label: 'All Proposals', path: '/admin/proposals', icon: <AssignmentIcon fontSize="small" /> },
-  { label: 'Customers', path: '/admin/customers', icon: <BusinessIcon fontSize="small" /> },
-  { label: 'Pricing Library', path: '/admin/pricing-library', icon: <MenuBookIcon fontSize="small" /> },
+const adminNav: NavEntry[] = [
+  { label: 'Admin Queue', path: '/admin', icon: ClipboardList },
+  { label: 'All Proposals', path: '/admin/proposals', icon: FolderOpen },
+  { label: 'Customers', path: '/admin/customers', icon: Building2 },
+  { label: 'Pricing Library', path: '/admin/pricing-library', icon: BookOpen },
 ];

-const sysadminNav = [
-  { label: 'Users', path: '/admin/users', icon: <PeopleIcon fontSize="small" /> },
+const sysadminNav: NavEntry[] = [
+  { label: 'Users', path: '/admin/users', icon: Users },
 ];

 const ALL_NAV_PATHS = new Set(
@ -56,6 +53,88 @@ function isNavActive(pathname: string, itemPath: string): boolean {
  return pathname.startsWith(itemPath + '/');
 }

+function NavItem({
+  item,
+  active,
+  collapsed,
+  onClick,
+}: {
+  item: NavEntry;
+  active: boolean;
+  collapsed: boolean;
+  onClick: () => void;
+}) {
+  const Icon = item.icon;
+  const row = (
+    <Box
+      component="button"
+      onClick={onClick}
+      sx={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: collapsed ? 'center' : 'flex-start',
+        gap: '12px',
+        width: '100%',
+        height: 40,
+        mb: '4px',
+        px: collapsed ? 0 : '12px',
+        border: 'none',
+        cursor: 'pointer',
+        borderRadius: 'var(--radius-md)',
+        fontFamily: 'var(--font-sans)',
+        fontSize: 'var(--text-base)',
+        fontWeight: active ? 600 : 500,
+        textAlign: 'left',
+        color: active ? 'var(--primary)' : 'var(--foreground)',
+        backgroundColor: active ? 'var(--color-sidebar-item-active-bg)' : 'transparent',
+        boxShadow: active ? 'var(--color-sidebar-item-active-shadow)' : 'none',
+        transition: 'all var(--duration-fast) var(--ease-default)',
+        '&:hover': active
+          ? {}
+          : {
+              color: 'var(--primary-hover)',
+              backgroundColor: 'var(--sidebar-accent)',
+            },
+        '& svg': {
+          color: active ? 'var(--primary)' : 'var(--muted-foreground)',
+          flexShrink: 0,
+        },
+        '&:hover svg': active ? {} : { color: 'var(--primary-hover)' },
+      }}
+    >
+      {active && (
+        <Box
+          sx={{
+            position: 'absolute',
+            left: 0,
+            top: '8px',
+            bottom: '8px',
+            width: '3px',
+            borderRadius: '0 3px 3px 0',
+            backgroundColor: 'var(--primary)',
+          }}
+        />
+      )}
+      <Icon size={19} />
+      {!collapsed && (
+        <Box component="span" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {item.label}
+        </Box>
+      )}
+    </Box>
+  );
+
+  if (collapsed) {
+    return (
+      <Tooltip key={item.path} title={item.label} placement="right" arrow>
+        {row}
+      </Tooltip>
+    );
+  }
+  return row;
+}
+
 export default function Sidebar() {
  const navigate = useNavigate();
  const location = useLocation();
@ -65,14 +144,14 @@ export default function Sidebar() {
  const user = useSelector((state: RootState) => selectUser(state));

  const isMobile = useMediaQuery(theme.breakpoints.down('md')); // <900px
-  const isCollapsed = useMediaQuery(theme.breakpoints.between('md', 'lg')); // 900–1200px

  const isAdmin = user?.role === 'Admin' || user?.role === 'SysAdmin';
  const isSysAdmin = user?.role === 'SysAdmin';
-  const navItems = dispatcherNav;

-  const drawerVariant = isMobile ? 'temporary' : 'persistent';
-  const effectiveWidth = isCollapsed ? COLLAPSED_WIDTH : DRAWER_WIDTH;
+  // Desktop: hamburger toggles expanded (244) ↔ collapsed (76).
+  // Mobile: temporary drawer, hamburger opens/closes it.
+  const collapsed = !isMobile && !open;
+  const width = collapsed ? COLLAPSED_WIDTH : DRAWER_WIDTH;

  const handleNavClick = (path: string) => {
    navigate(path);
@ -81,107 +160,69 @@ export default function Sidebar() {
    }
  };

-  const handleDrawerClose = () => {
-    dispatch(setSidebarOpen(false));
-  };
+  const groupLabel = (label: string) => (
+    <Box className="text-nav-group" sx={{ px: '12px', pt: '10px', pb: '6px' }}>
+      {label}
+    </Box>
+  );

-  const renderNavItem = (item: { label: string; path: string; icon: React.ReactNode }) => {
-    const button = (
-      <ListItemButton
-        key={item.path}
-        selected={isNavActive(location.pathname, item.path)}
-        onClick={() => handleNavClick(item.path)}
-        sx={{
-          py: 1,
-          justifyContent: isCollapsed ? 'center' : 'flex-start',
-          minHeight: 40,
-        }}
-      >
-        <ListItemIcon
-          sx={{
-            minWidth: isCollapsed ? 0 : 40,
-            justifyContent: 'center',
-          }}
-        >
-          {item.icon}
-        </ListItemIcon>
-        {!isCollapsed && (
-          <ListItemText primary={item.label} slotProps={{ primary: { sx: { fontSize: '13px' } } }} />
-        )}
-      </ListItemButton>
-    );
+  const groupDivider = (
+    <Box sx={{ height: '1px', mx: '14px', my: '10px', backgroundColor: 'var(--color-sidebar-border)' }} />
+  );

-    if (isCollapsed) {
-      return (
-        <Tooltip key={item.path} title={item.label} placement="right" arrow>
-          {button}
-        </Tooltip>
-      );
-    }
-
-    return button;
-  };
+  const renderGroup = (label: string, items: NavEntry[], first: boolean) => (
+    <>
+      {collapsed ? (first ? null : groupDivider) : groupLabel(label)}
+      {items.map((item) => (
+        <NavItem
+          key={item.path}
+          item={item}
+          active={isNavActive(location.pathname, item.path)}
+          collapsed={collapsed}
+          onClick={() => handleNavClick(item.path)}
+        />
+      ))}
+    </>
+  );

  return (
    <Drawer
-      variant={drawerVariant}
-      open={open}
-      onClose={handleDrawerClose}
+      variant={isMobile ? 'temporary' : 'permanent'}
+      open={isMobile ? open : true}
+      onClose={() => dispatch(setSidebarOpen(false))}
      sx={{
-        width: open ? effectiveWidth : 0,
+        width: isMobile ? 0 : width,
        flexShrink: 0,
-        transition: 'width 250ms ease',
        '& .MuiDrawer-paper': {
-          width: effectiveWidth,
+          width: isMobile ? DRAWER_WIDTH : width,
          boxSizing: 'border-box',
+          backgroundColor: 'var(--color-sidebar-bg)',
+          borderRight: '1px solid var(--color-sidebar-border)',
+          borderRadius: 0,
          overflowX: 'hidden',
+          transition: 'width 200ms var(--ease-default, ease)',
        },
      }}
    >
-      <Toolbar sx={{ minHeight: 64 }} />
-      <Box sx={{ overflow: 'auto', flexGrow: 1, pt: 1 }}>
-        {isAdmin && (
-          <>
-            {!isCollapsed && (
-              <Typography
-                sx={{
-                  fontSize: '11px',
-                  fontWeight: 700,
-                  letterSpacing: '0.08em',
-                  textTransform: 'uppercase',
-                  color: '#94A3B8',
-                  px: 2.5,
-                  mb: 0.5,
-                }}
-              >
-                Admin
-              </Typography>
-            )}
-            <List disablePadding>
-              {adminNav.map((item) => renderNavItem(item))}
-              {isSysAdmin && sysadminNav.map((item) => renderNavItem(item))}
-            </List>
-          </>
-        )}
-        {!isCollapsed && (
-          <Typography
-            sx={{
-              fontSize: '11px',
-              fontWeight: 700,
-              letterSpacing: '0.08em',
-              textTransform: 'uppercase',
-              color: '#94A3B8',
-              px: 2.5,
-              mt: isAdmin ? 2 : 0,
-              mb: 0.5,
-            }}
-          >
-            Proposals
-          </Typography>
-        )}
-        <List disablePadding>
-          {navItems.map((item) => renderNavItem(item))}
-        </List>
+      {/* Brand header row — 64px, white, aligns with the topbar */}
+      <Box
+        sx={{
+          height: 'var(--spacing-topbar)',
+          minHeight: 'var(--spacing-topbar)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: 'var(--card)',
+          borderBottom: '1px solid var(--color-sidebar-border)',
+          flexShrink: 0,
+        }}
+      >
+        {collapsed ? <BrandMark /> : <BrandLockup />}
+      </Box>
+
+      <Box sx={{ overflowY: 'auto', overflowX: 'hidden', flexGrow: 1, py: 1, px: '8px' }}>
+        {isAdmin && renderGroup('Admin', [...adminNav, ...(isSysAdmin ? sysadminNav : [])], true)}
+        {renderGroup('Proposals', dispatcherNav, !isAdmin)}
      </Box>
    </Drawer>
  );
--- a/web/src/components/Topbar.tsx
+++ b/web/src/components/Topbar.tsx
@ -1,7 +1,7 @@
+// App shell top bar — SHOC design system port (ADR 0003, mirrors app-topbar.tsx).
 import { useDispatch } from 'react-redux';
-import { AppBar, Toolbar, IconButton, Typography, Box, Avatar } from '@mui/material';
-import MenuIcon from '@mui/icons-material/Menu';
-import LogoutIcon from '@mui/icons-material/Logout';
+import { AppBar, Toolbar, IconButton, Box, Avatar, Typography } from '@mui/material';
+import { Menu as MenuIcon, LogOut } from 'lucide-react';
 import { toggleSidebar } from '../app/slices/uiSlice';
 import { useAuth } from '../hooks/useAuth';

@ -11,70 +11,103 @@ export default function Topbar() {

  const initials = user?.displayName
    ? user.displayName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
-    : '';
+    : 'U';

  const isDevMode = !import.meta.env.VITE_COGNITO_DOMAIN;

  return (
-    <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, height: 64 }}>
-      <Toolbar sx={{ height: 64, minHeight: 64 }}>
+    <AppBar
+      position="sticky"
+      elevation={0}
+      square
+      sx={{
+        height: 'var(--spacing-topbar)',
+        borderRadius: 0,
+        background: 'var(--color-header-gradient)',
+        boxShadow: 'var(--color-header-shadow)',
+      }}
+    >
+      <Toolbar disableGutters sx={{ height: 'var(--spacing-topbar)', minHeight: 'var(--spacing-topbar)', gap: '18px', pl: '16px', pr: '22px' }}>
        <IconButton
-          color="inherit"
-          edge="start"
          onClick={() => dispatch(toggleSidebar())}
-          sx={{ mr: 2 }}
          aria-label="Toggle sidebar menu"
+          sx={{
+            width: 38,
+            height: 38,
+            borderRadius: 'var(--radius-md)',
+            backgroundColor: 'var(--color-header-surface)',
+            '&:hover': { backgroundColor: 'var(--color-header-surface-hover)' },
+          }}
        >
-          <MenuIcon />
+          <MenuIcon size={18} style={{ color: 'var(--color-header-icon)' }} />
        </IconButton>
-        <Typography variant="h6" noWrap sx={{ flexGrow: 1, fontWeight: 600 }}>
-          Proposal System
-          {isDevMode && (
-            <Box
-              component="span"
+
+        {isDevMode && (
+          <Box
+            component="span"
+            sx={{
+              backgroundColor: 'var(--color-header-surface)',
+              color: 'var(--color-header-text-muted)',
+              border: '1px solid var(--color-header-surface-hover)',
+              height: 22,
+              borderRadius: '999px',
+              fontSize: 'var(--text-xs)',
+              fontWeight: 700,
+              px: '10px',
+              display: 'inline-flex',
+              alignItems: 'center',
+              letterSpacing: '0.08em',
+            }}
+          >
+            DEV
+          </Box>
+        )}
+
+        <Box sx={{ flex: 1 }} />
+
+        {user && (
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '10px',
+              borderRadius: '9999px',
+              p: '5px 10px 5px 6px',
+              '&:hover': { backgroundColor: 'var(--color-header-chip-hover)' },
+            }}
+          >
+            <Avatar
              sx={{
-                background: '#FEF3C7',
-                color: '#92400E',
-                border: '1px solid #FDE68A',
-                height: 22,
-                borderRadius: '999px',
-                fontSize: '11px',
+                width: 34,
+                height: 34,
+                background: 'linear-gradient(135deg, var(--accent), var(--primary))',
+                boxShadow: '0 0 0 2px var(--color-header-avatar-ring)',
+                fontFamily: 'var(--font-display)',
+                fontSize: 12,
                fontWeight: 700,
-                pl: '8px',
-                pr: '8px',
-                display: 'inline-flex',
-                alignItems: 'center',
-                ml: '12px',
-                verticalAlign: 'middle',
+                color: '#fff',
              }}
            >
-              DEV
+              {initials}
+            </Avatar>
+            <Box sx={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
+              <Typography sx={{ fontSize: '13px', fontWeight: 600, color: 'var(--color-header-text)' }}>
+                {user.displayName}
+              </Typography>
+              <Typography sx={{ fontSize: 'var(--text-xs)', color: 'var(--color-header-text-muted)' }}>
+                {user.role}
+              </Typography>
            </Box>
-          )}
-        </Typography>
-        {user && (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-              <Avatar sx={{ width: 32, height: 32, bgcolor: '#2563EB', fontSize: 12, fontWeight: 600 }}>
-                {initials}
-              </Avatar>
-              <Box sx={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
-                <Typography sx={{ fontSize: '13px', fontWeight: 600, color: '#fff' }}>
-                  {user.displayName}
-                </Typography>
-                <Typography sx={{ fontSize: '11px', color: 'rgba(255,255,255,0.55)' }}>
-                  {user.role}
-                </Typography>
-              </Box>
-            </Box>
-            <Box sx={{ width: '1px', height: 24, bgcolor: 'rgba(255,255,255,0.12)', mx: 0.5 }} />
            <IconButton
              onClick={logout}
              size="small"
              aria-label="Log out"
-              sx={{ color: 'rgba(255,255,255,0.55)', '&:hover': { color: '#ff6b6b', bgcolor: 'rgba(255,100,100,0.1)' } }}
+              sx={{
+                color: 'var(--color-header-text-muted)',
+                '&:hover': { color: 'var(--color-header-text)', backgroundColor: 'var(--color-header-surface-hover)' },
+              }}
            >
-              <LogoutIcon fontSize="small" />
+              <LogOut size={16} />
            </IconButton>
          </Box>
        )}
--- a/web/src/components/brand/BrandLockup.tsx
+++ b/web/src/components/brand/BrandLockup.tsx
@ -0,0 +1,68 @@
+// Sea Haven brand lockup — ported from shoc-frontend-new dev (brand-lockup.tsx),
+// Tailwind classes re-expressed as sx (this app is MUI-only per ADR 0003).
+// Wordmark subtitle localized to this app: "PROPOSAL SYSTEM".
+import { Box } from '@mui/material';
+import SeahavenMark from './SeahavenMark';
+
+type BrandLockupSize = 'default' | 'compact';
+
+export function BrandMark({ size = 'default' }: { size?: BrandLockupSize }) {
+  const compact = size === 'compact';
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: compact ? 26 : 30,
+        height: compact ? 26 : 30,
+        borderRadius: compact ? '7px' : '8px',
+        background: 'linear-gradient(to bottom right, var(--accent), var(--primary))',
+        boxShadow: 'var(--shadow-brand-mark)',
+      }}
+    >
+      <SeahavenMark size={compact ? 16 : 18} />
+    </Box>
+  );
+}
+
+export function BrandWordmark({ size = 'default' }: { size?: BrandLockupSize }) {
+  const compact = size === 'compact';
+  return (
+    <Box sx={{ lineHeight: 1 }}>
+      <Box
+        sx={{
+          fontFamily: 'var(--font-display)',
+          fontWeight: 800,
+          letterSpacing: '0.04em',
+          color: 'var(--foreground)',
+          fontSize: compact ? 'var(--text-md)' : '16px',
+        }}
+      >
+        SEAHAVEN
+      </Box>
+      <Box
+        sx={{
+          mt: '3px',
+          fontFamily: 'var(--font-mono)',
+          fontWeight: 600,
+          letterSpacing: '0.16em',
+          color: 'var(--muted-foreground)',
+          fontSize: compact ? '7.5px' : '8px',
+        }}
+      >
+        PROPOSAL SYSTEM
+      </Box>
+    </Box>
+  );
+}
+
+export default function BrandLockup({ size = 'default' }: { size?: BrandLockupSize }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 1.25 }}>
+      <BrandMark size={size} />
+      <BrandWordmark size={size} />
+    </Box>
+  );
+}
--- a/web/src/components/brand/SeahavenMark.tsx
+++ b/web/src/components/brand/SeahavenMark.tsx
@ -0,0 +1,21 @@
+// Sea Haven brand mark — ported from shoc-frontend-new dev (seahaven-mark.tsx).
+export default function SeahavenMark({ size = 18 }: { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="#ffffff"
+      strokeWidth={2.4}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2 12q2.5 2 5 0t5 0 5 0 5 0" />
+      <path d="M2 19q2.5 2 5 0t5 0 5 0 5 0" />
+      <path d="M2 5q2.5 2 5 0t5 0 5 0 5 0" />
+    </svg>
+  );
+}
--- a/web/src/constants/index.ts
+++ b/web/src/constants/index.ts
@ -38,7 +38,7 @@ export const STATUS_CHIP_STYLES: Record<string, { bgcolor: string; color: string
  Rejected: { bgcolor: '#FEE2E2', color: '#991B1B', border: '1px solid #FECACA' },
 };

-export const DRAWER_WIDTH = 216;
+export const DRAWER_WIDTH = 244; // --spacing-sidebar (SHOC shell, ADR 0003)

 export const PRIORITY_LABELS: Record<string, string> = {
  Standard: 'Standard',
--- a/web/src/index.css
+++ b/web/src/index.css
@ -1,5 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;1,400&display=swap");
-
+/* App-level base styles. Fonts/tokens/typography live in src/styles/globals.css. */
 * {
  box-sizing: border-box;
 }
@ -9,16 +8,12 @@ html, body, #root {
 }

 body {
-  margin: 0;
-  font-family: "Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  background: #f4f6f7;
-  color: #333;
-  line-height: 1.5;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
 }

 a {
-  color: #007bff;
+  color: var(--primary);
  text-decoration: none;
 }

--- a/web/src/lib/theme/css-vars.ts
+++ b/web/src/lib/theme/css-vars.ts
@ -0,0 +1,32 @@
+/**
+ * CSS custom-property bridge — mirrors shoc-frontend-new dev src/lib/theme/css-vars.ts.
+ * Reads live tokens from :root at theme-creation time; falls back to the static
+ * map when document is unavailable (tests, pre-paint).
+ */
+export function getCssVar(name: string, fallback = ''): string {
+  if (typeof document === 'undefined') return fallback;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+export const CSS_VAR_FALLBACKS = {
+  primary: '#1c75bc',
+  primaryHover: '#155a92',
+  primaryForeground: '#ffffff',
+  destructive: '#dc2626',
+  success: '#00a79d',
+  warning: '#d97706',
+  background: '#ffffff',
+  foreground: '#262262',
+  border: '#dfe3ea',
+  muted: '#e6e7e8',
+  mutedForeground: '#58595b',
+  inputBackground: '#f9fafb',
+  ring: '#1c75bc',
+  bgPage: '#f9fafb',
+  radius: '8',
+  headerStart: '#1b1f52',
+  headerMid: '#1c4f8f',
+  headerEnd: '#1c75bc',
+  headerText: '#ffffff',
+} as const;
--- a/web/src/lib/theme/mui-theme.ts
+++ b/web/src/lib/theme/mui-theme.ts
@ -0,0 +1,295 @@
+import { createTheme } from '@mui/material/styles';
+import type { Shadows } from '@mui/material/styles';
+import { getCssVar, CSS_VAR_FALLBACKS } from './css-vars';
+
+/**
+ * MUI adapter over the CSS-variable token file (src/styles/theme.css).
+ * Mirrors shoc-frontend-new dev src/lib/theme/mui-theme.ts (ADR 0003).
+ * Token changes are values-only edits in theme.css — never here.
+ */
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    header: Palette['primary'];
+  }
+  interface PaletteOptions {
+    header?: PaletteOptions['primary'];
+  }
+}
+
+const v = (name: string, fallback: string) => getCssVar(name, fallback);
+
+const primary = v('--primary', CSS_VAR_FALLBACKS.primary);
+const primaryHover = v('--primary-hover', CSS_VAR_FALLBACKS.primaryHover);
+const primaryForeground = v('--primary-foreground', CSS_VAR_FALLBACKS.primaryForeground);
+const destructive = v('--destructive', CSS_VAR_FALLBACKS.destructive);
+const success = v('--success', CSS_VAR_FALLBACKS.success);
+const warning = v('--warning', CSS_VAR_FALLBACKS.warning);
+const background = v('--background', CSS_VAR_FALLBACKS.background);
+const foreground = v('--foreground', CSS_VAR_FALLBACKS.foreground);
+const border = v('--border', CSS_VAR_FALLBACKS.border);
+const muted = v('--muted', CSS_VAR_FALLBACKS.muted);
+const mutedForeground = v('--muted-foreground', CSS_VAR_FALLBACKS.mutedForeground);
+const inputBackground = v('--input-background', CSS_VAR_FALLBACKS.inputBackground);
+const ring = v('--ring', CSS_VAR_FALLBACKS.ring);
+const bgPage = v('--color-bg-page', CSS_VAR_FALLBACKS.bgPage);
+const radius = parseInt(v('--radius', `${CSS_VAR_FALLBACKS.radius}px`), 10);
+const headerEnd = v('--color-header-bg-end', CSS_VAR_FALLBACKS.headerEnd);
+const headerText = v('--color-header-text', CSS_VAR_FALLBACKS.headerText);
+
+const shadowSm = v('--shadow-sm', '0 1px 3px rgba(22, 30, 56, 0.06), 0 1px 2px rgba(22, 30, 56, 0.04)');
+const shadowMd = v('--shadow-md', '0 4px 6px -1px rgba(22, 30, 56, 0.08), 0 2px 4px -2px rgba(22, 30, 56, 0.06)');
+const shadowLg = v('--shadow-lg', '0 10px 15px -3px rgba(22, 30, 56, 0.1), 0 4px 6px -4px rgba(22, 30, 56, 0.08)');
+
+const fontSans = '"DM Sans", ui-sans-serif, system-ui, sans-serif';
+const fontDisplay = '"Montserrat", ui-sans-serif, system-ui, sans-serif';
+
+// MUI's 25-slot elevation tuple, fully overridden: 0=none, 1–2=sm, 3–5=md, 6+=lg.
+const shadows = [
+  'none',
+  shadowSm,
+  shadowSm,
+  shadowMd,
+  shadowMd,
+  shadowMd,
+  ...Array<string>(19).fill(shadowLg),
+] as Shadows;
+
+export const muiTheme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: primary,
+      dark: primaryHover,
+      contrastText: primaryForeground,
+    },
+    // Repurposed as the muted/neutral swatch (SHOC convention), not a brand color.
+    secondary: {
+      main: muted,
+      contrastText: foreground,
+    },
+    error: {
+      main: destructive,
+      contrastText: '#ffffff',
+    },
+    success: {
+      main: success,
+      contrastText: '#ffffff',
+    },
+    warning: {
+      main: warning,
+      contrastText: '#ffffff',
+    },
+    background: {
+      default: bgPage,
+      paper: background,
+    },
+    text: {
+      primary: foreground,
+      secondary: mutedForeground,
+    },
+    divider: border,
+    header: {
+      main: headerEnd,
+      contrastText: headerText,
+    },
+  },
+
+  typography: {
+    fontFamily: fontSans,
+    fontSize: 14,
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 600,
+    h1: { fontFamily: fontDisplay, fontWeight: 800, fontSize: '1.75rem', lineHeight: 1.25 },
+    h2: { fontFamily: fontDisplay, fontWeight: 700, fontSize: '1.375rem', lineHeight: 1.25 },
+    h3: { fontFamily: fontDisplay, fontWeight: 600, fontSize: '1.125rem', lineHeight: 1.25 },
+    h4: { fontFamily: fontDisplay, fontWeight: 600, fontSize: '1rem', lineHeight: 1.25 },
+    h5: { fontFamily: fontDisplay, fontWeight: 600, fontSize: '0.875rem', lineHeight: 1.25 },
+    h6: { fontFamily: fontDisplay, fontWeight: 600, fontSize: '0.8125rem', lineHeight: 1.25 },
+    subtitle1: { fontWeight: 600, fontSize: '1rem' },
+    subtitle2: { fontWeight: 500, fontSize: '0.875rem', color: mutedForeground },
+    body1: { fontSize: '0.875rem', lineHeight: 1.5 },
+    body2: { fontSize: '0.8125rem', lineHeight: 1.5, color: mutedForeground },
+    caption: { fontSize: '0.75rem', color: mutedForeground },
+    button: { textTransform: 'none' as const, fontWeight: 600, fontSize: '0.875rem' },
+    overline: {
+      fontSize: '0.6875rem',
+      fontWeight: 600,
+      letterSpacing: '0.08em',
+      textTransform: 'uppercase' as const,
+      color: mutedForeground,
+    },
+  },
+
+  shape: {
+    borderRadius: radius,
+  },
+
+  shadows,
+
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          fontSize: 14,
+          backgroundColor: bgPage,
+          color: foreground,
+        },
+      },
+    },
+
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: 'var(--radius-md)',
+          textTransform: 'none' as const,
+          fontWeight: 600,
+          fontSize: '0.875rem',
+          transition: 'background-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default)',
+          '&:focus-visible': {
+            outline: `2px solid ${ring}`,
+            outlineOffset: 2,
+          },
+          // MUI v9: containedPrimary slot removed — class selector instead
+          '&.MuiButton-containedPrimary:hover': {
+            backgroundColor: primaryHover,
+          },
+        },
+        outlined: {
+          borderColor: border,
+          '&:hover': {
+            borderColor: 'var(--border-hover)',
+            backgroundColor: 'var(--secondary)',
+          },
+        },
+      },
+    },
+
+    MuiTextField: {
+      defaultProps: {
+        size: 'small' as const,
+      },
+    },
+
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          backgroundColor: inputBackground,
+          borderRadius: 'var(--radius-md)',
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: border,
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: 'var(--border-hover)',
+          },
+          '&.Mui-focused': {
+            boxShadow: `0 0 0 3px color-mix(in srgb, ${ring} 25%, transparent)`,
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: ring,
+            borderWidth: 2,
+          },
+        },
+        input: {
+          padding: '8.5px 13px',
+          fontSize: '0.875rem',
+          '&.MuiOutlinedInput-inputAdornedEnd': {
+            paddingRight: 40,
+          },
+        },
+      },
+    },
+
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.875rem',
+          borderColor: border,
+          padding: '10px 16px',
+        },
+        head: {
+          fontWeight: 600,
+          backgroundColor: 'var(--color-bg-muted)',
+          color: foreground,
+        },
+      },
+    },
+
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          '&:last-child .MuiTableCell-root': {
+            borderBottom: 0,
+          },
+        },
+      },
+    },
+
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 'var(--radius-sm)',
+          fontWeight: 500,
+          fontSize: '0.75rem',
+        },
+        outlined: {
+          borderColor: border,
+        },
+      },
+    },
+
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0,
+      },
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none',
+          borderRadius: radius,
+        },
+        outlined: {
+          borderColor: border,
+        },
+      },
+    },
+
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: 'var(--radius-xl)',
+          boxShadow: shadowLg,
+        },
+      },
+    },
+
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius: 'var(--radius-md)',
+          fontSize: '0.875rem',
+          // MUI v9: standard* slots removed — class selectors instead
+          '&.MuiAlert-standardSuccess': {
+            backgroundColor: 'var(--status-completed-bg)',
+            color: 'var(--status-completed-text)',
+          },
+          '&.MuiAlert-standardError': {
+            backgroundColor: 'var(--doc-no-bg)',
+            color: 'var(--doc-no-text)',
+          },
+          '&.MuiAlert-standardWarning': {
+            backgroundColor: 'var(--status-pending-bg)',
+            color: 'var(--status-pending-text)',
+          },
+          '&.MuiAlert-standardInfo': {
+            backgroundColor: 'var(--color-primary-tint)',
+            color: 'var(--sidebar-accent-foreground)',
+          },
+        },
+      },
+    },
+  },
+});
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@ -6,6 +6,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider, CssBaseline } from '@mui/material';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import './styles/globals.css';
 import './index.css';
 import { store } from './app/store';
 import { queryClient } from './lib/queryClient';
--- a/web/src/pages/admin/dashboard/AdminDashboard.tsx
+++ b/web/src/pages/admin/dashboard/AdminDashboard.tsx
@ -56,7 +56,7 @@ function StatCard({ icon, label, value, color, subtitle }: { icon: React.ReactNo
        <Typography sx={{ fontSize: '12px', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, mb: 1 }}>
          {label}
        </Typography>
-        <Typography sx={{ fontSize: '30px', fontWeight: 700, color: '#111827', letterSpacing: '-0.02em' }}>
+        <Typography sx={{ fontSize: '30px', fontWeight: 700, color: 'var(--foreground)', letterSpacing: '-0.02em' }}>
          {value}
        </Typography>
        {subtitle && (
--- a/web/src/pages/admin/workspace/AdminWorkspace.tsx
+++ b/web/src/pages/admin/workspace/AdminWorkspace.tsx
@ -310,7 +310,7 @@ export default function AdminWorkspace() {
            component="button"
            underline="hover"
            onClick={() => guardedNavigate('/admin')}
-            sx={{ fontSize: 14, color: '#2563EB', cursor: 'pointer' }}
+            sx={{ fontSize: 14, color: 'var(--primary)', cursor: 'pointer' }}
          >
            Admin Queue
          </Link>
--- a/web/src/pages/auth/LoginPage.tsx
+++ b/web/src/pages/auth/LoginPage.tsx
@ -1,7 +1,9 @@
+// Login — SHOC auth-card treatment (ADR 0003, mirrors AuthPageShell/AuthCardHeader):
+// centered 384px card on --color-bg-page, brand lockup, Montserrat heading.
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { Alert, Box, Button, Card, CardContent, Typography, Divider, Stack } from '@mui/material';
+import { Alert, Box, Button, Typography, Divider, Stack } from '@mui/material';
 import GoogleIcon from '@mui/icons-material/Google';
 import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import EngineeringIcon from '@mui/icons-material/Engineering';
@ -9,6 +11,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import { useAuth } from '../../hooks/useAuth';
 import { authApi } from '../../lib/api/auth';
 import { setUser, setError } from '../../app/slices/authSlice';
+import BrandLockup from '../../components/brand/BrandLockup';

 const COGNITO_DOMAIN = import.meta.env.VITE_COGNITO_DOMAIN || '';
 const CLIENT_ID = import.meta.env.VITE_COGNITO_CLIENT_ID || '';
@ -24,6 +27,12 @@ function buildLoginUrl(): string {
  return `https://${COGNITO_DOMAIN}/oauth2/authorize?${params.toString()}`;
 }

+const devButtonSx = {
+  py: 1.5,
+  height: 56,
+  justifyContent: 'flex-start',
+} as const;
+
 export default function LoginPage() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
@ -62,126 +71,135 @@ export default function LoginPage() {
    <Box
      sx={{
        minHeight: '100vh',
+        width: '100%',
        display: 'flex',
-        flexDirection: 'column',
        alignItems: 'center',
-        justifyContent: 'flex-start',
-        pt: '7%',
-        background: 'linear-gradient(135deg, #111827 0%, #172554 100%)',
+        justifyContent: 'center',
+        backgroundColor: 'var(--color-bg-page)',
+        px: 2,
      }}
    >
-      <Box sx={{ width: '100%', maxWidth: 420, mx: 2 }}>
-        <Card sx={{ borderRadius: '10px', boxShadow: '0 12px 32px rgba(15,23,42,0.24)', border: 'none' }}>
-          <Box
+      <Box
+        sx={{
+          width: '100%',
+          maxWidth: 384,
+          borderRadius: 'var(--radius)',
+          border: '1px solid var(--border)',
+          backgroundColor: 'var(--card)',
+          boxShadow: 'var(--shadow-sm)',
+          p: 5,
+        }}
+      >
+        <Box sx={{ mb: 4 }}>
+          <BrandLockup />
+        </Box>
+
+        <Typography
+          component="h2"
+          sx={{
+            textAlign: 'center',
+            fontFamily: 'var(--font-display)',
+            fontWeight: 700,
+            fontSize: 'var(--text-xl)',
+            color: 'var(--foreground)',
+          }}
+        >
+          Welcome back
+        </Typography>
+        <Typography
+          sx={{
+            textAlign: 'center',
+            color: 'var(--muted-foreground)',
+            fontSize: 'var(--text-base)',
+            mt: '6px',
+            mb: 3,
+          }}
+        >
+          Sign in to your account
+        </Typography>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 2, textAlign: 'left' }}>
+            {error}
+          </Alert>
+        )}
+
+        {isDevMode ? (
+          <>
+            <Stack spacing={1.5}>
+              <Button
+                variant="contained"
+                fullWidth
+                startIcon={<AdminPanelSettingsIcon />}
+                onClick={() => handleDevLogin('SysAdmin')}
+                disabled={loading}
+                sx={devButtonSx}
+              >
+                <Box sx={{ textAlign: 'left', flex: 1 }}>
+                  <Box>SysAdmin</Box>
+                  <Box sx={{ fontSize: 'var(--text-xs)', fontWeight: 400, opacity: 0.8 }}>Full access</Box>
+                </Box>
+              </Button>
+              <Button
+                variant="contained"
+                fullWidth
+                startIcon={<EngineeringIcon />}
+                onClick={() => handleDevLogin('Admin')}
+                disabled={loading}
+                sx={devButtonSx}
+              >
+                <Box sx={{ textAlign: 'left', flex: 1 }}>
+                  <Box>Admin</Box>
+                  <Box sx={{ fontSize: 'var(--text-xs)', fontWeight: 400, opacity: 0.8 }}>Review, price, and approve proposals</Box>
+                </Box>
+              </Button>
+              <Button
+                variant="contained"
+                fullWidth
+                startIcon={<PersonIcon />}
+                onClick={() => handleDevLogin('Dispatcher')}
+                disabled={loading}
+                sx={devButtonSx}
+              >
+                <Box sx={{ textAlign: 'left', flex: 1 }}>
+                  <Box>Dispatcher</Box>
+                  <Box sx={{ fontSize: 'var(--text-xs)', fontWeight: 400, opacity: 0.8 }}>Submit and track proposals</Box>
+                </Box>
+              </Button>
+            </Stack>
+            <Divider sx={{ my: 2 }} />
+            <Typography variant="caption" sx={{ display: 'block', textAlign: 'center' }}>
+              Development sign-in — only shown when Cognito is not configured.
+            </Typography>
+          </>
+        ) : (
+          <Button
+            variant="contained"
+            fullWidth
+            startIcon={<GoogleIcon />}
+            href={buildLoginUrl()}
            sx={{
-              height: 100,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              bgcolor: '#fff',
-              borderBottom: '1px solid #E5E7EB',
-              px: 3,
+              height: 42,
+              fontFamily: 'var(--font-display)',
+              fontSize: 'var(--text-base)',
+              fontWeight: 600,
            }}
          >
-            <Typography sx={{ fontSize: '24px', fontWeight: 700, color: '#111827', letterSpacing: '-0.02em' }}>
-              Sea Haven Industries
-            </Typography>
-          </Box>
-          <Box
-            sx={{
-              bgcolor: '#111827',
-              height: 40,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              borderBottom: '1px solid #E5E7EB',
-            }}
-          >
-            <Typography sx={{ fontSize: '14px', fontWeight: 700, color: '#fff' }}>
-              Proposal System
-            </Typography>
-          </Box>
-          <CardContent sx={{ p: '30px', textAlign: 'center' }}>
-            {error && (
-              <Alert severity="error" sx={{ mb: 2, textAlign: 'left' }}>
-                {error}
-              </Alert>
-            )}
-            {isDevMode ? (
-              <>
-                <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-                  Development Sign-In — Select a role to preview the app.
-                </Typography>
-                <Stack spacing={2}>
-                  <Button
-                    variant="contained"
-                    size="large"
-                    fullWidth
-                    startIcon={<AdminPanelSettingsIcon />}
-                    onClick={() => handleDevLogin('SysAdmin')}
-                    disabled={loading}
-                    sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#2563EB', '&:hover': { bgcolor: '#1D4ED8' } }}
-                  >
-                    <Box sx={{ textAlign: 'left', flex: 1 }}>
-                      <Box>SysAdmin</Box>
-                      <Box sx={{ fontSize: '11px', fontWeight: 400, opacity: 0.8 }}>Full access</Box>
-                    </Box>
-                  </Button>
-                  <Button
-                    variant="contained"
-                    size="large"
-                    fullWidth
-                    startIcon={<EngineeringIcon />}
-                    onClick={() => handleDevLogin('Admin')}
-                    disabled={loading}
-                    sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#2563EB', '&:hover': { bgcolor: '#1D4ED8' } }}
-                  >
-                    <Box sx={{ textAlign: 'left', flex: 1 }}>
-                      <Box>Admin</Box>
-                      <Box sx={{ fontSize: '11px', fontWeight: 400, opacity: 0.8 }}>Review, price, and approve proposals</Box>
-                    </Box>
-                  </Button>
-                  <Button
-                    variant="contained"
-                    size="large"
-                    fullWidth
-                    startIcon={<PersonIcon />}
-                    onClick={() => handleDevLogin('Dispatcher')}
-                    disabled={loading}
-                    sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#2563EB', '&:hover': { bgcolor: '#1D4ED8' } }}
-                  >
-                    <Box sx={{ textAlign: 'left', flex: 1 }}>
-                      <Box>Dispatcher</Box>
-                      <Box sx={{ fontSize: '11px', fontWeight: 400, opacity: 0.8 }}>Submit and track proposals</Box>
-                    </Box>
-                  </Button>
-                </Stack>
-                <Divider sx={{ my: 2 }} />
-                <Typography variant="caption" color="text.secondary">
-                  Dev login is only shown when Cognito is not configured.
-                </Typography>
-              </>
-            ) : (
-              <>
-                <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
-                  Sign in with your Sea Haven Google account to continue.
-                </Typography>
-                <Button
-                  variant="contained"
-                  size="large"
-                  fullWidth
-                  startIcon={<GoogleIcon />}
-                  href={buildLoginUrl()}
-                  sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#2563EB', '&:hover': { bgcolor: '#1D4ED8' } }}
-                >
-                  Sign in with Google
-                </Button>
-              </>
-            )}
-          </CardContent>
-        </Card>
-        <Typography sx={{ textAlign: 'center', color: 'rgba(255,255,255,0.5)', fontSize: '12px', mt: 2 }}>
-          Sea Haven Industries &copy; {new Date().getFullYear()}
+            Sign in with Google
+          </Button>
+        )}
+
+        <Typography
+          sx={{
+            mt: '20px',
+            display: 'block',
+            textAlign: 'center',
+            fontFamily: 'var(--font-sans)',
+            fontSize: 'var(--text-xs)',
+            color: 'var(--muted-foreground)',
+          }}
+        >
+          Having trouble? Contact your administrator.
        </Typography>
      </Box>
    </Box>
--- a/web/src/pages/dashboard/Dashboard.tsx
+++ b/web/src/pages/dashboard/Dashboard.tsx
@ -34,11 +34,11 @@ function KpiCard({ icon, label, value, subtitle }: { icon: React.ReactNode; labe
  return (
    <Card sx={{ borderRadius: '8px', transition: 'border-color 120ms ease', '&:hover': { borderColor: '#9CA3AF' } }}>
      <CardContent sx={{ textAlign: 'center', py: 2.5 }}>
-        <Box sx={{ display: 'flex', justifyContent: 'center', mb: 1, color: '#2563EB' }}>{icon}</Box>
+        <Box sx={{ display: 'flex', justifyContent: 'center', mb: 1, color: 'var(--primary)' }}>{icon}</Box>
        <Typography sx={{ fontSize: '12px', color: '#64748B', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, mb: 1 }}>
          {label}
        </Typography>
-        <Typography sx={{ fontSize: '30px', fontWeight: 700, color: '#111827', letterSpacing: '-0.02em' }}>
+        <Typography sx={{ fontSize: '30px', fontWeight: 700, color: 'var(--foreground)', letterSpacing: '-0.02em' }}>
          {value}
        </Typography>
        {subtitle && (
--- a/web/src/styles/fonts.css
+++ b/web/src/styles/fonts.css
@ -0,0 +1,12 @@
+/* Self-hosted fonts (@fontsource) — same weights as shoc-frontend-new dev. */
+@import "@fontsource/montserrat/600.css";
+@import "@fontsource/montserrat/700.css";
+@import "@fontsource/montserrat/800.css";
+
+@import "@fontsource/dm-sans/400.css";
+@import "@fontsource/dm-sans/500.css";
+@import "@fontsource/dm-sans/600.css";
+
+@import "@fontsource/jetbrains-mono/400.css";
+@import "@fontsource/jetbrains-mono/500.css";
+@import "@fontsource/jetbrains-mono/600.css";
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@ -0,0 +1,5 @@
+/* Global stylesheet — import order mirrors shoc-frontend-new dev (minus Tailwind). */
+@import "./fonts.css";
+@import "./theme.css";
+@import "./typography.css";
+@import "./motion.css";
--- a/web/src/styles/motion.css
+++ b/web/src/styles/motion.css
@ -0,0 +1,6 @@
+/* Motion tokens — mirrors shoc-frontend-new dev src/styles/motion.css. */
+:root {
+  --duration-fast: 150ms;
+  --duration-normal: 250ms;
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+}
--- a/web/src/styles/theme.css
+++ b/web/src/styles/theme.css
@ -0,0 +1,188 @@
+/*
+ * Sea Haven design tokens — single source of truth (ADR 0003).
+ * Ported verbatim from shoc-frontend-new dev src/styles/theme.css (values-only
+ * changes belong here; never rewrite the MUI adapter to change a color).
+ * The SHOC @theme inline Tailwind block is intentionally omitted — this app is MUI-only.
+ */
+:root {
+  /* Body typography reference — do not set on html (rem uses 16px root) */
+  --font-size: 14px;
+
+  /* ── TYPOGRAPHY ─────────────────────────────────────────────────── */
+  --font-family-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
+  --font-family-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-display: var(--font-family-display);
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+  --font-heading: var(--font-family-display);
+
+  /* ── TYPOGRAPHY SCALE ───────────────────────────────────────────── */
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-base-sm: 13px;
+  --text-base: 14px;
+  --text-md: 16px;
+  --text-lg: 18px;
+  --text-xl: 22px;
+  --text-2xl: 28px;
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+
+  /* ── LAYOUT SPACING ─────────────────────────────────────────────── */
+  --spacing-sidebar: 244px;
+  --spacing-topbar: 64px;
+  --spacing-sidebar-collapsed: 76px;
+
+  /* ── RADIUS SCALE (scale resolves to 4 / 6 / 8 / 12) ────────────── */
+  --radius: 8px;
+  --radius-md: 6px;
+  --radius-sm: 4px;
+  --radius-xl: 12px;
+
+  /* ── ELEVATION ──────────────────────────────────────────────────── */
+  --shadow-sm: 0 1px 3px rgba(22, 30, 56, 0.06), 0 1px 2px rgba(22, 30, 56, 0.04);
+  --shadow-md: 0 4px 6px -1px rgba(22, 30, 56, 0.08), 0 2px 4px -2px rgba(22, 30, 56, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(22, 30, 56, 0.1), 0 4px 6px -4px rgba(22, 30, 56, 0.08);
+  --shadow-brand-mark: 0 2px 6px -1px rgba(28, 117, 188, 0.45);
+
+  /* ── SHADCN BASE (Seahaven DS) ──────────────────────────────────── */
+  --background: #ffffff;
+  --foreground: #262262;
+  --placeholder-foreground: color-mix(in srgb, var(--foreground) 50%, transparent);
+  --card: #ffffff;
+  --card-foreground: #262262;
+  --popover: #ffffff;
+  --popover-foreground: #262262;
+  --primary: #1c75bc;
+  --primary-hover: #155a92;
+  --primary-foreground: #ffffff;
+  --secondary: #f1f4f9;
+  --secondary-foreground: #262262;
+  --muted: #e6e7e8;
+  --muted-foreground: #58595b;
+  --accent: #27aae1;
+  --accent-foreground: #ffffff;
+  --success: #00a79d;
+  --warning: #d97706;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --border: #dfe3ea;
+  --border-hover: #c8d0e0;
+  --input: transparent;
+  --input-background: #f9fafb;
+  --switch-background: #c8d0e0;
+  --ring: #1c75bc;
+
+  --chart-1: #1c75bc;
+  --chart-2: #00a79d;
+  --chart-3: #d97706;
+  --chart-4: #7c3aed;
+  --chart-5: #dc2626;
+
+  /* ── SIDEBAR (light surface — Seahaven DS) ──────────────────────── */
+  --sidebar: #f6f8fb;
+  --sidebar-bg: #f6f8fb;
+  --sidebar-foreground: #262262;
+  --sidebar-primary: #1c75bc;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #e6f4fb;
+  --sidebar-accent-foreground: #155a92;
+  --sidebar-border: #dfe3ea;
+  --sidebar-ring: #1c75bc;
+
+  /* ── SEAHAVEN SEMANTIC ALIASES (consumed across the app) ────────── */
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-foreground: #ffffff;
+  --color-primary-tint: #e6f4fb;
+  --color-accent: var(--accent);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--foreground);
+  --color-ring: var(--ring);
+
+  --color-bg-page: #f9fafb;
+  --color-bg-surface: var(--card);
+  --color-bg-muted: #f1f4f9;
+  --color-border: var(--border);
+  --color-border-hover: #c8d0e0;
+  --color-text-primary: var(--foreground);
+  --color-text-secondary: #58595b;
+  --color-text-muted: #6b7a96;
+  --color-text-inverse: #ffffff;
+
+  /* ── SIDEBAR ALIASES (light) ────────────────────────────────────── */
+  --color-sidebar-bg: var(--sidebar-bg);
+  --color-sidebar-text: #262262;
+  --color-sidebar-text-hover: #155a92;
+  --color-sidebar-active-bg: var(--sidebar-accent);
+  --color-sidebar-active-text: var(--sidebar-accent-foreground);
+  --color-sidebar-hover-bg: #eef2f7;
+  --color-sidebar-label: #6b7a96;
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-badge-bg: #e6f4fb;
+  --color-sidebar-badge-text: #155a92;
+  --color-sidebar-item-active-bg: var(--card);
+  --color-sidebar-item-active-shadow: 0 1px 3px rgba(38, 34, 98, 0.08);
+
+  /* ── SEMANTIC (universal meaning) ───────────────────────────────── */
+  --color-destructive: var(--destructive);
+  --color-destructive-fg: #ffffff;
+  --color-warning: var(--warning);
+  --color-success: var(--success);
+
+  /* ── STATUS TOKENS (immutable — mirror SHOC; consumed by MuiAlert
+       mapping and proposal status badges) ──────────────────────────── */
+  --status-incomplete-bg: #f3f4f6;
+  --status-incomplete-text: #374151;
+  --status-pending-bg: #fff7ed;
+  --status-pending-text: #92400e;
+  --status-scheduled-bg: #eff6ff;
+  --status-scheduled-text: #1e40af;
+  --status-inprogress-bg: #eff6ff;
+  --status-inprogress-text: #1d4ed8;
+  --status-completed-bg: #f0fdf4;
+  --status-completed-text: #166534;
+  --status-canceled-bg: #f9fafb;
+  --status-canceled-text: #6b7280;
+  --status-pastdue-bg: #fff1f2;
+  --status-pastdue-text: #9f1239;
+
+  /* ── COMPLETION DOCUMENT (immutable — mirror SHOC) ──────────────── */
+  --doc-yes-bg: #f0fdf4;
+  --doc-yes-text: #166534;
+  --doc-no-bg: #fff1f2;
+  --doc-no-text: #be123c;
+  --doc-nn-bg: #f3f4f6;
+  --doc-nn-text: #6b7280;
+
+  /* ── SLA (immutable — mirror SHOC) ──────────────────────────────── */
+  --sla-safe: #16a34a;
+  --sla-warning: #d97706;
+  --sla-critical: #dc2626;
+
+  /* ── HEADER (app shell top bar) ─────────────────────────────────── */
+  --color-header-bg-start: #1b1f52;
+  --color-header-bg-mid: #1c4f8f;
+  --color-header-bg-end: var(--primary);
+  --color-header-gradient: linear-gradient(
+    100deg,
+    var(--color-header-bg-start) 0%,
+    var(--color-header-bg-mid) 58%,
+    var(--color-header-bg-end) 100%
+  );
+  --color-header-shadow: 0 1px 0 rgba(38, 34, 98, 0.18), 0 6px 18px -10px rgba(28, 117, 188, 0.5);
+  --color-header-surface: rgba(255, 255, 255, 0.08);
+  --color-header-surface-hover: rgba(255, 255, 255, 0.18);
+  --color-header-chip-hover: rgba(255, 255, 255, 0.12);
+  --color-header-icon: #eaf3fb;
+  --color-header-text: #ffffff;
+  --color-header-text-muted: #bdd8f0;
+  --color-header-avatar-ring: rgba(255, 255, 255, 0.25);
+}
--- a/web/src/styles/typography.css
+++ b/web/src/styles/typography.css
@ -0,0 +1,52 @@
+/* Base element typography — mirrors shoc-frontend-new dev src/styles/typography.css. */
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  color: var(--foreground);
+  background-color: var(--color-bg-page);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  color: var(--foreground);
+  margin: 0;
+}
+
+h1 { font-size: var(--text-2xl); font-weight: 800; }
+h2 { font-size: var(--text-xl); font-weight: 700; }
+h3 { font-size: var(--text-lg); font-weight: 600; }
+h4 { font-size: var(--text-md); font-weight: 600; }
+h5 { font-size: var(--text-base); font-weight: 600; }
+h6 { font-size: var(--text-base-sm); font-weight: 600; }
+
+.text-caption {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  line-height: var(--leading-normal);
+  color: var(--muted-foreground);
+}
+
+.text-label {
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  line-height: 1.5;
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--color-sidebar-label);
+}
+
+.text-nav-group {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+}
--- a/web/src/theme.ts
+++ b/web/src/theme.ts
@ -1,353 +1,4 @@
-import { createTheme } from '@mui/material/styles';
-
-// Sea Haven Ops design system — flat, dense, border-driven enterprise UI.
-// Neutral navy/slate/gray structure; action-blue #2563EB is the only brand accent.
-// Tokens mirror the Sea Haven Ops design bundle (tokens/colors.css, spacing.css, typography.css).
-export const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#2563EB', // action blue — primary buttons, links, selected
-      light: '#3B82F6',
-      dark: '#1D4ED8', // contained-button hover/pressed
-      contrastText: '#FFFFFF',
-    },
-    secondary: {
-      main: '#4B5563', // slate-600
-      light: '#6B7280',
-      dark: '#374151',
-      contrastText: '#FFFFFF',
-    },
-    success: {
-      main: '#16A34A',
-      light: '#DCFCE7',
-      dark: '#166534',
-      contrastText: '#FFFFFF',
-    },
-    warning: {
-      main: '#D97706', // orange — Urgent
-      light: '#FFEDD5',
-      dark: '#9A3412',
-      contrastText: '#FFFFFF',
-    },
-    error: {
-      main: '#DC2626', // red — Emergency / overdue / destructive
-      light: '#FEE2E2',
-      dark: '#991B1B',
-      contrastText: '#FFFFFF',
-    },
-    info: {
-      main: '#2563EB',
-      light: '#DBEAFE',
-      dark: '#1E40AF',
-      contrastText: '#FFFFFF',
-    },
-    background: {
-      default: '#F3F4F6', // gray-100 page background
-      paper: '#FFFFFF',
-    },
-    text: {
-      primary: '#111827', // navy-900
-      secondary: '#4B5563', // slate-600
-      disabled: '#9CA3AF', // gray-400
-    },
-    divider: '#E5E7EB', // gray-200
-  },
-
-  typography: {
-    fontFamily: '"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-    fontSize: 14,
-    h4: {
-      fontWeight: 700,
-      fontSize: '24px',
-      lineHeight: 1.25,
-      letterSpacing: '-0.02em',
-    },
-    h5: {
-      fontWeight: 600,
-      fontSize: '18px',
-      lineHeight: 1.3,
-    },
-    h6: {
-      fontWeight: 600,
-      fontSize: '16px',
-      lineHeight: 1.4,
-    },
-    subtitle1: {
-      fontWeight: 600,
-      fontSize: '14px',
-      lineHeight: 1.4,
-    },
-    body1: {
-      fontSize: '14px',
-      lineHeight: 1.5,
-    },
-    body2: {
-      fontSize: '13px',
-      lineHeight: 1.45,
-    },
-    caption: {
-      fontSize: '12px',
-      lineHeight: 1.35,
-      color: '#6B7280',
-    },
-    button: {
-      fontSize: '14px',
-      fontWeight: 600,
-      textTransform: 'none' as const,
-    },
-    overline: {
-      fontSize: '11px',
-      lineHeight: '16px',
-      fontWeight: 700,
-      letterSpacing: '0.08em',
-      textTransform: 'uppercase' as const,
-      color: '#6B7280',
-    },
-  },
-
-  shape: {
-    borderRadius: 6,
-  },
-
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: {
-        body: {
-          fontFeatureSettings: '"tnum"',
-          backgroundColor: '#F3F4F6',
-        },
-      },
-    },
-
-    MuiAppBar: {
-      defaultProps: {
-        elevation: 0,
-      },
-      styleOverrides: {
-        root: {
-          backgroundColor: '#111827', // navy-900
-          boxShadow: 'none',
-          borderRadius: 0,
-          borderBottom: '1px solid rgba(255,255,255,0.08)',
-        },
-      },
-    },
-
-    MuiDrawer: {
-      styleOverrides: {
-        paper: {
-          backgroundColor: '#FFFFFF',
-          borderRight: '1px solid #E5E7EB', // border-subtle
-          width: 216,
-        },
-      },
-    },
-
-    MuiCard: {
-      defaultProps: {
-        elevation: 0,
-      },
-      styleOverrides: {
-        // Cards are border-driven — no shadow (overlays only).
-        root: {
-          border: '1px solid #E5E7EB',
-          boxShadow: 'none',
-          borderRadius: 8,
-        },
-      },
-    },
-
-    MuiPaper: {
-      defaultProps: {
-        elevation: 0,
-      },
-      styleOverrides: {
-        root: {
-          backgroundImage: 'none',
-          borderRadius: 6,
-        },
-      },
-    },
-
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          borderRadius: 6,
-          boxShadow: 'none',
-          textTransform: 'none' as const,
-          fontWeight: 600,
-          height: 36,
-          paddingLeft: 14,
-          paddingRight: 14,
-        },
-        contained: {
-          boxShadow: 'none',
-          '&:hover': {
-            boxShadow: 'none',
-          },
-        },
-        outlined: {
-          borderColor: '#D1D5DB', // border-default
-          color: '#111827',
-          '&:hover': {
-            borderColor: '#9CA3AF', // border-strong
-            backgroundColor: '#F9FAFB', // gray-50
-          },
-        },
-      },
-    },
-
-    MuiTextField: {
-      defaultProps: {
-        size: 'small' as const,
-      },
-      styleOverrides: {
-        root: {
-          '& .MuiOutlinedInput-root': {
-            borderRadius: 6,
-          },
-        },
-      },
-    },
-
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          borderRadius: 6,
-          minHeight: 38,
-          '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: '#D1D5DB',
-          },
-          '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: '#9CA3AF',
-          },
-          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: '#2563EB',
-            borderWidth: 2,
-          },
-        },
-        input: {
-          fontSize: 14,
-          padding: '9px 12px',
-        },
-      },
-    },
-
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          fontSize: 13,
-          color: '#6B7280',
-          '&.Mui-focused': {
-            color: '#2563EB',
-          },
-        },
-      },
-    },
-
-    MuiTableHead: {
-      styleOverrides: {
-        root: {
-          '& .MuiTableCell-head': {
-            color: '#374151', // slate-700
-            fontWeight: 700,
-            fontSize: 13,
-            paddingTop: 12,
-            paddingBottom: 12,
-            borderBottom: '1px solid #E5E7EB',
-            backgroundColor: '#F9FAFB', // gray-50
-            whiteSpace: 'nowrap',
-          },
-        },
-      },
-    },
-
-    MuiTableCell: {
-      styleOverrides: {
-        root: {
-          color: '#111827',
-          fontSize: 14,
-          padding: '12px 14px',
-          borderBottom: '1px solid #E5E7EB',
-        },
-      },
-    },
-
-    MuiTableRow: {
-      styleOverrides: {
-        root: {
-          '&:hover': {
-            backgroundColor: '#F9FAFB',
-          },
-        },
-      },
-    },
-
-    MuiChip: {
-      styleOverrides: {
-        root: {
-          height: 24,
-          borderRadius: 6,
-          fontSize: 12,
-          fontWeight: 700,
-        },
-        sizeSmall: {
-          height: 22,
-          fontSize: 12,
-        },
-        label: {
-          paddingLeft: 8,
-          paddingRight: 8,
-        },
-        icon: {
-          fontSize: 14,
-          marginLeft: 6,
-        },
-      },
-    },
-
-    MuiListItemButton: {
-      styleOverrides: {
-        root: {
-          borderRadius: 6,
-          marginLeft: 8,
-          marginRight: 8,
-          marginBottom: 4,
-          color: '#4B5563',
-          '&.Mui-selected': {
-            backgroundColor: '#EFF6FF', // blue-50
-            borderLeft: '3px solid #2563EB',
-            color: '#111827',
-            '& .MuiListItemIcon-root': {
-              color: '#2563EB',
-            },
-            '&:hover': {
-              backgroundColor: '#DBEAFE', // blue-100
-            },
-          },
-          '&:hover': {
-            backgroundColor: '#F3F4F6', // gray-100
-          },
-        },
-      },
-    },
-
-    MuiListItemIcon: {
-      styleOverrides: {
-        root: {
-          color: '#9CA3AF', // gray-400 — inactive nav icon
-          minWidth: 36,
-        },
-      },
-    },
-
-    MuiTooltip: {
-      styleOverrides: {
-        tooltip: {
-          fontSize: 12,
-          backgroundColor: '#1F2937', // navy-800
-        },
-      },
-    },
-  },
-});
+// Sea Haven design system (ADR 0003) — SHOC dev token port.
+// Tokens live in src/styles/theme.css (single source of truth);
+// src/lib/theme/mui-theme.ts is the getCssVar → createTheme adapter.
+export { muiTheme as theme } from './lib/theme/mui-theme';