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]>
2.3 KiB
Assets Manifest
Fonts to vendor (self-hosted woff2, font-display:swap, variable 100–900 unless noted)
Geist & Geist Mono & Inter: Next.js/font pipeline (../media/-s..woff2, multiple unicode-range subsets — vendor full set). Fallback faces use local("Arial"). Brand/secondary (served from /fonts/):
- Familjen Grotesk: /fonts/FamiljenGrotesk-VariableFont_wght.woff2 (400–700)
- Satoshi: /fonts/Satoshi-Regular.woff2, -Medium.woff2, -Bold.woff2
- Ranade: /fonts/Ranade-Medium.woff2, -Bold.woff2
- National: /fonts/national-2-regular.woff2, -medium.woff2; National Condensed: national-2-condensed-medium.woff2 NOTE: Satoshi, Ranade, National are commercial typefaces — verify licensing before vendoring, or substitute open equivalents (e.g. Geist already covers UI). Geist/Inter are OFL.
Icon system
Custom inline SVG set (186+ inline svgs/page), 1.5–2px stroke, rounded line caps/joins, ~16–24px sizing — consistent with Lucide-style stroke icons. Service/brand logos served as /services/*.svg (slack.svg, chrome.svg, etc.) — these are third-party brand marks, use official brand assets.
Textures / overlays (REPRODUCIBLE technique)
Grain/noise = inline SVG feTurbulence as a data-URI, layered over wallpaper:
<svg><filter id=n><feTurbulence type=fractalNoise baseFrequency=1.2 numOctaves=2 stitchTiles=stitch/><feColorMatrix values='...alpha .05'/></filter><rect filter=url(#n)/></svg>
- Two observed: dark grain (baseFrequency 1.2, alpha .05) and light grain (baseFrequency 1.6, white, alpha .12). Layer above wallpaper PNG, below content.
Imagery — BRAND ASSETS, REPLACE WITH OURS
- Logo/wordmark: white claw/leaf glyph on black rounded-square (favicon set 16/32/192/512, apple-touch). → replace.
- Agent avatars: illustrated crab/puppet characters (/avatars/...). → generate our own.
- Wallpapers: /wallpapers/workclaw-dark.png, -blur-dark, -blur-light (per-agent panel themes). → generate our own.
- OG/marketing imagery. → replace.
Color scheme
DARK ONLY. html.dark, color-scheme:dark, no light/[data-theme] variant shipped. No second scheme to capture.
Screenshots
Capture at 1440 / 834 / 390 for: app shell, agent chat (empty + populated), sessions column, Computer panel (home + each app), Skills, Apps, Team, Credits, create-claw wizard, Add-Custom-App modal, approval card. (Attach separately — not embeddable here.)