ProductiveBot Brand Guide · Product Screens Edition · 2026-07-14

Make every surface feel like ProductiveBot before it says ProductiveBot.

This is the team-shareable HTML source of truth for ProductiveBot marketing, content, web, product, and support surfaces. This edition adds the required product-screen library and permanently excludes raw Gateway views from creative references.

See the required capture setJump to content standards
Positioning

ProductiveBot is the business layer for practical AI agents.

Lead with completed work, trust, and ownership. The Mac mini is the customer-owned workstation. ProductiveBot is the setup, memory, support, permissions, Skill Store, diagnostics, and workflow layer that makes agent engines useful for real businesses.

Owned workstation

Say “Mac mini AI agent workstation” when offer clarity matters. Pair hardware ownership with “Mac mini included” so the current bundle stays clear.

ProductiveBot layer

Setup wizard, Scout/Doctor, memory, permissions, Skill Store, support, diagnostics, reliable integrations, and update boundaries. This is the moat.

Completed work

Support, operations, research, scheduling, content, lead follow-up, admin, reporting, and internal workflows. Not chat output. Work that gets finished.

Strong public line: “ProductiveBot turns your Mac mini into an owned AI agent workstation for your business.”

Guardrail: do not reduce ProductiveBot to “a Mac mini with OpenClaw installed.” Engines are under the hood.

Visual System

Dark navy foundation, bold Inter, white-to-cyan emphasis.

ProductiveBot should not look like a generic white SaaS catalog. The parent system is the homepage and affiliate/partner feel: dark, compact, proof-first, and restrained.

Typography

Inter/system sans. Hero 800-850 weight, tight line height, one dominant claim. Headline gradients belong on one emphasized phrase, not every word.

H1: clamp(48px, 6vw, 82px); font-weight: 850; line-height: .96 H2: clamp(34px, 4vw, 56px); font-weight: 835 Body: 17-22px depending on density

Section rhythm

Uppercase cyan kicker, bold headline, short lede, then useful cards/tables/proof. Keep the dark sections and light reference sections alternating.

Cards and panels

#0D2340 surfaces, subtle cyan border, useful copy, 8-20px radius. Cards explain outcomes, rules, proof, or steps. No nested card stacks.

Color Tokens

Cyan is the precision accent. Glow is the atmosphere.

Use pure cyan for sharp details and soft cyan for light spill, CTA glow, and atmosphere. Avoid purple-blue, one-note beige, generic cyber teal, and heavy neon borders.

Deep navy#09182F
Card navy#0D2340
Brand cyan#00F2FF
Soft cyan#66F7FF
Heading#F8FAFC
Body#C8D6E5
Glow + Gradient

The brand glow is not decoration. It marks the system coming alive.

Use glow to signal energy, focus, and an active system. Place it outside boxes, behind product proof, around primary calls to action, and in hero, social, and display-logo moments.

Headline gradient

A Real AI Employee.
On Your Desk.

One phrase carries the charge. The surrounding words stay white.

Exterior glow

Light spill outside the panel or behind the object, not a thick cyan tube around every card.

Logo glow
ProductiveBot logo with glow

Use for hero, covers, social, thumbnails, and closing brand moments.

Approved glow tokens

Hero atmosphere: radial-gradient(circle at 70% 20%, rgba(102,247,255,.16), transparent 48%) Card glow: box-shadow: 0 0 34px rgba(102,247,255,.10) CTA glow: box-shadow: 0 18px 38px rgba(102,247,255,.24)

Do not ship

  • No purple or generic cyberpunk glow.
  • No glow on every card in dense grids.
  • No large transparent overlays on light print/PDF pages.
  • No fake generated glow logos. Use the real logo assets.
Iconography

Use Lucide-style line icons as part of the system, not emojis.

ProductiveBot uses small, useful line icons in cyan chips. They help scanning in tools, support docs, blog components, ads, partner pages, and product UI.

Glow

Brand atmosphere, active system, primary focus.

Proof

Verified output, review, workflow, completion.

Control

Ownership, privacy, permissions, security.

Workstation

Mac mini, agent system, hardware included.

Icon rule: 24x24 line SVG, stroke width 2, rounded caps/joins, cyan or slate. Use icons inside buttons, chips, nav markers, feature cards, and checklists. Do not use emojis as production UI or marketing iconography.

Logo System

Use the wordmark files. Never redraw the mark.

The logo is an asset, not a construction recipe. Do not approximate it with SVG text, regenerate it, trace it, recolor it, or rebuild it from memory.

White ProductiveBot logo

Canonical on dark: precise UI, documents, nav, compact placements.

Dark text ProductiveBot logo

Canonical on light: white/light neutral surfaces only.

