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]>
3.3 KiB
3.3 KiB
Main Chat Shell — Layout & Component Spec (measured)
Live computed styles, dark theme. Three-column layout: left rail | chat column | (right Computer rail when open).
Global layout
- Body: dark bg (#0a0a0a family); font-family Geist (Geist Fallback, ui-sans-serif…). Dark-only.
- Left rail: 176px wide, padding 16px 0, transparent, vertical flex. Holds: claw avatars (top), global nav (bottom), user.
- Chat column: flexible center; header (80px) + scrollable message area + centered composer.
- Right: Computer panel docks as 448px rail (see panel spec).
Header (80px tall, padding 0 24px 0 20px, transparent, static)
- Center cluster: Add channel (+), Slack icon, Sessions (list icon), New session (compose icon).
- Right: device-preview icons + CORAL "Open device" computer launcher.
- Icon buttons: 36x36, fully rounded, bg neutral-900 (#0a0a0a), muted icon (lab 84.9).
- Computer launcher: 42x42, fully rounded, transparent fill, coral glow shadow rgba(249,101,101,.48) 0 5px 14px -3px + inset top highlight rgba(255,255,255,.22). Dark icon.
Left rail — claw avatars
- Avatar button: 48x48, border-radius 17px (squircle).
- ACTIVE claw: 2px solid coral border (#f96565). Inactive: no border, name muted.
- "Add claw": 48x48 dashed-border squircle + coral plus.
Left rail — global nav (links)
- Skills (/skills), Apps (/apps), Team (/team), Credits (/credits) + user button.
- Nav link: 168x32, 16px text, icon+label gap 12px, padding 8px 12px, muted color (active brighter).
- Credits shows balance inline (coral when negative, e.g. -936).
Welcome / empty chat state (centered)
- Avatar: 126x126 (rounded via wrapper/mask).
- Heading: "Hi, I'm . What can I help with?" — 24px/600, line-height 33px, letter-spacing -0.6px, near-white; claw name colored coral. Geist.
- Subline: " · Shared with your team" — 16px/400.
Composer (centered, ~672px max)
- Container: border-radius 24px, bg neutral-800 (#262626), padding 12px 16px.
- Shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -4px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.063).
- Left toolbar icons: Attach files, Use a skill — 36x36 fully-rounded transparent.
- Input: placeholder "Message …", 16px.
- Send button appears at right when text entered (cream pill, coral glow — see primary button).
Suggestion chips (below composer, empty state)
- Row of 4 at desktop (wrap/stack at narrow widths): Create a daily briefing, Write a research report, Make a presentation, What can a Claw do?
- Chip: h-9 (36px), rounded-full, bg neutral-800, ring-inset neutral-700/70, shadow --shadow-bubble, 12px/500 text + leading coral icon.
- Hover: bg neutral-700/60, ring neutral-600. Press: active class (no scale rule).
Message list (active conversation)
- Renders message bubbles in the scroll area above the composer (composer stays pinned bottom; header shows "Stop Claude" primary pill while streaming).
- Bubble component uses --shadow-bubble; (full bubble spec not captured — only sessions available contained out-of-scope transcript content).
Sessions column (?sessions=1)
- Left-side list: Search field + session rows + "New session". Toggled via header Sessions icon.
Tokens
- Geist / Geist Mono / Inter fonts. Coral accent #f96565. Squircle radius 17px (avatars), 24px (composer), full (chips/icon btns).