clawmates/docs/01-MASTER-HANDOFF-INDEX.md

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.