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. Match the ProductiveBot website’s calm heading treatment: 700 weight, normal letter spacing, and open line height. Use display weight only for an intentional homepage-style hero—not routine guide sections.

H1: clamp(42px, 4.2vw, 54px); font-weight: 700; line-height: 1.08 H2: clamp(30px, 3.35vw, 44px); font-weight: 700; line-height: 1.16 H3: 19px; font-weight: 650; line-height: 1.35 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 Playbook

Make one useful point, show one real work moment, and give the reader proof.

X is not a place to paste polished brochure copy. Use it to show a recognizable business problem, one believable ProductiveBot workflow, and—where relevant—the point where a person stays in control.

Use this rule: one post = one point, one real moment of work, and one reason to reply, save, or share. Do not lead with models, connectors, or an “AI is changing everything” claim.

1. Start with the moment

Open with work the reader recognizes: customer calls turning into after-hours follow-up, context scattered across tools, or a next task that must be rebuilt from scratch.

2. Name the cost

Say what leaving it unresolved costs: missed commitments, slower follow-through, or another evening reconstructing the day.

3. Show one workflow

Make the input and output concrete. Example: call transcript + existing context → prioritized next steps + a ready-to-review follow-up.

4. Show the boundary

For outreach, publishing, money, sensitive data, or a consequential change, state what ProductiveBot prepares and what the person reviews, edits, approves, or declines.

5. End usefully

Close with a practical takeaway or a real question. Do not force a sales pitch into every post.

Publish thisWhat it should showDo not publish this
A specific work problem
A full calendar of calls followed by an evening rebuilding commitments.		Why the moment is costly and familiar before mentioning AI.A generic “AI is the future” claim or a feature list.
A real before-and-after workflowWhat someone does manually today, what ProductiveBot can prepare, and what they still review.An autonomy claim that hides permission, connection, or review boundaries.
A useful product or build lessonOrdinary business language and one clear point of view.A technical architecture dump, roadmap hint, or an unverified capability.
A short real demonstrationThe actual screen and one visible outcome. Use a customer-safe example or redacted artifact.Abstract animation, fake screens, or a product claim without a real receipt.
ProductiveBot-ready post patterns

Start from a real business moment.

These are safe structures, not performance promises. Match every ProductiveBot-specific statement to a current, public fact or attached proof.

After-hours follow-up

A full day of customer calls should not turn into an evening spent rebuilding every promise you made.

ProductiveBot can turn a call transcript and the context you already have into a prioritized next-step list and ready-to-review follow-ups.

You decide what gets sent. The point is to end the day with momentum instead of a second shift.

Why it works: familiar pain, one believable output, and a clear control boundary.

A simple point of view

Most people do not need another place to ask AI a question.

They need help turning the conversations, notes, and customer context they already have into the next piece of work.

Better context. Less rebuilding the day from scratch.

Why it works: a plainspoken contrast and a compact idea worth sharing.

A real demonstration

Here is a better use for AI after a customer call:

1. Pull the commitments from the transcript.
2. Put the urgent follow-ups first.
3. Draft the email for review.

The valuable part is not a clever chat. It is leaving the call knowing what happens next.

Proof: attach a screen recording of this exact, current workflow.

Patterns verified on X

Show the work changing—not just the tools behind it.

These external examples are directional content signals, not ProductiveBot product proof or engagement guarantees.

Before → after workflow

A July 2026 lead-qualification demo showed the manual problem, the actual automation, and the business process underneath it. At the time checked, it had 181 likes and 19 replies.

Lesson: show the work changing, not a list of tools.

Read the source post ↗

Real interface over flashy abstraction

A SaaS-demo post argued for showing the real product, real UI, and real workflow rather than fragmenting the interface into decorative animation. At the time checked, it had 301 likes.

Lesson: a clear real screen builds understanding and trust faster than abstract motion graphics.

Read the source post ↗

Process insight wins: “Automation is less about connecting nodes and more about understanding business processes.” The ProductiveBot translation: start with the business work; show the technology as the helpful layer underneath it.

Pre-publish check

Do not post until it passes all six checks.

Every ProductiveBot post still requires Alex’s explicit approval before publication.

Clarity

Can someone understand the point without knowing ProductiveBot already?

Reality

Does it show a real work moment rather than a capability list?

Claims

Are product, privacy, workflow, and integration claims verified?

Control

Does a consequential action visibly leave the person in control?

Proof

Would a real screen, customer-safe example, or simple visual make the point easier to understand?

Approval

Has Alex signed off on this specific post?

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.