Omar SobhandClaude Opus 4.8
48730abd78
Add the WorkClaw design-reference docs (specs, manifests, tokens, motion, icon/asset references, gifs) under docs/, and move the platform spec/PRD/roadmap from the repo root into docs/. Co-Authored-By: Claude Opus 4.8 <[email protected]>
60 lines
4.5 KiB
Markdown
60 lines
4.5 KiB
Markdown
# 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.
|