Brand Guidelines

Identity

Brand Story

Who we are, what we stand for, and how we show up.

Mission

Give MSPs the power to DIY complex solutions and automations.

Tagline

MSP automation for the rest of us.

Positioning

MSP Copilot is the underdog tool — not enterprise, not expensive, not gatekept. We don't make decisions for our users. We give technical MSP operators the building blocks to automate what matters, on their terms. We are the enterprise swiss army knife on a DIY budget.

60–70% Magician

Transformation through tools. We turn manual chaos into automated systems. "We give you the power" — not "we do it for you."

30–40% Sage

Expertise and reliability. "They've thought through the security and reliability I need." We've done the hard thinking so our users can build with confidence.

Design Philosophy: "Like a shell script, but polished." — Terminal-native precision refined for the web. Monospace type signals technical depth. Navy signals reliability. Green signals "it works."

Core Values

The principles behind every product and design decision.

Empowerment over hand-holding We provide the tools, you make the decisions.

Transparency Clear pricing, honest docs, no hidden gotchas.

Practicality If it doesn't save time, it doesn't ship.

Accessibility No gatekeeping, no vendor lock-in.

Logo System

Logo

The full MSP Copilot logo lockup — icon and wordmark together. Use the RGB version on light backgrounds and the white version on dark backgrounds.

RGB — light backgrounds

White — dark backgrounds

Minimum size: Do not render the full logo smaller than 120px wide. Below this size, use the icon mark instead.

Clear space: Always maintain clear space equal to the height of the underscore character on all sides of the logo.

Icon Mark

Standalone icon for app icons, social media, favicons, and small contexts. Use the full-color version on light backgrounds and the white version on dark.

RGB — any background

RGB — on dark

Mono — navy

Mono — white

Square — white mono

Minimum sizes: Full-color icon: 24px. Monochrome mark: 16px. Below these sizes the detail is lost.

Inline Text Alignment

The icon mark is designed to sit inline with text. The underscore bar hangs below the baseline like a cursor. Based on the CursorIcon component.

14px MSP Copilot

18px MSP Copilot

24px MSP Copilot

32px MSP Copilot

Alignment spec (from CursorIcon.tsx):
Height: 0.93em (matches cap height) · Vertical align: -0.21em (underscore below baseline) · Margin left: 0.12em · Margin right: 0.35em

Favicon & App Icon

The monochrome mark is used as the site favicon. It scales cleanly from 16px to 128px+.

Implementation:
SVG favicon: src/assets/favicons/favicon.svg
Mask icon color: #002c44
Apple touch icon: 180×180 PNG
ICO fallback: src/assets/favicons/favicon.ico

III

Visual Language

Color Palette

The full brand color system. Navy is the foundation — everything else supports it.

Terminal — Brand Navy

navy-900 #00131f Dark mode deep bg

navy-800 #001e30 Dark mode base bg

navy-700 #002c44 Brand navy

navy-600 #003d5c Elevated surfaces

navy-500 #005580 Secondary accent

Prompt — Ice Blue Accent

ice-700 #1d4ed8 Light hover

ice-600 #2563eb Light links, cursor

ice-500 #3b82f6 Terminal dot

ice-400 #60a5fa Dark hover

ice-300 #93c5fd Dark links, cursor

Uptime — Success & Status

green-700 #15803d Light hover

green-600 #16a34a Light success

green-500 #22c55e Status dots

green-400 #4ade80 Dark success

Neutrals — Slate Scale

slate-100 #f1f5f9 Light bg

slate-200 #e2e8f0 Dark primary text

slate-300 #cbd5e1 Dark tagline

slate-400 #94a3b8 Dark body text

slate-500 #64748b Secondary text

slate-600 #475569 Dim / muted

slate-700 #334155 Light body text

slate-800 #1e293b Light headings

slate-900 #0f172a Light primary text

Color Roles

How colors map to UI roles across dark and light modes.

Dark Mode

Page background #001e30

Heading text #ffffff

Body text #94a3b8

Muted text #475569

Link text #93c5fd

Primary CTA #2563eb

✓ Success #4ade80

Tag ice-300 / 7%

Border rgba(255,255,255,0.06)

Light Mode

Page background #f8fafc

Heading text #002c44

Body text #334155

Muted text #94a3b8

Link text #2563eb

Primary CTA #002c44

✓ Success #16a34a

Tag navy-700 / 6%

Border rgba(0,44,68,0.08)