ContextUseDo not
Homepage / partner / guide heroWhite glow or no-glow logo on deep navy, with soft exterior glow.Do not place the logo on busy screenshots or generated backgrounds.
Docs / reference sectionsDark-text logo on white/light neutral pages.Do not use dark-text logo on navy.
Social / thumbnailsGlow variant large enough to survive 320px preview.Do not stack extra filters over the approved glow file.
Content Standards

Use shared patterns for content, campaigns, and product proof.

Use these standards across blogs, ads, social posts, sales materials, and partner content so every contributor explains ProductiveBot clearly and consistently.

Blog component pattern

Shopify strips classes and divs, so reliable article components use inline-styled tables. Keep rounded 8px corners, navy headers, ProductiveBot cyan column emphasis, and compact rows.

Reliable components: - Comparison table: DIY vs ProductiveBot - Spec table: neutral two-column - Numbered steps: table-based - FAQ: H3 questions + JSON-LD Colors: teal accent rgb(0,242,255) PB bg rgba(0,242,255,.03-.10) DIY bg rgba(15,47,87,.15-.40)

Campaign message framework

Build campaign messages around audience awareness, customer pain, relevant proof, creative format, and one clear next action. Each asset should make one focused promise.

Message examples by awareness stage: Problem aware: "AI looks easy in demos. Making it useful in your business is the hard part." Solution aware: "Skip the 40-hour DIY setup. Start delegating real work." Product aware: "ProductiveBot turns a Mac mini into an owned AI agent workstation for your business." Most aware: "Setup, support, memory, and workflows included."
Content surfaceStandard patternWhy it matters
Blog comparison sectionsProper table with DIY/competitor muted blue column and ProductiveBot cyan-tinted column.Makes ProductiveBot’s practical value visible at a glance.
How-to articlesNumbered step tables with a summary row for time/cost/effort.Turns abstract AI claims into a visible process the reader can follow.
AdsHook grouped by awareness level, then matched with demo/testimonial/education/story/screenshot creative.Prevents generic “AI assistant” copy and keeps the buyer tension visible.
Social graphicsOne clear promise, one product/proof anchor, real logo, dark navy, controlled glow.Creates consistency across campaigns, channels, and contributors.
Verified Screen References

Show ProductiveBot-owned surfaces in crisp, inspectable detail.

Only verified ProductiveBot-owned screens belong in the reference gallery. Missing surfaces stay explicitly pending until a current, privacy-safe source is captured; they are never backfilled with Gateway UI, design-harness screens, or fabricated interfaces.

Permanent exclusion: do not use Gateway chat, Control, Channels, Instances, Sessions, Usage, Cron Jobs, Agents, Nodes, Config, or other raw engine UI as ProductiveBot product proof. OpenClaw may be named in technical copy when useful, but it is not the visual brand surface.

ProductiveBot homepage hero reference

Homepage: capture the full desktop page plus separate high-resolution crops for hero, product/value section, social proof, how it works, and final CTA. Section crops are encouraged when they make layout and type easier to inspect.

ProductiveBot customer partner portal dashboard

Partner portal: show the customer-facing dashboard, navigation, referral/training/brand areas, and a clean logged-in state. Do not substitute an internal admin screen.

ProductiveBot partner portal brand assets view

Partner creative reference: use the portal's brand/assets area to show how customers and partners access approved materials. Crop long pages into readable modules when needed.

ProductiveBot dark navy background with connecting lines

Creative background: this dark blue field with fine connecting lines is an approved ProductiveBot look-and-feel reference. Preserve negative space, keep lines subtle, and use soft cyan glow as atmosphere.

Pending verified captures: support admin portal, Online Scout, native ProductiveBot app icon/menu, customer Skill Store, and finalized email renders. The capture specification below is approved now; the gallery remains incomplete until those real sources pass privacy and fidelity review.

Required Capture Set

One maintained source library for product, support, email, and content creative.

Maintain these core reference families for product, support, email, and marketing work. A screen is approved only when it is current, readable, privacy-safe, and captured at sufficient resolution.

SurfaceRequired viewsCapture notes
HomepageFull desktop, full mobile, hero, product/value, social proof, how-it-works, CTAUse current production content. Section-level crops are valid and often preferable.
Support admin portalTicket queue, conversation/detail, customer/session context, status/actionsInternal team view. Redact customer PII, secrets, tokens, private URLs, and message content not approved for creative use.
Online ScoutLanding/status, diagnostic result, guided action, recovery/successShow the actual online customer support UX, not the setup-wizard Scout panel and not the Gateway behind it.
ProductiveBot Mac appMenu-bar icon at native scale, open menu, key status states, primary actionsInclude enough macOS chrome to establish the menu-bar context. Keep the icon and labels pixel-sharp.
Skill StoreCustomer browse page, categories/search, skill detail, install/permission stateCapture the customer Skill Store at support.productivebot.ai/skills. Do not substitute the Gateway's installed-skills screen.
Customer partner portalLogin, dashboard, training, brand assets, tiers/earnings where appropriate, FAQLabel customer-facing versus internal admin surfaces correctly.
Finalized emailsDesktop and mobile renders of approved welcome, order/onboarding, support, update/newsletter, and partner emailsOnly finalized templates. Capture subject/preheader plus body; use seeded test data and remove live recipient data.
Blog visual examplesHero image, annotated product screenshot, comparison table, numbered process, pullout/proof blockShow visuals that explain the article. Do not use generic stock AI art when a real screen, diagram, or workflow would teach more.

