# claude.ai/design Landing Generation Setup Brief **Date:** 2026-04-28 **Author:** PM **Status:** Awaiting Marko execution (manual paste + asset upload) **Predecessor brief:** `briefs/2026-04-28-landing-copy-v4-waggle-product.md` (binding source-of-truth for all copy) **Prior pause artifact:** `briefs/2026-04-20-claude-design-setup-submission.md` (Design System generation form content — historical reference, NOT to be reused for landing — different generation context) --- ## §1 — Setup approach This is a **new generation in claude.ai/design** for the Waggle product landing page. NOT a resume of the Design System pause from 2026-04-20 (that generation completed and produced Waggle Design System with 16 sections, ratified 2026-04-24). Decision tree on how to set up: **Path A (preferred if available):** Open new generation **within existing claude.ai/design workspace** that contains the ratified Waggle Design System. Landing generation inherits design tokens, components, typography, and visual language automatically. Look for "New project" or "New canvas" within existing workspace, not in fresh organization. **Path B (fallback):** If claude.ai/design doesn't expose intra-workspace new project flow, create new generation in fresh workspace, but include in the prompt a reference to the Design System artifacts as visual direction anchor (paste tokens + screenshots). Lower fidelity than Path A; Path A preferred. **Path C (pivot):** If claude.ai/design generation produces unsatisfactory landing implementation after 2-3 iteration cycles, pivot to direct CC implementation in apps/www using v4 copy + wireframe v1.1 + Hive DS tokens. Per `project_claude_design_setup_pause` memory original Path 2 fallback. Document pivot in `decisions/2026-04-XX-landing-implementation-pivot.md`. PM rec: try Path A first (~5 min to verify availability), fall back to Path B if not available, escalate to Path C only if generation quality fails after iteration. --- ## §2 — Project name + description (paste-ready for claude.ai/design form) **Project name:** ``` Waggle Landing — v1 ``` **Project description (if separate field exists):** ``` Marketing landing page for Waggle, the AI workspace product with persistent memory and EU AI Act audit reports. Backed by Egzakta Group advisory practice. Target audience: knowledge workers and vibe coders in regulated and unregulated industries. Distribution channels: organic search, GitHub, LinkedIn referrals, Hacker News, legal tech press, banking/insurance compliance newsletters, Egzakta Advisory partner referrals. Three pricing tiers: Solo (free forever) / Pro ($19/month) / Teams ($49/seat/month, 3-seat minimum). Plus minimal KVARK enterprise bridge (one sentence + one CTA). Implementation will land in apps/www repo (Vite + React 19 + Tailwind 4 + Hive Design System tokens). ``` --- ## §3 — Company blurb (paste-ready, ~95 words, replaces 2026-04-20 dual-axis blurb which is now stale) ``` Waggle is the AI workspace where memory persists. Use any LLM — Claude, GPT, Qwen, Gemini, your local model — and Waggle gives it the memory it should already have. Your projects, decisions, and conversations captured locally, retrievable across models, structurally organized into your own knowledge graph. Zero cloud transit by default. EU AI Act audit reports built into the workflow. Free for individuals, $19 for power users, $49/seat for teams. Backed by Egzakta Group, an advisory practice in DACH/CEE/UK regulated industries since 2010 — not a venture-funded startup pivoting through positioning cycles. ``` **Voice guidelines for the generation:** - Professional + sovereign, not chirpy startup - Anti-jargon in headlines (no "cognitive layer" before scroll fold per wireframe v1.1 §1.6) - Trust through institutional backing, not marketing momentum - Honest claims with specifics ("$19", "$49/seat", "since 2010") not vague aspiration - Compliance-grade language for regulated audience without alienating consumer audience --- ## §4 — Visual direction notes (paste-ready for visual notes field) ``` DESIGN PRINCIPLES (ratified Waggle Design System, 16 sections): Palette: hive/honey hex spectrum - Background: hive-950 #08090c (dark-first; light mode is v1.1 stretch) - Honey accent ladder: 400 #f5b731 / 500 #e5a000 / 600 #b87a00 - Cool secondary: violet #a78bfa / mint #34d399 (status only) - Neutral ladder: hive-50 through hive-950, 11 stops - Honey gradient backdrop on hero only; rest of sections solid hive-950 Typography: - Inter as primary typeface (variable font, weight range 400-700) - Headline scale: 48-64px hero, 36-48px section, 24-32px subhead - Body: 16-18px main, 14px caption - Letter-spacing tight on display weights (-0.02em) Layout paradigm: - macOS-aesthetic shell influence (per Waggle Design System Stage 1+2+3 ratifications) — rounded corners, soft shadows, subtle layering, but applied to marketing landing not desktop UI - Linear + Notion as visual reference points (clean, dense-information-friendly, dark-first) - 60/40 split heroes, full-bleed proof bands, 6+6+1 personas card grid (xl breakpoint) - Generous vertical rhythm (32-48px section gaps, 16-24px element gaps) - Honeycomb texture motif appears as subtle background detail in trust band (low opacity) Motion: - MPEG-4 hero loop ≤800KB, 7s, prefers-reduced-motion suppression mandatory - Bee swarm orchestration motion in personas section (subtle ambient) - All other motion: hover micro-interactions only, no scroll-triggered storytelling Brand assets: - Waggle wordmark + bee mascot logo (waggle-logo.svg) - 13 bee-persona illustrations (one per persona role) - Hex/honeycomb texture asset for trust band background Anti-patterns (binding): - No SaaS landing clichés (centered hero, feature icon grid, trust-logos-of-companies-that-never-heard-of-us, CEO quote carousel) - No "AI does everything" aspirational copy - No KVARK pitch beyond one sentence + one CTA - No bee names as UI command aliases (Opcija 3 dual-layer rule) - No "cognitive layer" jargon in first three scroll viewports - No light-mode design in v1 (dark-first locked) ``` --- ## §5 — Landing generation prompt (paste into main generation prompt field) This is the meat of what Claude Design needs to generate. Paste verbatim: ``` Generate a marketing landing page for Waggle (waggle-os.ai) following these binding constraints: SECTION ORDER (per ratified IA Faza 2 + wireframe v1.1 LOCKED, simplified to 7 sections): 1. HERO — left-aligned 60/40 split (visual right at lg, hidden md and below). Eyebrow + headline + subhead + body + primary CTA "Download for {os}" + secondary CTA "See how it works →". MPEG-4 loop visual right side (placeholder: animated frame transition, will swap real loop). 2. PROOF / SOTA — full-width band, 5 cards. Cards in order: LoCoMo substrate 74%, trio-strict 33.5%, Apache 2.0, Zero cloud, EU AI Act audit reports. Elastic responsive: 5-in-row at xl, 3+2 at lg, 2×2+1 at md, single column at sm. 3. HOW IT WORKS — 3-step narrative with simple iconography. "Install once → Work normally → Compound, don't repeat." Each step has 2-3 sentence explanation, no jargon. 4. PERSONAS — 13 bee tiles, 6+6+1 grid at xl. Each tile is a bee illustration + persona title + 1-line JTBD. Personas adapt their workspace to user role. Tile names locked from existing card copy spec. 5. PRICING — 3 tier cards equal width. Solo (free forever) / Pro ($19/month) / Teams ($49/seat/month, 3-seat minimum). Each card: tier label + price + tagline + audience + included features + primary CTA. Plus tier comparison table below cards (collapsible). 6. TRUST BAND — Egzakta Group attribution + 5 trust signals (EU AI Act, Apache 2.0, Zero cloud, Published methodology, Egzakta Group backed). Honeycomb texture background at low opacity. 7. FINAL CTA — large headline "Stop pasting context. Start using AI that remembers." + primary download CTA + secondary "Compare tiers" CTA + minimal KVARK bridge sentence ("Need it on your organization's sovereign infrastructure? Talk to KVARK team →"). 8. FOOTER — Egzakta attribution line + 4 link columns (Product, Research, Company, Legal). HERO COPY VARIANTS — generate 5 variants for per-persona resolution: Variant A (Marcus, default): Eyebrow "AI workspace with memory" + Headline "Your AI doesn't reset. Your work doesn't either." + Subhead about persistent memory across LLMs + body about pasting context fatigue. Variant B (Klaudia, regulated/Egzakta channel): Eyebrow "AI for regulated industries, finally" + Headline "AI workspace that satisfies your CISO." + Subhead about local-first + EU AI Act audit + Egzakta backing + body about CISO-blocked-ChatGPT pain. Variant C (Yuki, founder/HN channel): Eyebrow "Shared context for moving teams" + Headline "Your team's memory, before someone has to write it down." + Subhead about Notion wiki staleness + Slack search hostility + body about 8-person team onboarding compression. Variant D (Sasha, GitHub/developer channel): Eyebrow "Memory substrate for any agent" + Headline "Memory layer that doesn't lock you to a vendor." + Subhead about Apache 2.0 + MCP + local deployment + body about Mem0 cloud-only / LangMem toy-tier / Letta agent-centric. Variant E (Petra, legal tech channel): Eyebrow "AI for confidential work" + Headline "AI that never sees your client matter." + Subhead about local-first + bar association + audit log + body about ChatGPT-as-malpractice-risk fear. DESIGN STYLE: - macOS aesthetic shell influence (rounded corners, soft shadows, subtle layering) - Inter typeface throughout - Honey palette ladder (#f5b731 / #e5a000 / #b87a00) on hive-950 dark ground - Linear + Notion as reference points - Honeycomb motif as subtle background detail in trust band only - Dark-first locked, light mode is v1.1 stretch OUTPUT FORMAT: - Single React component tree (apps/www/src/app/page.tsx + supporting components) - Component-level extraction: , , , , , , ,