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]>
53 lines
3.3 KiB
Markdown
53 lines
3.3 KiB
Markdown
# 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 <Name>. What can I help with?" — 24px/600, line-height 33px, letter-spacing -0.6px, near-white; claw name colored coral. Geist.
|
|
- Subline: "<Role> · 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 <Name>…", 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).
|