feat(web): light sage redesign with interactive Codex-window ultrawork demo

packages/web/app/globals.css

@@ -1,3 +1,4 @@
 @import "tailwindcss";
 @import "./styles/design-system.css";
 @import "./styles/landing.css";
+@import "./styles/ulw-demo.css";

packages/web/app/layout.tsx

@@ -12,8 +12,8 @@ const DESCRIPTION =
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
-  themeColor: "#22c55e",
-  colorScheme: "dark",
+  themeColor: "#f4f6ee",
+  colorScheme: "light",
 }
 
 export const metadata: Metadata = {

packages/web/app/manifest.ts

@@ -7,8 +7,8 @@ export default function manifest(): MetadataRoute.Manifest {
     description: "Agent harness for complex codebases inside Codex.",
     start_url: "/",
     display: "standalone",
-    background_color: "#0a0a0a",
-    theme_color: "#22c55e",
+    background_color: "#f4f6ee",
+    theme_color: "#15803d",
     // No icons array: the browser favicon comes from the app/icon.svg file
     // convention; duplicating it here triggers a second eager favicon fetch
     // that lands on the Lantern LCP critical path. PWA installability isn't a

packages/web/app/og-image-theme.ts

@@ -1,29 +1,29 @@
 export const OG_SIZE = { width: 1200, height: 630 } as const
 
 export const OG_PALETTE = {
-  surfaceBase: "#0a0c0b",
-  cardBase: "#0E1411",
+  surfaceBase: "#f4f6ee",
+  cardBase: "#ffffff",
   brandCore: "#22c55e",
   brandMid: "#16a34a",
   brandOuter: "#15803d",
-  textPrimary: "#ffffff",
-  textSecondary: "#b8c2bc",
-  textSoft: "#dcfce7",
-  textMuted: "rgba(255, 255, 255, 0.74)",
-  accentCyan: "#4ade80",
-  accentGlow: "#86efac",
-  border: "rgba(255, 255, 255, 0.08)",
+  textPrimary: "#101914",
+  textSecondary: "#3f4b43",
+  textSoft: "#14532d",
+  textMuted: "rgba(16, 25, 20, 0.75)",
+  accentCyan: "#15803d",
+  accentGlow: "#bbf7d0",
+  border: "rgba(16, 25, 20, 0.12)",
 } as const
 
 export const OG_GRADIENTS = {
-  base: `radial-gradient(120% 100% at 60% 65%, ${OG_PALETTE.brandCore} 0%, ${OG_PALETTE.brandMid} 35%, ${OG_PALETTE.brandOuter} 70%, ${OG_PALETTE.surfaceBase} 100%)`,
+  base: `radial-gradient(120% 100% at 60% 65%, rgba(134, 239, 172, 0.18) 0%, rgba(34, 197, 94, 0.10) 35%, rgba(22, 163, 74, 0.05) 70%, rgba(244, 246, 238, 0) 100%)`,
   beam:
-    "radial-gradient(55% 55% at 38% -8%, rgba(134,239,172,0.55) 0%, rgba(74,222,128,0.22) 35%, rgba(255,255,255,0) 65%), " +
-    "radial-gradient(32% 28% at 55% -5%, rgba(134,239,172,0.38) 0%, rgba(255,255,255,0) 70%)",
+    "radial-gradient(55% 55% at 38% -8%, rgba(134,239,172,0.30) 0%, rgba(74,222,128,0.12) 35%, rgba(255,255,255,0) 65%), " +
+    "radial-gradient(32% 28% at 55% -5%, rgba(134,239,172,0.20) 0%, rgba(255,255,255,0) 70%)",
   sheen:
-    "linear-gradient(118deg, transparent 18%, rgba(134,239,172,0.16) 26%, rgba(134,239,172,0.30) 30%, rgba(134,239,172,0.12) 35%, transparent 45%), " +
-    "linear-gradient(112deg, transparent 8%, rgba(74,222,128,0.12) 15%, transparent 28%)",
+    "linear-gradient(118deg, transparent 18%, rgba(134,239,172,0.10) 26%, rgba(134,239,172,0.18) 30%, rgba(134,239,172,0.08) 35%, transparent 45%), " +
+    "linear-gradient(112deg, transparent 8%, rgba(74,222,128,0.08) 15%, transparent 28%)",
   pools:
-    "radial-gradient(55% 50% at 8% 95%, rgba(34,197,94,0.26), transparent 70%), " +
-    "radial-gradient(45% 45% at 95% 40%, rgba(134,239,172,0.20), transparent 70%)",
+    "radial-gradient(55% 50% at 8% 95%, rgba(34,197,94,0.14), transparent 70%), " +
+    "radial-gradient(45% 45% at 95% 40%, rgba(134,239,172,0.12), transparent 70%)",
 } as const

packages/web/app/page.tsx

@@ -13,7 +13,9 @@ import { Hero } from "../components/site/hero"
 import { InstallBlock } from "../components/site/install-block"
 import { SiteFooter } from "../components/site/site-footer"
 import { SiteHeader } from "../components/site/site-header"
-import { UltraworkSection } from "../components/site/ultrawork-section"
+import { TeamModeSection } from "../components/site/team-mode-section"
+import { UlwDemoSection } from "../components/site/ulw-demo/ulw-demo-section"
+import { UlwResearchSection } from "../components/site/ulw-research-section"
 
 export default function LandingPage(): JSX.Element {
   return (
@@ -26,11 +28,13 @@ export default function LandingPage(): JSX.Element {
         <MarketingContainer>
           <Hero />
         </MarketingContainer>
+        <UlwDemoSection />
         <InstallBlock />
         <CommandCards />
         <FeatureWorkflowsSection />
+        <TeamModeSection />
+        <UlwResearchSection />
         <HephaestusSection />
-        <UltraworkSection />
         <DocsCta />
       </MarketingMain>
 

packages/web/app/styles/design-system.css

@@ -6,56 +6,61 @@
   --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
     Helvetica, Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  /* Editorial serif for section display headings ONLY (DESIGN.md §3).
+     System ui-serif stack — still zero webfonts. */
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
 }
 
 @layer base {
   :root {
-    /* Surfaces — near-black canvas with a faint cool-green undertone. */
-    --surface-base: #0a0c0b;
-    --surface-0: #0a0c0b;
-    --surface-1: rgba(255, 255, 255, 0.018);
-    --surface-2: rgba(255, 255, 255, 0.035);
-    --surface-3: rgba(255, 255, 255, 0.055);
-    --card-base: #0E1411;
-    --surface-night: #0a0c0b;
-    --surface-panel: #0E1411;
-    --surface-panel-alt: #0C1310;
-    --surface-panel-deep: #0D1310;
+    /* Surfaces — light sage paper with a faint green undertone. */
+    --surface-base: #f4f6ee;
+    --surface-0: #f4f6ee;
+    --surface-1: rgba(16, 25, 20, 0.03);
+    --surface-2: rgba(16, 25, 20, 0.05);
+    --surface-3: rgba(16, 25, 20, 0.08);
+    --card-base: #ffffff;
+    --surface-night: #e9ede0;
+    --surface-panel: #fbfcf7;
+    --surface-panel-alt: #f7faf2;
+    --surface-panel-deep: #f3f7ec;
 
     /* Brand — green core (green-500 family), clearly green not teal. */
     --brand-core: #22c55e;
     --brand-mid: #16a34a;
     --brand-outer: #15803d;
 
-    /* Text. */
-    --text-primary: #ffffff;
-    --text-secondary: #b8c2bc;
-    --text-tertiary: #8b9690;
-    --text-muted: rgba(255, 255, 255, 0.74);
-    --text-soft: #dcfce7;
-
-    /* Accent — the live-wire green (green-400/300, unambiguously green). */
-    --accent-primary: #4ade80;
-    --accent-primary-soft: rgba(74, 222, 128, 0.1);
-    --accent-primary-border: rgba(74, 222, 128, 0.24);
-    --accent-cyan: #4ade80;
+    /* Text — deep green-tinted inks, AA on the sage canvas. */
+    --text-primary: #101914;
+    --text-secondary: #3f4b43;
+    --text-tertiary: #55645b;
+    --text-muted: rgba(16, 25, 20, 0.75);
+    --text-soft: #14532d;
+
+    /* Accent — AA-legible forest green on light ground, including the tinted
+       chip fills (#e2ede0/#e9f0e5 family) where #15803d only reached ~4.2:1.
+       --accent-mint is for fills/decoration ONLY, never text on light surfaces. */
+    --accent-primary: #166534;
+    --accent-primary-soft: rgba(21, 128, 61, 0.08);
+    --accent-primary-border: rgba(21, 128, 61, 0.28);
+    --accent-cyan: #15803d;
     --accent-teal: #22c55e;
     --accent-mint: #86efac;
-    --accent-glow: #86efac;
+    --accent-glow: #14532d;
 
     /* Borders. */
-    --border-subtle: rgba(255, 255, 255, 0.06);
-    --border-default: rgba(255, 255, 255, 0.1);
+    --border-subtle: rgba(16, 25, 20, 0.10);
+    --border-default: rgba(16, 25, 20, 0.16);
 
-    /* Status. */
-    --status-success: #22c55e;
-    --status-warning: #f59e0b;
-    --status-error: #ef4444;
+    /* Status — AA on light. */
+    --status-success: #15803d;
+    --status-warning: #a16207;
+    --status-error: #b91c1c;
   }
 
   html {
     background-color: var(--surface-base);
-    color-scheme: dark;
+    color-scheme: light;
   }
 
   body {
@@ -68,8 +73,8 @@
   }
 
   ::selection {
-    background-color: var(--brand-outer);
-    color: var(--text-primary);
+    background-color: #bbf7d0;
+    color: #14532d;
   }
 
   a {
@@ -81,30 +86,106 @@
     outline: 2px solid var(--accent-primary);
     outline-offset: 3px;
   }
+
+  /* Codex window adapter — the surface tokens the ulw-demo / team-mode
+     window mocks consume (see DESIGN.md § Codex window adapter tokens).
+     Default theme: LIGHT, faithful to the Codex desktop app. */
+  .ulw-window {
+    --codex-window-bg: #ffffff;
+    --codex-window-chrome: #f6f7f6;
+    --codex-window-border: rgba(10, 12, 11, 0.12);
+    --codex-window-text: #17211b;
+    --codex-window-text-soft: #5b675f;
+    --codex-window-chip: rgba(10, 12, 11, 0.06);
+    --codex-window-active: rgba(34, 197, 94, 0.12);
+    --codex-window-active-border: rgba(22, 101, 52, 0.28);
+    --codex-window-accent: #166534;
+    --codex-window-glyph-text: #ffffff;
+    --codex-window-traffic-red: #f87171;
+    --codex-window-traffic-amber: #fbbf24;
+    --codex-window-traffic-green: #34d399;
+
+    /* Subagent lane-glyph identity colors — tuned for the white window
+       (each holds >= 3:1 against --codex-window-bg; the white glyph
+       letter stays >= 4.5:1 on every lane). */
+    --lane-root: #115e59;
+    --lane-explore: #1d4ed8;
+    --lane-library: #92400e;
+    --lane-plan: #6d28d9;
+    --lane-todo: #334155;
+    --lane-execute: #166534;
+    --lane-test: #b91c1c;
+    --lane-qa: #be185d;
+    --lane-review: #4338ca;
+    --lane-continuation: #475569;
+  }
+
+  /* Dark window variant — toggled via the role=group window-theme switch
+     (sets data-window-theme on .ulw-window). Values derive from the
+     retired dark site palette (#0E1411 family). */
+  [data-window-theme="dark"] {
+    --codex-window-bg: #101613;
+    --codex-window-chrome: #0e1411;
+    --codex-window-border: rgba(232, 240, 234, 0.14);
+    --codex-window-text: #e8f0ea;
+    --codex-window-text-soft: #b8c2bc;
+    --codex-window-chip: rgba(232, 240, 234, 0.07);
+    --codex-window-active: rgba(74, 222, 128, 0.16);
+    --codex-window-active-border: rgba(74, 222, 128, 0.32);
+    --codex-window-accent: #4ade80;
+    --codex-window-glyph-text: #0a0c0b;
+    --codex-window-traffic-red: #f87171;
+    --codex-window-traffic-amber: #fbbf24;
+    --codex-window-traffic-green: #34d399;
+
+    /* Lane glyphs re-tuned >= 3:1 against the dark window ground
+       (same hue identity per lane, lifted two Tailwind stops). */
+    --lane-root: #2dd4bf;
+    --lane-explore: #60a5fa;
+    --lane-library: #f59e0b;
+    --lane-plan: #a78bfa;
+    --lane-todo: #94a3b8;
+    --lane-execute: #4ade80;
+    --lane-test: #f87171;
+    --lane-qa: #f472b6;
+    --lane-review: #818cf8;
+    --lane-continuation: #cbd5e1;
+  }
 }
 
 @layer utilities {
+  /* Hero-card washes — soft mint/sage radials composited on the white card
+     base. Light identity: alpha washes over var(--card-base); no near-black
+     stops, no screen blending (which needs a dark ground). */
   .card-gradient-base {
-    background: radial-gradient(120% 100% at 60% 65%, #22c55e 0%, #16a34a 35%, #15803d 70%, #0a0c0b 100%);
+    background:
+      radial-gradient(120% 100% at 60% 65%, rgba(34, 197, 94, 0.10) 0%, rgba(34, 197, 94, 0.07) 35%, rgba(34, 197, 94, 0.04) 70%, rgba(134, 239, 172, 0.03) 100%),
+      var(--card-base);
   }
 
   .card-gradient-beam {
-    background: radial-gradient(55% 55% at 38% -8%, rgba(134,239,172,0.55) 0%, rgba(74,222,128,0.22) 35%, rgba(255,255,255,0) 65%),
-                radial-gradient(32% 28% at 55% -5%, rgba(134,239,172,0.38) 0%, rgba(255,255,255,0) 70%);
-    mix-blend-mode: screen;
+    background:
+      radial-gradient(55% 55% at 38% -8%, rgba(134, 239, 172, 0.30) 0%, rgba(134, 239, 172, 0.12) 35%, rgba(134, 239, 172, 0) 65%),
+      radial-gradient(32% 28% at 55% -5%, rgba(134, 239, 172, 0.16) 0%, rgba(134, 239, 172, 0) 70%);
   }
 
   .card-gradient-sheen {
-    background: linear-gradient(118deg, transparent 18%, rgba(134,239,172,0.16) 26%, rgba(134,239,172,0.30) 30%, rgba(134,239,172,0.12) 35%, transparent 45%),
-                linear-gradient(112deg, transparent 8%, rgba(74,222,128,0.12) 15%, transparent 28%);
+    background:
+      linear-gradient(118deg, transparent 18%, rgba(134, 239, 172, 0.10) 26%, rgba(134, 239, 172, 0.16) 30%, rgba(134, 239, 172, 0.08) 35%, transparent 45%),
+      linear-gradient(112deg, transparent 8%, rgba(34, 197, 94, 0.06) 15%, transparent 28%);
     filter: blur(20px);
-    mix-blend-mode: screen;
     opacity: 0.85;
   }
 
   .card-gradient-pools {
-    background: radial-gradient(55% 50% at 8% 95%, rgba(34,197,94,0.26), transparent 70%),
-                radial-gradient(45% 45% at 95% 40%, rgba(134,239,172,0.20), transparent 70%);
-    mix-blend-mode: screen;
+    background:
+      radial-gradient(55% 50% at 8% 95%, rgba(34, 197, 94, 0.12), transparent 70%),
+      radial-gradient(45% 45% at 95% 40%, rgba(134, 239, 172, 0.16), transparent 70%);
+  }
+
+  /* ampcode-style dotted vertical column rules: every column after the
+     first gets a dotted left rule (MarketingRuleGrid ruleStyle="dotted"). */
+  .rule-grid-dotted > * + * {
+    border-left: 1px dotted var(--border-subtle);
   }
 }

packages/web/app/styles/docs.css

@@ -303,7 +303,7 @@
 .docs-content code {
   font-family: var(--font-mono);
   background: var(--surface-2);
-  color: var(--accent-mint);
+  color: var(--text-soft);
   padding: 0.15em 0.4em;
   border-radius: 4px;
   font-size: 0.85em;