Dark mode background: Uses navy-undertone near-black (#001e30), not pure black. Brand navy #002c44 appears in elevated surfaces (card backgrounds, terminal frames) to create depth through the brand color.

Typography

Type hierarchy, font stacks, and usage rules. Headings are always monospace — this is a core brand signal.

Brand Name — IBM Plex Mono · clamp(2.5rem, 5vw, 4rem) · 700 · tracking 0.02em

MSP Copilot_

H1 — IBM Plex Mono · 2rem · 700 · tracking 0.01em

Page Heading

H2 — IBM Plex Mono · 1.5rem · 600 · tracking 0.01em

Section Heading

H3 — IBM Plex Mono · 1.125rem · 600

Subsection Heading

Body — Inter · 1rem · 400

The quick brown fox jumps over the lazy dog. Body text uses Inter for readability in long-form content. Every sentence should help the reader do something.

Small / Caption — Inter · 0.875rem · 400

Caption text for secondary information and metadata.

Code Block — IBM Plex Mono · 0.875rem · 400

const workflow = await n8n.execute('ticket-routing');

Tag / Badge — IBM Plex Mono · 0.625rem · 600 · uppercase

Automation ConnectWise

Button — IBM Plex Mono · 0.875rem · 600

Get Started

Font stacks:
Headings: IBM Plex Mono 600–700 → ui-monospace, monospace
Body: Inter 400–500 → system-ui, sans-serif
Code / UI: IBM Plex Mono 400–500 → ui-monospace, monospace

Typography rules:
Headings are always monospace — core brand signal.
Body text is always sans-serif for readability.
Taglines use Inter at light weight (300) — meant to be read, not displayed.
Code blocks use the heading font at regular weight.
Never use decorative, serif, or script fonts anywhere in the brand.

Voice & Messaging

Brand Voice

MSP Copilot speaks like a senior engineer who writes good documentation. Direct, practical, no filler.

Direct Lead with the answer, not the context.

Practical Every sentence should help the reader do something.

Confident, not arrogant We know our stuff, but we're not selling ourselves.

Technical without gatekeeping We use real terms but explain when needed.

Context	Tone	Example
Article headline	Imperative, practical	"Auto-close stale tickets in ConnectWise"
Hero / tagline	Confident, understated	"MSP automation for the rest of us."
Feature description	Benefits-first, concise	"No more portal clicking."
Documentation	Clear, sequential	"Here's how to set up ticket routing in 10 minutes."
Error / warning	Helpful, not alarming	"This webhook needs a valid endpoint before it'll fire."

Language

What to say and what to avoid. Specific, empowering language over empty hype.

"Here's how to…"
"Stop doing this manually"
"We built this because we needed it"
"10 minutes to set up"
"Your data, your rules"
Use second person ("you")

Don't

"Revolutionize your workflow"
"Best-in-class solution"
"Leverage our platform"
"Seamless integration"
"We're excited to announce"
Don't use "we" in product UI

Key messages (3 pillars):
1. DIY Power — "Build it yourself, but not from scratch"
2. Security & Reliability — "Thought-through defaults you can trust"
3. Affordability — "Enterprise capability, indie budget"

Assets & Usage

Imagery

The brand is text + code. No stock photography — ever.

Terminal / code blocks The primary visual language. Show real output, real commands, real workflows.

Minimal screenshots Clean, cropped, dark mode preferred. No staged mockups.

Diagrams Mermaid or simple flow diagrams. Functional, not decorative.

No stock photography No handshakes, no abstract tech graphics, no smiling people at laptops.

No decorative illustration If it doesn't convey information, it doesn't belong.

Screenshot rules: Crop tight to the relevant UI. Use dark mode when possible. Add a subtle border or shadow. Never annotate with arrows or circles — if the UI needs that, write better copy.

What NOT to Do

Hard rules. No exceptions.

Never use the old cyan #1fc3f3 — it has been replaced by ice blue. The accent colors are now #2563eb (light) and #93c5fd (dark).

Never use green for navigation, links, or brand identity. Green is exclusively for success states, checkmarks, and "healthy" indicators.

Never use pure black #000000 as a background. Always use navy-tinted dark colors. The darkest background is #001e30.

Never mix warm accent colors (amber, orange, red) into the palette. The brand is cool-toned only.

Never use decorative, serif, or script fonts. The only fonts are IBM Plex Mono and Inter.

Never render the full logo below 120px wide. Use the icon mark for small spaces.

Downloads

Download brand assets for use in presentations, documents, and digital media.

Full Logo (RGB)

Presentations, documents, website

SVG

Icon (RGB)

App icons, social media, thumbnails

SVG

Icon (Mono Navy)

Favicons, inline text, monochrome contexts

SVG

Icon (Mono White)

Dark backgrounds, overlays, watermarks

SVG

Icon Square (White)

White silhouette with box, overlays

SVG

Favicon

Browser favicon fallback

ICO