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]>
44 lines
2.8 KiB
Markdown
44 lines
2.8 KiB
Markdown
# WorkClaw "Computer" Panel — In-Depth Style Spec (measured)
|
|
|
|
> Source: getComputedStyle on live DOM, dark theme, 1440 viewport. WorkClaw agent.
|
|
|
|
## 1. Outer positioning wrapper (ASIDE)
|
|
- position: absolute; pinned to right edge of the chat column.
|
|
- width: 448px (rail); height: full (100% / 764px); padding: 88px 24px 24px (88px top clears the global header bar).
|
|
- will-change: transform, width => panel OPENS/CLOSES by animating WIDTH (docked rail expand), not a translate slide. transition applied only during open/close (none at rest).
|
|
|
|
## 2. Visual "screen" card (inner)
|
|
- 400 x 652px; border-radius: 32px; overflow clips children to the rounded screen.
|
|
- Ambient lift shadow (floats off dark bg), white-tinted:
|
|
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)
|
|
|
|
## 3. Wallpaper layer stack (back to front), all absolute inset-0, radius 32px
|
|
1. Base gradient (-z-20): INLINE style, AGENT-THEMED.
|
|
- WorkClaw: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) (slate/navy)
|
|
- Morpheus: coral/red variant (per-agent prop) => wallpaper is a per-claw property.
|
|
2. Dark vignette (-z-10): solid #000 at opacity 0.40 (deepens lower area).
|
|
3. Frosted glass overlay: bg-white/5 (dark), backdrop-filter blur(40px), layer opacity ~0.36 — gives the soft "screen glass" sheen.
|
|
|
|
## 4. Header row
|
|
- Title: SPAN, 12px / weight 500 / line-height 16px, near-white (neutral-100).
|
|
- Status dot: 8x8px circle, fully rounded, rgb(244,63,94) (rose-500), sits left of the title (macOS "running" indicator).
|
|
|
|
## 5. App grid (home)
|
|
- 56x56 tile button; inner icon container 56x56, border-radius 16px (iOS squircle).
|
|
- Icons are brand glyphs (Slack multicolor on white squircle; Claw Chat = coral speech bubble on black).
|
|
- Label: 11px, muted, below icon.
|
|
- "Add Apps": dashed-border placeholder squircle + "+" glyph, label color white/65%.
|
|
- Tile press interaction: active:scale-[0.92], transition transform 0.1s cubic-bezier(0.16,1,0.3,1) (snappy easeOutExpo "icon press").
|
|
|
|
## 6. Bottom dock (Skills / Files / Routines / Settings)
|
|
- Floating frosted capsule: rounded-3xl (24px), gap 20px, padding 16px 24px 12px.
|
|
- bg-white/[0.07] (dark); backdrop-filter: blur(40px) saturate(1.5).
|
|
- ring-1 inset white/[0.04]; shadow: inset 0 1px 0 rgba(255,255,255,.06) (top highlight) + 0 10px 30px -6px rgba(0,0,0,.35) (drop).
|
|
- Dock tiles: ~48px, black bg, 16px radius, inset white hairline ring.
|
|
|
|
## 7. Notes for reimplementation
|
|
- Per-agent wallpaper = pass a gradient (or image) as a prop; everything else (glass, vignette, dock, grid) is shared chrome.
|
|
- The "computer" metaphor = a rounded 32px screen card with layered glass + agent wallpaper, app squircles, and a frosted dock — desktop docks it as a 448px right rail; <=767px it goes full-screen overlay.
|