feat(landing): factory-tone rebuild with interactive live-DOM ultrawork demo, team mode & ulw-research sections

packages/web/DESIGN.md

@@ -27,6 +27,7 @@ LazyCodex feels like a serious command surface for complex codebases: near-black
 | Brand/mid | `--brand-mid` | `#16a34a` | Green gradient middle |
 | Brand/outer | `--brand-outer` | `#15803d` | Selection and gradient edge |
 | Accent/primary | `--accent-primary` | `#4ade80` | CTAs, focus, active docs links |
+| Accent/on-primary | `--accent-on-primary` | `#052e16` | Text on accent-primary fills |
 | Accent/soft | `--accent-primary-soft` | `rgba(74,222,128,0.1)` | Soft green fills |
 | Accent/border | `--accent-primary-border` | `rgba(74,222,128,0.24)` | Soft green outlines |
 | Accent/mint | `--accent-mint`, `--accent-glow` | `#86efac` | Highlights, glow text |
@@ -41,6 +42,26 @@ LazyCodex feels like a serious command surface for complex codebases: near-black
 | Status/warning | `--status-warning` | `#f59e0b` | Warnings |
 | Status/error | `--status-error` | `#ef4444` | Errors |
 
+### Codex window adapter tokens (ulw-demo / team-mode mocks only)
+
+The interactive Ultrawork demo and the Team Mode thread mock reproduce the light Codex Desktop
+surface inside the dark canvas. That light surface is an isolated adapter palette — it never leaks
+into ordinary landing/docs UI, and ordinary tokens never restyle the window interior.
+
+| Role | Token | Value | Usage |
+| --- | --- | --- | --- |
+| Window/canvas | `--codex-window-bg` | `#ffffff` | Codex window body |
+| Window/chrome | `--codex-window-chrome` | `#f6f7f6` | Title bar, sidebar, composer field |
+| Window/border | `--codex-window-border` | `rgba(10,12,11,0.12)` | Window ring, pane dividers |
+| Window/text | `--codex-window-text` | `#17211b` | Primary transcript text |
+| Window/text-soft | `--codex-window-text-soft` | `#5b675f` | Tool rows, metadata, timestamps |
+| Window/chip | `--codex-window-chip` | `rgba(10,12,11,0.06)` | Inline code chips, path chips |
+| Window/active | `--codex-window-active` | `rgba(34,197,94,0.12)` | Active step, active roster row |
+| Window/active-border | `--codex-window-active-border` | `rgba(22,101,52,0.28)` | Active step/proof outlines |
+| Window/accent | `--codex-window-accent` | `#166534` | Active-state text on light surface (AA on white) |
+| Window/glyph-text | `--codex-window-glyph-text` | `#ffffff` | Letters inside roster glyph squares |
+| Window/traffic | `--codex-window-traffic-red/-amber/-green` | `#f87171` / `#fbbf24` / `#34d399` | macOS traffic-light ornaments |
+
 ### Rules
 
 - New UI uses `--accent-primary` and `--accent-mint`; `--accent-cyan` and `--accent-teal` remain green aliases only for compatibility.
@@ -126,6 +147,39 @@ All spacing resolves to a 4px rhythm. Existing Tailwind values map to the same r
 - **Variants**: primary filled text button, secondary outlined button.
 - **States**: hover scale or tonal shift, visible focus ring, no layout-property animation.
 
