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]>
79 lines
5.3 KiB
Markdown
79 lines
5.3 KiB
Markdown
# WorkClaw "Computer" Panel — Consolidated Handoff Spec
|
|
|
|
> Reverse-engineered from live computed styles (dark theme, 1440 viewport). Design SYSTEM only.
|
|
> Brand assets (logos, avatars, marketing copy) = "replace with ours / use official". UI glyphs = lucide (free, ISC).
|
|
|
|
================================================================
|
|
## 1. PANEL CHROME (the "computer")
|
|
================================================================
|
|
### Outer wrapper (ASIDE)
|
|
- position: absolute, pinned right of chat column; width 448px; full height; padding 88px 24px 24px.
|
|
- will-change: transform, width => OPEN/CLOSE animates WIDTH (docked rail), not a translate slide.
|
|
|
|
### Visual "screen" card
|
|
- 400 x 652px; border-radius 32px; clips children.
|
|
- Ambient white-tinted lift shadow:
|
|
0 4px 12px rgba(255,255,255,.024), 0 24px 60px -8px rgba(255,255,255,.03), 0 40px 80px -20px rgba(255,255,255,.02)
|
|
|
|
### Wallpaper stack (back->front), all absolute inset-0, radius 32px
|
|
1. Base gradient (-z-20) INLINE, AGENT-THEMED:
|
|
WorkClaw = linear-gradient(135deg,#0f172a,#1e293b); Morpheus = coral variant. (per-claw prop)
|
|
2. Vignette (-z-10): solid #000 @ opacity .40.
|
|
3. Frosted glass overlay: bg-white/5, backdrop-filter blur(40px), layer opacity ~.36.
|
|
|
|
### Header row
|
|
- Title SPAN 12px/500, near-white; preceded by 8px rose-500 (rgb(244,63,94)) status dot.
|
|
|
|
### Bottom dock
|
|
- Frosted capsule: rounded-3xl (24px), gap 20px, padding 16/24/12.
|
|
- bg-white/[0.07]; backdrop-filter blur(40px) saturate(1.5); inset ring white/[0.04];
|
|
- shadow: inset 0 1px 0 rgba(255,255,255,.06) + 0 10px 30px -6px rgba(0,0,0,.35).
|
|
- Dock tiles ~48px, black, 16px radius, inset white hairline ring.
|
|
|
|
### App-grid tiles (home)
|
|
- 56x56; icon container 16px radius (iOS squircle); 11px muted label.
|
|
- Press: active:scale-[0.92], transition transform 0.1s cubic-bezier(0.16,1,0.3,1).
|
|
- "Add Apps": dashed-border squircle + plus glyph.
|
|
|
|
================================================================
|
|
## 2. WINDOW ANIMATIONS (signature ease cubic-bezier(.32,.72,0,1))
|
|
================================================================
|
|
LAUNCH app-shell-zoom-in (~0.28s, forwards): scale(var(--app-origin-scale,.7))+radius32 -> scale(1)+rest radius, opacity 0->1 by 40%. transform-origin set to tapped icon center (grow-from-icon).
|
|
CLOSE app-shell-zoom-out (reverse, shrinks into icon) + app-shell-fade-out.
|
|
PUSH app-shell-slide-in-right (.28s): translate(30%)+op.5 -> 0. via .app-shell-anim-push-in.
|
|
POP app-shell-slide-in-left: translate(-30%)+op.5 -> 0.
|
|
TAB/SWAP app-shell-cross-fade-in: scale(.985)->1 + fade.
|
|
PANEL animates docked rail WIDTH (448px) open/close.
|
|
|
|
================================================================
|
|
## 3. APPS (route ?app=<id>; aliases noted)
|
|
================================================================
|
|
Header pattern: top-level => title + close X [+ action icon]; sub-view => back-chevron + title [+ "..." overflow].
|
|
Shared empty/error: muted lucide icon + 16px/600 title + 12px muted subtitle.
|
|
|
|
- Browser (?app=browser) icon /services/chrome.svg — embedded session; empty: globe + "Browser unavailable".
|
|
- Slack (?app=slack) icon /services/slack.svg — pill tabs Overview/Channels/Connection (active=white/aubergine #4a154b); connect-gate w/ white "Connect Slack" pill. [OAuth not actioned]
|
|
- Claw Chat (?app=chat) icon lucide message-circle — search pill + thread rows (avatar+name+timestamp+2-line preview; unread=coral). [layout only]
|
|
- Files (?app=files) icon lucide folder — list rows (My Documents/Received Files/Shared ClawDrive); 45px rows; drill-in => empty/error state.
|
|
- Routines (?app=scheduled) icon lucide bell — refresh action; empty/error via cron gateway (cron.list).
|
|
- Settings (?app=settings) icon lucide settings — avatar+name+role, description w/ "more", info rows, Edit profile; "WHO ELSE HAS ACCESS" (Other people radios + Other Claws coral toggle). [not modified]
|
|
- Skills (?app=skills) icon lucide zap — empty state + bottom "Add Skill" pill (370x48, near-white).
|
|
- Add Apps (?app=apps) icon lucide plus — category pills (All/Productivity/Communication/Dev tools/Design/Finance), search, integration rows w/ "+", bottom "Add custom app" pill.
|
|
- Add Custom App wizard: Auth type (Keys / Username+Password / MCP+OAuth) -> Access (Only Me / Anyone in team) -> [credential form, not entered].
|
|
|
|
================================================================
|
|
## 4. ICONS & LOGOS
|
|
================================================================
|
|
- UI glyphs = lucide (24x24, gradient stroke+fill via url(#mvp4-glyph-gradient-*)). Free (ISC). Use directly.
|
|
- Browser/Slack tiles = /services/chrome.svg, /services/slack.svg (official brand marks).
|
|
- Integration tiles (Add Apps): /services/{slack,chrome,notion,linear,figma}.* and /s.v0/app_<id>/logo/orig (Gmail, GCal, Drive, GitHub, Zoom, Stripe, HubSpot…). Third-party brand logos — use official assets, don't recolor.
|
|
|
|
================================================================
|
|
## 5. SHARED COMPONENT TOKENS
|
|
================================================================
|
|
- Primary pill button: fully rounded, near-white (#f5f5f5) fill, near-black text, 14px/600, 48px tall.
|
|
- Section label: uppercase ~11px, letter-spaced, muted.
|
|
- Grouped card: 12px radius, neutral-900/800 fill, no border.
|
|
- List row: ~45px, 12px padding, 12px gap, 16px/400 label, hover bg neutral-800/40.
|
|
- Coral accent #f96565; selected radios + toggles use coral.
|