# OpenClaw Platform — MASTER BUILD HANDOFF (index)
> Reverse-engineered design system & spec for building an OpenClaw platform with the look/feel/UX of WorkClaw.
> Stack target: Next.js (App Router) + Tailwind v4 + Clerk-style auth + lucide-react icons.
> RULE: Match the design SYSTEM, not brand identity. All agent mascots, wordmarks, marketing copy, and proprietary art = REPLACE WITH OURS.

## 0. Read order
1. tokens.css — color/space/radius/shadow/motion tokens (foundation)
2. typography-and-components.md — type scale + component primitives
3. motion.md — easing, durations, keyframes
4. This index — maps every surface to its detailed spec

## 1. Foundations
- **Font:** Geist (all surfaces, app + marketing)
- **Signature easing:** `cubic-bezier(.32,.72,0,1)` @ 0.25s
- **Accent coral:** app = #f96565 · marketing = #E95656 (deeper). Use a single `--accent` token, two shades.
- **App theme:** dark only, base #0a0a0a. **Marketing theme:** light, slate palette.
- Files: tokens.css, typography-and-components.md, motion.md, assets-manifest.md

## 2. App — Global shell & pages
- **main-chat-shell-spec.md** — left rail 176px (48px/17px-radius agent avatars, 2px coral active border), header 80px, content rail ~768px, composer (24px radius neutral-800), welcome state (24px/600 heading, -0.6px tracking), suggestion chips.
- **global-pages-spec.md** — /skills (Skill Library, ~24 cards, 419×192), /apps, /team (Members / org chart / Leaderboard tabs), /credits (balance/promo/sales cards), /claws/new (3-step create wizard). Cards: 24px radius, #0a0a0a, 1px #262626, 24px pad. Page title 28px/600.
- **chat-message-components.md** — user = #1A1A1A pill (radius 24/24/4, ring white/0.07, max 75%, right-aligned); assistant = no bubble, 50px avatar + plain text, 15px gap, left-aligned.

## 3. App — Computer panel (the standout feature)
- **CONSOLIDATED-computer-panel-handoff.md** — single source for the panel.
- Supporting detail:
  - computer-panel-style-spec.md — wrapper 448px, card 400×652 (32px radius), per-agent wallpaper inline-gradient, header dot, dock (blur(40px) saturate(1.5), bg-white/0.07, 24px radius), app tiles 56px/16px radius (active:scale-0.92, 0.1s).
  - computer-apps-inventory.md — all 8 apps (browser, slack, chat, files, scheduled/Routines, settings, skills, apps) + sub-views + ?app= routing.
  - computer-window-animations.md — app-shell-zoom-in/out (scale .7→1, 32px radius, ~0.28s), slide-in-right/left, fade, cross-fade.
  - computer-icon-manifest.md — lucide glyphs + /services/ brand SVGs + integration logos.
  - computer-skills-and-addapps.md — Skills app, Add Apps, Add Custom App wizard (Auth type → Access).
  - addapps-logo-sources.md — integration logo origins.

## 4. Marketing + Auth
- **marketing-and-auth-spec.md** — light theme landing page (hero 75px/800/-3px, coral keyword spans; pill CTAs; floating white pill nav; periwinkle feature cards; FAQ accordion; footer). Auth = Clerk (clerk-js v5) on Next.js.

## 5. Responsive & interaction states
- **responsive.md** — behavior at 1440 / 834 / 406 inner-viewport widths.
- **interactive-states-measured.md** — measured hover/active for chip, cream primary, coral primary, dock tile. NOTE: TWO primary button variants — CREAM #f5f5f5 (actions: send/create/invite) and CORAL (wizard CTAs).

## 6. Assets
- **workclaw-ui-icons.zip** (21 SVGs) + **ASSET-BUNDLE-README.md** — reusable UI icons, badges, decorative graphics, and integration glyphs. AGENT MASCOT ART + BRAND LOGOS EXCLUDED.
- In-app icons: install **lucide-react** (ISC). Integration logos: use each vendor's official brand kit.

## 7. Motion reference clips
- computer-panel-open-close.gif
- app-launch-zoom-slowmo.gif

## 8. Original planning docs
- TeamClaw-Platform-Spec-PRD-Roadmap.md — narrative spec / PRD / roadmap.

## 9. Known gaps / explicitly NOT done (by design or safety)
- Logged-OUT Clerk auth screen not captured (would require signing out — not done; session left intact). Provider/stack documented instead.
- No real conversation/transcript content reproduced (only empty-state component geometry).
- No sensitive actions performed: no agent creation, no OAuth connects, no credential entry, no settings/access changes, no financial actions.

---
### REPLACE-WITH-OURS checklist (do not clone)
WorkClaw/OpenClaw wordmarks & logos · red-muppet agent mascots (WorkClaw/Morpheus/Sage/Tank Claw) · hero & feature photography · hand-drawn mascot GIFs · all marketing copy · "Workmate Labs" naming · customer logo strip.