+### CodexWindow (ulw-demo)
+
+- **Source**: `components/site/ulw-demo/codex-window.tsx` (client leaf), scene data in `lib/ulw-demo-scenes.ts`.
+- **Structure**: light Codex Desktop window (adapter tokens above): title bar with traffic lights and
+  `ULTRAWORK MODE ENABLED!` badge, transcript pane (command chip → status line → scene headline →
+  scene body → 8 numbered workflow steps), right rail (Environment card, Subagents roster,
+  narrative card, `goals.json / ledger.jsonl` card), composer bar, scene tab strip with play/pause.
+- **Variants**: 8 scenes (`research → plan → todo → assign → red → green → qa-retry → checkpoint`),
+  each atomically updating command, status, headline, body, active step, roster lanes, proof chips,
+  ledger, and JSON card.
+- **States**: `data-scene` index; `data-playing` for autoplay; per-step `data-active`; per-lane
+  `data-live`. Scene tabs expose `role=tab` + `aria-selected`; play/pause exposes `aria-pressed`;
+  scene status announces via `aria-live="polite"`.
+- **Accessibility**: fully keyboard operable; content remains readable with JS disabled (scene 0
+  server-rendered); every scene reachable without autoplay.
+- **Integrity**: live DOM only — no raster screenshot, `<img>`, or `background-image` may stand in
+  for window content.
+- **Roster glyph colors**: the subagent glyph squares use per-agent identity hues (blue explorer,
+  amber librarian, violet planner, …) faithful to the Codex Desktop reference. They are scoped to
+  the window adapter and are identity badges, not brand accents — the green-only brand rule applies
+  outside the window.
+
+### TeamModeSection / UlwResearchSection
+
+- **Source**: `components/site/team-mode-section.tsx`, `components/site/ulw-research-section.tsx`;
+  copy constants in `lib/site-config.ts`.
+- **Structure**: TeamMode shows a leader thread plus member thread cards (light chrome via the same
+  adapter tokens) with a `Sent by Codex from another thread` note bubble; UlwResearch is a compact
+  feature band composed from existing surface primitives.
+- **Copy rule**: every visible string traces to `plugins/omo/skills/teammode/SKILL.md`,
+  `plugins/omo/skills/ulw-research/SKILL.md`, or `content/docs/*.md` via the copy ledger — no
+  invented claims, metrics, customers, or dates.
+
 ### DocsHero
 
 - **Source**: `components/design-system/docs-hero.tsx`.
@@ -148,6 +202,20 @@ All spacing resolves to a 4px rhythm. Existing Tailwind values map to the same r
 - Respect `prefers-reduced-motion`; `splash-reveal` disables itself.
 - Focus states are visible through global `:focus-visible` and component-level rings.
 - Docs interactions must keep working: mobile menu, sidebar search, Cmd/Ctrl-K focus, hash navigation, scroll-spy, and prev/next cards.
+- **Hover is an affordance, not decoration.** Hover feedback may exist only on elements with a real
+  action (links, buttons, tabs, inputs). A hover effect on a non-actionable element — cards, list
+  rows, headings, chips, roster rows — is a defect and must be removed.
+
+### ulw-demo timeline
+
+- Scene transitions animate `opacity`/`transform` only (150-300ms); step and lane activation use the
+  same budget. No layout-property animation anywhere in the window.
+- Autoplay starts when the demo scrolls into view (IntersectionObserver), advances scenes every
+  ~7s, pauses on any user interaction with the tabs or the play/pause control, and never traps focus.
+- `prefers-reduced-motion: reduce` disables autoplay entirely and makes scene switches instant;
+  tabs remain fully operable.
+- The typing-caret effect on the command chip is CSS-only (`opacity` blink) and disabled under
+  reduced motion.
 
 ## 7. Depth & Surface
 

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/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 (
@@ -27,10 +29,12 @@ export default function LandingPage(): JSX.Element {
           <Hero />
         </MarketingContainer>
         <InstallBlock />
+        <UlwDemoSection />
         <CommandCards />
         <FeatureWorkflowsSection />
+        <TeamModeSection />
+        <UlwResearchSection />
         <HephaestusSection />
-        <UltraworkSection />
         <DocsCta />
       </MarketingMain>
 

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

@@ -36,6 +36,7 @@
 
     /* Accent — the live-wire green (green-400/300, unambiguously green). */
     --accent-primary: #4ade80;
+    --accent-on-primary: #052e16;
     --accent-primary-soft: rgba(74, 222, 128, 0.1);
     --accent-primary-border: rgba(74, 222, 128, 0.24);
     --accent-cyan: #4ade80;
@@ -51,6 +52,22 @@
     --status-success: #22c55e;
     --status-warning: #f59e0b;
     --status-error: #ef4444;
+
+    /* Codex window adapter — light Codex Desktop surface used ONLY by the
+       ulw-demo and team-mode mocks (see DESIGN.md § Codex window adapter). */
+    --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;
   }
 
   html {