ProductiveBot Brand Guide · Web Edition · 2026-07-11

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. It keeps the dark and light section rhythm Alex likes, but removes the PDF clipping constraint so the system can breathe.

Use the brand recipeJump 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.
Product Proof

Use screenshots as proof and orientation, not decoration.

The guide should show the design aspects inside ProductiveBot: wizard setup, agent/workflow screens, account/setup surfaces, and homepage proof. Use these to point out real UI patterns.

ProductiveBot homepage screenshot

Homepage feel: parent visual system, split headline, dark environment, product proof, restrained glow.

ProductiveBot setup wizard provider screen

Wizard setup: customer-facing ProductiveBot surface with clear steps, compact fields, and trust-building onboarding copy.

ProductiveBot setup wizard complete screen

Completion state: confirm what is active, what happens next, and where the customer gets support.

ProductiveBot portal dashboard screenshot

Product dashboard: real surfaces beat fake dashboards. Use screenshots when readers need to understand the workflow.

ProductiveBot agent chat view screenshot

Agent work: show conversation turning into action, not just a chat box.

ProductiveBot skills interface screenshot

Skill Store/workflows: make the capability library feel useful, permissioned, and business-oriented.

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.