# 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.