Still needed for a complete library: current privacy-safe support admin captures, actual Online Scout, native ProductiveBot menu-bar/app, customer Skill Store, and final approved email renders. Do not fill these gaps with old Gateway screenshots, setup design harnesses, or fabricated UI.

Screenshot QA

High quality means current, sharp, readable, and safe.

Capture at native resolution or higher. Preserve originals, then make derivative crops for specific channels.

Resolution

Desktop source: at least 1440px wide, preferably 2x/Retina. Mobile source: native high-density capture. Never upscale a soft screenshot.

Readability

Text and controls must remain legible at the guide's displayed size. Split long pages into purposeful crops instead of shrinking them into a poster.

Privacy

Use demo data. Redact customer names, emails, tickets, tokens, URLs, IDs, terminal output, and private work before the asset enters the library.

Source record

Keep the original PNG, capture date, product version, surface name, owner, approval status, and any redaction notes. Replace stale references rather than silently mixing versions.

Voice + Claims

Plain English, concrete outcomes, no invented proof.

ProductiveBot should sound credible and already useful, not inflated. Avoid buzzword piles and generic AI hype. If a claim cannot be verified, label it or leave it out.

SayAvoid
AI assistants that turn conversations into completed work.A generic AI assistant / chatbot / SaaS wrapper.
Your Mac mini AI agent workstation, ready to run.A Mac mini with OpenClaw installed.
Setup, support, memory, permissions, diagnostics, and workflows included.Fully autonomous, replaces people, remembers everything, or other unqualified absolutes.
Runs on hardware you own, with human-in-the-loop control.Invented customers, metrics, ratings, review counts, or partnerships.
Conversational Content Voice

Sound like a capable partner, not an AI campaign.

ProductiveBot speaks to the work already piling up: the context that gets lost, the follow-up waiting after a full day, and the next move a capable operator should not have to reconstruct alone.

The content formula

  1. Start with the lived work bottleneck.
  2. Name the relief in the customer’s language.
  3. Show one concrete ProductiveBot workflow.
  4. State the relevant review, approval, or ownership boundary.
  5. Close with a practical next step.

Example: “Your day is full of customer calls. The follow-ups wait until dinner, and important details start to blur. ProductiveBot can turn the call transcript and context you already have into a prioritized next-step list and ready-to-review follow-ups. You decide what gets sent.”

What the buyer actually wants

Not agent infrastructure. They want confidence, time back, business leverage, and a clear path to a first useful result.

  • “I had meetings all day; now I have to remember every promise I made.”
  • “The right follow-up is somewhere in a recording, Slack, email, or document.”
  • “I need momentum without becoming a systems expert.”

Lead with the business result. Introduce the owned AI agent workstation and technical layer after the reader can picture the outcome.

UseAvoid
“Bring the right context forward when it is time to act.”Generic “AI is the future” or productivity-hype claims.
“Prepare the work. Keep the human in control.”“Set it and forget it,” “AI workforce,” or replacement language.
A concrete input and output: call transcript + customer context → prioritized next steps + ready-to-review draft.Feature inventories or unexplained MCP, CLI, model, or connector language.
“Start with the workflow costing you the most time.”“Revolutionary,” “seamless,” or unverified claims.

Control is part of the promise: for outreach, publishing, money, sensitive data, and meaningful system changes, describe what ProductiveBot prepares and what the customer reviews or approves. Do not imply a connection, permission, or automatic action that is not verified for the exact workflow.

Founder voice vs. team voice

Alex can be warmer, more exploratory, and story-led: the “I built this for myself” origin, candid observations, and personal analogies are useful. Team content should retain the clarity and real-work specificity while being tighter: name the problem, show what ProductiveBot prepares, and make customer control explicit.

Do not imitate conversational filler or force founder anecdotes into team copy.

Content production with Elle

Give Elle the objective, audience, channel, format, CTA, source material, required claims, and available product proof. Before drafting, Elle should identify the customer moment, core message, source-backed claim inventory, and proof plan.

Before publishing, check: buyer understood before AI is mentioned; one concrete workflow; plain-English technical language; correct human-control boundary; and claims traceable to approved sources.

Team content checkpoint: “Would a busy operator feel understood, see one believable way ProductiveBot can help this week, and still know they are in control?”

