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]>
49 lines
3.2 KiB
Markdown
49 lines
3.2 KiB
Markdown
# Global Pages — Layout & Component Specs (measured)
|
||
|
||
> Full-page routes (left rail + top-bar persist). Dark-only. Geist font. Content uses bordered cards on #0a0a0a.
|
||
|
||
## Shared page chrome
|
||
- Page title: 28px/600 Geist, near-white. Description: ~14px muted below.
|
||
- Primary action pill (top-right): fully rounded, 40px, near-white fill / dark text (Create, Invite, Add Custom App) OR coral fill (#f96565) for wizard CTAs.
|
||
- Card pattern: 24px radius, bg neutral-950 (#0a0a0a), 1px border neutral-800 (#262626), 24px padding.
|
||
- Segmented tabs: rounded container; active = filled chip; inactive = muted.
|
||
|
||
## /skills — "Skill Library"
|
||
- Title + "Browse skills published by your team and the WorkClaw catalog." + "Create" split button.
|
||
- "All Skills" section: search pill ("Search skills…") + "All categories" dropdown.
|
||
- 2-col card grid (gap). Skill card: 419x192, 24px radius, 1px border, 24px pad.
|
||
- Card: title 20px/600, "by WorkClaw" attribution, description (clamped), "+" install btn (top-right), "N installs on your team" footer.
|
||
- Catalog ~24 skills (Algorithmic Art, Canvas Design, Competitive Analysis, … Web Artifacts Builder). [WorkClaw-authored — copy is brand content, replace.]
|
||
|
||
## /apps — "Apps"
|
||
- Title + "Add Custom App" pill (top-right).
|
||
- "Find an App" search + "Category" dropdown.
|
||
- "Browse All Apps / Discover apps to connect using OAuth".
|
||
- 2-col app rows: brand icon + name + description + circular "+" add btn.
|
||
- Same catalog/icons as in-panel Add Apps (/services/*, /s.v0/app_*/logo/orig). [Third-party logos.]
|
||
|
||
## /team — "<Workspace>" (e.g. Matrix)
|
||
- Workspace name + inline edit (pencil) + "N member(s) in your workspace" + "Invite" pill.
|
||
- Segmented tabs: Members | Claw org chart | Leaderboard.
|
||
- Members = data table: columns Name | Email | Joined; row = avatar + name + role badge (e.g. "Owner" pill) + email + date.
|
||
|
||
## /credits — "Credits"
|
||
- Title + "Manage your balance, subscriptions, and usage history."
|
||
- Card 1 (Balance): "AVAILABLE CREDITS" label + large number (coral if negative) + "Buy credits" pill + "View activity" link + plan note; "USAGE · LAST 7 DAYS" with breakdown (Cloud/AI) + coral->green progress bar + "Out of credits".
|
||
- Card 2 (Promo code): icon + title + desc + code input + "Redeem" btn.
|
||
- Card 3 (Sales): sparkle icon + "Scaling beyond self-serve?" + copy + "Talk to sales" btn.
|
||
- [Billing — Buy credits / Redeem not actioned (financial).]
|
||
|
||
## /claws/new — Create-Claw Wizard (?step=identity)
|
||
- 3-step progress bar (top center; segments fill as you advance). Steps: identity -> access -> slack.
|
||
- Heading "Create your Claw" (name colored coral).
|
||
- Step 1 Identity: avatar preview w/ ‹ › carousel arrows; row of bg color swatches (5 presets + add);
|
||
Name field (pre-filled, randomize/refresh icon) + Job title field (info tooltip).
|
||
- Field label: 12px/600. Input: rounded, neutral-800 fill, 16px text.
|
||
- CTA: coral "Continue ->" pill (40px, #f96565, white text, 14px/500). [Wizard not completed — creates a real agent.]
|
||
|
||
## Button variants summary
|
||
- CREAM primary: near-white (#f5f5f5) fill, dark text — actions/send/create/invite.
|
||
- CORAL primary: #f96565 fill, white text — wizard advance / key CTAs.
|
||
- Both fully rounded, ~40-48px tall, 14px/500-600.
|