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]>
67 lines
4.5 KiB
Markdown
67 lines
4.5 KiB
Markdown
# WorkClaw — Marketing Landing Page & Auth (MEASURED)
|
|
> Public landing page (workclaw.com root). LIGHT theme — distinct from the dark-only app.
|
|
> Copy is brand marketing copy → replace with ours. Tokens/layout/components below are the reusable system.
|
|
|
|
## THEME CONTRAST
|
|
- **App** = dark-only (#0a0a0a base).
|
|
- **Marketing site** = LIGHT theme, slate palette, on a near-white tinted bg with subtle noise texture.
|
|
- theme-color metas present: #ffffff (light) and #0a0a0a (dark).
|
|
|
|
## Auth
|
|
- Provider: **Clerk** (clerk-js v5) served from `clerk.workclaw.com`.
|
|
- /sign-in and /sign-up are Clerk-hosted/embedded flows. (Could not capture the logged-OUT screen without signing out, which I did NOT do — session left intact.)
|
|
- Build: **Next.js** (next-size-adjust meta, app router).
|
|
- Recommendation for OpenClaw: use a Clerk (or equivalent) drop-in auth; sign-in route gated, authed users redirect into /claws.
|
|
|
|
## COLOR TOKENS (marketing, light)
|
|
- Heading/near-black: **#161D27** (rgb 22,29,39)
|
|
- Marketing coral (hero/highlight spans): **#E95656** (rgb 233,86,86) — note: DEEPER than the app's #f96565
|
|
- Primary CTA fill: **#E95656** coral
|
|
- Subhead text: slate-600 **#475569** (rgb 71,85,105)
|
|
- Nav links: **#161D27**
|
|
- Nav "Get Started" pill fill: slate-800 **#1E293B** (rgb 30,41,59)
|
|
- Secondary button border: slate-200 **#E2E8F0**; text slate-900 **#0F172A**
|
|
- Section card bg: soft periwinkle/lavender tint (product-mockup cards)
|
|
- Page bg: near-white with subtle noise/texture overlay
|
|
|
|
## TYPOGRAPHY (marketing)
|
|
- Family: **Geist** (same as app)
|
|
- Hero H1: **75px / weight 800 / line-height 67.5px / letter-spacing -3px**. Two lines; first line ("The AI team") in coral span, second line near-black.
|
|
- Section H2: **64px / weight 800 / letter-spacing -2.56px**, near-black, with coral-highlighted keyword spans (e.g. "AI coworkers", "One-click").
|
|
- Subhead: **21.9px / weight 500 / line-height 28.5px**, slate-600.
|
|
- Nav links: 16px / weight 500.
|
|
- Pattern: big tight-tracked display headings + one coral keyword span per heading.
|
|
|
|
## BUTTONS (marketing)
|
|
- **Primary** ("Get Started for Free"): coral #E95656 fill, white text, 16px/600, padding 0 40px, height 64px, **fully-rounded pill** (border-radius ~9999px).
|
|
- **Secondary** ("Book a Demo"): white fill, slate-900 text, 1px slate-200 border, fully-rounded pill, same height.
|
|
- **Nav "Get Started"**: slate-800 fill, white text, pill.
|
|
- **Nav "Sign In"**: white/ghost pill.
|
|
|
|
## NAV (sticky pill)
|
|
- Floating **white rounded pill** bar, fixed at top, horizontally centered, with soft shadow.
|
|
- Contents: logo + wordmark (left) · Product / Blog / Pricing / FAQ (center) · Sign In + Get Started (right).
|
|
- Logo = coral claw mark + "WorkClaw" wordmark → BRAND ASSET, replace with ours.
|
|
|
|
## PAGE STRUCTURE (top → bottom)
|
|
1. Hero: H1 + subhead ("Built for collaboration and safe for your whole team. OpenClaw for actual work.") + dual CTA + trust badges ($100 free credits / No credit card required / SOC II Compliant) + hero photo (muppet-style mascots at laptops — BRAND ART, replace).
|
|
2. "Built on OpenClaw by people from" — logo strip.
|
|
3. "Multiply your brainpower…" H2 + 4 feature-icon row: Secure / Customizable / Easy to use / Built for teams (hand-drawn line icons).
|
|
4. "One-click setup" — feature card, periwinkle bg + product mockup (Create Claw UI).
|
|
5. "Works where you do" — 3,000+ apps / Slack-Teams-email collaboration.
|
|
6. "Always on" — 24/7 messaging.
|
|
7. "Your work, your way" — skills (Create / Install packs / Share).
|
|
8. "Enhanced security" — Admin controls / Custom vault / Separation of data / SOC 2 Type II.
|
|
9. FAQ accordion (What are WorkClaws / kind of work / tools / why / team sharing / hardware / data protection).
|
|
10. Final CTA band ("Build your AI team") + footer (Sign up, Pricing, Docs, Contact, Blog, Book a demo, © 2026 Workmate Labs Inc., Privacy, Terms).
|
|
|
|
## FEATURE CARDS
|
|
- Large rounded cards (~24px+ radius), soft periwinkle/lavender fills, holding product-UI mockups or mascot imagery.
|
|
- Heading uses the same coral-keyword display style.
|
|
|
|
## BRAND ASSETS TO REPLACE (do not clone)
|
|
- WorkClaw logo/wordmark, the red muppet/mascot photography & illustrations, hand-drawn feature icons, all marketing copy, "OpenClaw"/"Workmate Labs" naming, customer logo strip.
|
|
|
|
## REUSABLE SYSTEM TO KEEP
|
|
- Light slate palette + single coral accent; Geist 800 tight-tracked display headings with one coral keyword span; fully-rounded pill buttons (coral primary / white-bordered secondary); floating white pill nav; periwinkle feature cards with product mockups; trust-badge row; FAQ accordion; Clerk-style auth.
|