X Content Standard

On X, lead with a real work tension and show the receipt.

Use X to earn recognition and trust—not to borrow hype. Our repeatable advantage is proof of practical, human-controlled work: a real guide, release note, screenshot, timer, or workflow artifact.

1. Start with the tension

The first line names a moment the operator recognizes: a follow-up waiting at night, context scattered across tools, or the burden of assembling and maintaining an agent setup. Do not open with models, connectors, or an “AI is changing everything” claim.

2. Put proof early

By the second or third beat, attach the checkable object: an unedited demo, redacted screenshot, release note, published guide, timer, or completed-work artifact. No artifact means no ProductiveBot claim post.

3. Make control visible

For sending, publishing, money, sensitive data, or consequential changes, show what the agent prepared and where the human reviews, edits, approves, or declines. Approval is a credibility feature—not an apology.

Use this constructionRequired proof / boundaryNever use this
One bottleneck → one believable workflow → one review point.
Short lines; let the first line stand alone.		Every ProductiveBot-specific claim must be supported by a current public fact or the attached artifact. Label a fictionalized operator moment Illustrative (hypothetical).Unreleased features, Company Brain/roadmap hints, invented customer outcomes, vague autonomy claims, or “own the AI” language.
Release / ship notes: concise arrival line, 3–5 factual changes, one demo clip or screenshot.Only shipped changes. Link the release note or show the working customer-facing artifact. State relevant permission/approval changes plainly.Teasers for unshipped work, architecture dumps, or a changelog without a real customer-visible receipt.
Founder build log: one real thing our own unit prepared this week, plus what it asked before acting.Use ProductiveBot’s own redacted data and a real artifact. Include a true limit, correction, or approval moment when it matters.Fabricated testimonials, inflated time/money claims, or a private customer story without permission.
Setup gap: respectfully explain one DIY operational burden and show the verified ProductiveBot answer.Show only the exact setup, support, permission, or maintenance behavior we can demonstrate today. Respect DIY builders; generalize friction rather than naming or dunking on them.Employee-replacement framing, fear marketing, danger-flexes, false scarcity, or a “stop building SaaS” hot take.

Repeatable X series

  1. The Setup Gap — one real operational chore from DIY agent setup, followed by a proof-backed ProductiveBot response.
  2. Approved — what the agent prepared, what the human decided, and why. A declined action can be the strongest trust asset.
  3. Ship Notes — versioned, artifact-linked updates that show the product is maintained and getting better.

Ish + Elle pre-publish gate

  1. Does the first line name a buyer tension, not a feature?
  2. Is there a real proof object attached or linked?
  3. Does every claim stay within the proof?
  4. Is the approval/control point explicit where needed?
  5. Are hypotheticals labelled and non-public work excluded?
  6. Is the success signal defined before posting: operator replies, useful questions, saves, or qualified conversations?
  7. Has Alex signed off on this specific post?

X checkpoint: “Could a skeptical operator see the work, understand the boundary, and believe this without taking our word for it?”

Judge operator content by the quality of replies and conversations—not only likes. Each post still requires Alex’s explicit approval before publication.

Brand Recipe

Every strong ProductiveBot piece follows the same recipe.

Use this checklist before sending work to the team or publishing a new surface.

01 Dark navy base

#09182F foundation, #0D2340 panels, controlled cyan accents.

02 Bold Inter headline

One dominant idea, weight 800+, tight line height.

03 One gradient phrase

White-to-cyan on the phrase carrying the promise.

04 Real logo

No redraws, no generated wordmarks, no approximations.

05 Soft exterior glow

Outside boxes, behind product proof, around primary action.

06 Real proof

Mac mini, UI screenshots, workflow output, verified review language.

07 Useful cards

Every card explains a rule, offer, outcome, step, or proof point.

08 Truth boundary

No invented claims. Roadmap, beta, and shipped-today stay visibly separate.

QA + Source Rules

Not ready until the rendered artifact passes the human scan.

For this guide, the HTML page is the source of truth. PDF export is optional and secondary because the brand needs flexible space, screenshots, and responsive layout.

Visual QA

Desktop and mobile screenshots. No clipped text, awkward wraps, hidden sections, or PDF-only artifacts. Look at the output, not just text extraction.

Source hierarchy

Use the current approved guide first, followed by current product truth, the live product and website, and approved source assets. Retire older drafts when they are superseded.

Legal/domain

Customer-facing brand: ProductiveBot. Legal: OG Analytics Holdings, LLC d/b/a ProductiveBot. Domain: productivebot.ai, never .com.

Format standard: keep this guide as responsive HTML so the team can inspect real screenshots, copy reusable patterns, and download approved assets. Preserve the dark/light section rhythm, Lucide-style icon system, content tables, product-screen guidance, and controlled glow treatment.