📈
CMOClaw
Automate the work. Amplify the thinking.
Brand v1.0
100 campaigns/day
AI-Powered
⚡ Quick Reference
| Element | Value |
|---|
| Brand Name | CMOClaw |
| Tagline | Automate the work. Amplify the thinking. |
| Mission | Ship 100 campaigns/day with AI precision |
| Style | GitHub-inspired dark theme, developer-trusted |
| Primary Font | Inter (headings + body) |
| Code Font | JetBrains Mono (data, stats, metrics) |
🎨 Color System
Primary Palette
🟢 Claw Green
#3fb950 — Primary accent, CTAs, success
🔵 Signal Blue
#58a6ff — Links, interactive, info
⬛ Deep Void
#0d1117 — Primary background
🔲 Surface
#161b22 — Cards, panels
Secondary Palette
🟣 Orchid Purple
#bc8cff — AI features, premium
🟠 Warm Amber
#f0883e — CTAs, warnings
🩷 Coral Pink
#f778ba — Creative/design
🩵 Ice Cyan
#56d4dd — Data visualization
Semantic Colors
Surfaces & Text (Dark Mode)
| Layer | Hex |
|---|
| Canvas | #0d1117 |
| Surface 1 | #161b22 |
| Surface 2 | #1c2128 |
| Surface 3 | #21262d |
| Border | #30363d |
| Border Emphasis | #484f58 |
| Text Primary | #e6edf3 |
| Text Secondary | #8b949e |
| Text Tertiary | #6e7681 |
Light Mode (for emails/print)
| Layer | Hex |
|---|
| Background | #ffffff |
| Surface | #f6f8fa |
| Border | #d0d7de |
| Text Primary | #1f2328 |
| Text Secondary | #656d76 |
🔤 Typography
| Role | Font | Weight |
|---|
| Display | Inter | 800 (ExtraBold) |
| Headings | Inter | 600–700 |
| Body | Inter | 400–500 |
| Code/Data | JetBrains Mono | 400–500 |
Scale
| Level | Size | Weight |
|---|
| Display | 48px | 800 |
| H1 | 32px | 700 |
| H2 | 24px | 600 |
| H3 | 20px | 600 |
| Body | 16px | 400 |
| Small | 14px | 400 |
| Caption | 12px | 400 |
| Code | 14px | 400 |
Rule:
Monospace for data/metrics, sans-serif for prose. Always.
📐 Logo Usage
Variants
- Full Logo — Mark + "CMOClaw" wordmark (primary use)
- Mark Only — App icon, favicon, profile pictures (min 24px)
- Wordmark Only — Inline text, docs headers (min 80px wide)
- Lockup — Mark above wordmark (square formats)
Color on Backgrounds
| Background | Mark | Wordmark |
|---|
| Dark (#0d1117) | White or Green | White |
| Light (#ffffff) | Dark (#0d1117) | Dark (#0d1117) |
| Accent (green) | White | White |
❌ Don'ts
- Don't rotate, skew, or stretch
- Don't add shadows, glows, or gradients
- Don't change colors outside palette
- Don't place on busy backgrounds without container
🎭 Brand Voice
Precise · Confident · Technical · Warm
✅ Do
- Short declarative sentences
- Lead with outcomes
- Mix technical + plain language
- Monospace for metrics
❌ Don't
- Marketing buzzwords
- Over-explain
- Use exclamation marks liberally
- Sound like a press release
Example — Good
"CMOClaw shipped 47 campaigns while you were in standup."
Example — Bad
"Our revolutionary AI-powered platform enables seamless campaign deployment!"
🧩 UI Components
Buttons
| Type | BG | Text |
|---|
| Primary | #3fb950 | #0d1117 |
| Secondary | transparent | #e6edf3 (border: #30363d) |
| Danger | #f85149 | #ffffff |
Cards
BG: #161b22 | Border: #30363d | Radius: 8px
Hover: border → #484f58
Badges
shipped
in-progress
ai-powered
attention
error
Font: JetBrains Mono 12px 500 · BG: color at 15% opacity · Radius: 12px
📁 Visual Assets
All self-contained HTML files — click to view:
📐 Logo Variations
6 logo variants, clear space rules, don'ts
🎨 Color Palette
Full palette with hex/RGB, contrast ratios
🔤 Typography Specimen
Inter + JetBrains Mono full specimens
🖼️ Brand Applications
Hero page, dashboard, Slack bot, email mockups
📱 Social Kit
Profile pics, banners, post templates, OG image
🧩 Icon Set
12 feature icons, brand badges, status indicators
🔄 Comparison
Before/After — old eToro colors vs new GitHub-dark
⚡ Key Principles
- Dark-first — design for dark backgrounds, light mode is secondary
- Developer trust — looks like a tool engineers AND marketers respect
- Clean > flashy — minimal decoration, let content breathe
- Monospace accents — JetBrains Mono for all data and stats
- Color = communication — every color has a purpose, never decorative
- GitHub-quality craft — every pixel matters
🚫 Critical Don'ts
- ❌ Don't use eToro green (#00C896) — CMOClaw has its own identity (
#3fb950)
- ❌ Don't use light mode as primary presentation
- ❌ Don't use gradients on text
- ❌ Don't use more than 2 accent colors per view
- ❌ Don't center-align body text
- ❌ Don't make it look like a consumer app
CMOClaw Brand v1.0
Built for the team that ships 100 campaigns a day. 📈