The ChatPilot brand
Your AI copilot for customer conversations. Train an AI agent on your files, give it a voice and a phone number, and let it answer your customers everywhere — on your site, by phone, and over text.
Everything on this page renders live from lib/brand.ts. Change that one file and the whole product rebrands: these guidelines, the app, the emails, and the embed widget.
Logo
A chat bubble whose interior forms a paper-plane wing: conversation, piloted. The mark carries the brand gradient from #7C8CF8 to #4B58E8.
Mark at every size
Clear space
Keep clear space around the mark equal to a quarter of its height on every side. Nothing else lives inside that zone.
Misuse
- Don't stretch, squash, or rotate the mark.
- Don't recolor it outside the palette on this page.
- Don't add shadows, outlines, or effects.
- Don't place it on low-contrast or busy backgrounds.
- Don't reset the wordmark in another typeface.
Color
The full palette from brand.colors. Click any swatch to copy its hex value.
Typography
Inter carries every surface, tightly tracked at display sizes. Geist Mono handles code, numbers, and anything machine-flavored.
Display, Inter Semibold, 48 to 60px
Your AI copilot for customer conversations
Heading, Inter Semibold, 30px
Up and answering in an afternoon
Body, Inter Regular, 15px
Train an AI agent on your files, give it a voice and a phone number, and let it answer your customers everywhere — on your site, by phone, and over text.
Code, Geist Mono, 13px
import { brand } from "@/lib/brand";
Voice and tone
Confident, never boastful — the product does the talking.
Plain words over jargon. Say 'phone number', not 'telephony endpoint'.
Short sentences. Active voice. Second person.
Calm in errors: say what happened and what to do next.
UI tokens
The live components, rendered with the design tokens in app/globals.css, which mirror this palette. Flip the theme to preview both modes.
Buttons
Badges
Input
The embed widget
The widget is most customers' first touch with the brand. It ships with the primary accent by default, and tenants can override it per agent with the data-accent attribute.
<script
src="https://chatpilot.ca/widget.js"
data-agent="AGENT_PUBLIC_ID"
data-accent="#6E79F4"
data-position="bottom-right"
async></script>