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.

Alex called this out directly: the guide needs more glow, more headline gradient, and real examples of the glow logo. Use glow outside boxes, behind product proof, around primary CTAs, and in hero/social/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

Standardize the blog tables, ad feedback, and content proof patterns.

Alex specifically asked to include the blog post table designs and the headline/ad feedback given to Rebeka. These are part of the brand because they teach the team how ProductiveBot explains itself.

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)

Ad/headline feedback for Rebeka

Do not send another loose list of clever headlines. Organize ads as a testing map by awareness level, pain, proof, creative format, and next action.

Use: 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.Preserves the “we make the hard part practical” contrast Alex liked.
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 Dora/Rebecca/team creative.
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.

These are the required reference families requested in the July 13 ProductiveBot meeting follow-up. A screen is not approved just because it exists; it must be 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.
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

Newest explicit Alex correction wins. Then ProductiveBot positioning skill, current messaging brief, MEMORY.md, live site, then older drafts.

Legal/domain

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

Changelog vs v4 PDF/deck: rebuilt as scrollable HTML, added Lucide icon system, added content/blog table standards, added Rebeka/ads headline feedback section, expanded product screenshot guidance, reduced PDF-specific layout constraints, kept dark/light section rhythm, and made glow/gradient a primary visual language instead of a footnote.