clawmates/docs/marketing-and-auth-spec.md

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.