blackroad-docs/brand/canva-guide.md

# BlackRoad OS - Canva Design Guide

## 🎨 Brand Colors

**Primary Gradient:**
- Purple Start: `#667eea`
- Purple End: `#764ba2`

**Accent Colors:**
- Green (CTA): `#10b981`
- Red (Urgency): `#ef4444`
- Orange (Badge): `#f59e0b`

**Neutral Colors:**
- Dark Background: `#0f172a`
- Card Background: `#1e293b`
- Border: `#334155`
- Text Light: `#e2e8f0`
- Text Muted: `#94a3b8`

---

## 📐 Design Templates Needed

### 1. Twitter/X Header Image
**Dimensions:** 1500 x 500 px

**Layout:**
```
[Left 40%: Purple gradient background]
- BlackRoad OS logo (large, white)
- Tagline: "The AI Operating System for Teams"
- Small icon badges: ⚡🤖🔒

[Right 60%: Screenshot of dashboard]
- Angled mockup of dashboard
- Slight blur/fade to draw attention to left
```

**Canva Instructions:**
1. Go to Canva → Custom Size → 1500 x 500
2. Add rectangle: Fill with gradient (#667eea → #764ba2)
3. Add text: "BlackRoad OS" (Font: Inter Black, 72pt, white)
4. Add text below: "The AI Operating System for Teams" (Font: Inter Regular, 24pt, white 90% opacity)
5. Upload `dashboard.html` screenshot
6. Place at 45° angle on right side
7. Add subtle drop shadow

---

### 2. Product Hunt Thumbnail
**Dimensions:** 240 x 240 px

**Layout:**
```
[Full gradient background]
- "BR" monogram or robot icon (centered)
- Tiny text below: "BlackRoad OS"
```

**Canva Instructions:**
1. Custom Size → 240 x 240
2. Gradient background (#667eea → #764ba2, diagonal)
3. Add circle shape (white, 70% size)
4. Add text inside: "BR" or "🤖" (large, centered)
5. Add text at bottom: "BlackRoad OS" (10pt, white)

---

### 3. Launch Tweet Graphic
**Dimensions:** 1200 x 675 px (Twitter card)

**Layout:**
```
[Top section - gradient background]
"Just Launched 🚀"

[Middle section - white text]
"BlackRoad OS"
"The AI Operating System for Teams"

[Bottom section - feature pills]
⚡ Deploy Instantly | 🤖 AI-First | 🔒 Enterprise Ready

[Call-to-action]
"50% OFF for Founding Members"
app.blackroad.io
```

**Canva Instructions:**
1. Custom Size → 1200 x 675
2. Gradient background full bleed
3. Add text: "Just Launched 🚀" (top, 36pt, white)
4. Add text: "BlackRoad OS" (center, 96pt, white, bold)
5. Add text: "The AI Operating System for Teams" (below, 32pt, white 80%)
6. Add 3 rounded rectangles (white 20% opacity) with icon + text
7. Add green rectangle at bottom: "50% OFF for Founding Members" (white text)
8. Add: "app.blackroad.io" (small, bottom right, white)

---

### 4. Instagram Post (Square)
**Dimensions:** 1080 x 1080 px

**Layout:**
```
[Top 30% - gradient]
"BlackRoad OS"

[Middle 40% - features list]
✅ Deploy in minutes, not months
✅ AI-powered workflows
✅ Enterprise-ready security
✅ One platform, not 10 tools

[Bottom 30% - CTA]
🎁 50% OFF FOREVER
"First 100 Founding Members"
app.blackroad.io
```

**Canva Instructions:**
1. Instagram Post template (1080 x 1080)
2. Split into 3 sections
3. Top: Gradient background with "BlackRoad OS" (white, bold, 72pt)
4. Middle: White background, checklist items (black text, 36pt)
5. Bottom: Red/orange background (#ef4444), "50% OFF FOREVER" (white, bold)
6. Add link at very bottom (small, white on gradient)

---

### 5. LinkedIn Post Image
**Dimensions:** 1200 x 627 px

**Layout:**
```
[Left side - gradient]
"Launching BlackRoad OS"

"The AI operating system
for teams who ship fast"

Alexa Amundson
Founder

[Right side - screenshot]
Dashboard or pricing screenshot
```

**Canva Instructions:**
1. Custom Size → 1200 x 627
2. Split 50/50 (left gradient, right screenshot)
3. Left side: Gradient background
4. Add text: "Launching BlackRoad OS" (white, 48pt, bold)
5. Add tagline below (white 80%, 28pt)
6. Add name at bottom (white, 20pt)
7. Right side: Upload pricing/dashboard screenshot
8. Add subtle border between sections

---

### 6. Email Header Image
**Dimensions:** 600 x 200 px

**Layout:**
```
[Full gradient background]
"Welcome to BlackRoad OS 🎉"
"Your 14-day free trial starts now"
```

**Canva Instructions:**
1. Custom Size → 600 x 200
2. Gradient background
3. Centered text: "Welcome to BlackRoad OS 🎉" (white, 36pt)
4. Subtitle: "Your 14-day free trial starts now" (white 80%, 18pt)

---

### 7. Facebook Cover Image
**Dimensions:** 820 x 312 px

**Layout:**
```
[Similar to Twitter header but adjusted dimensions]
```

**Canva Instructions:**
1. Custom Size → 820 x 312
2. Follow Twitter header design
3. Adjust text sizing for smaller space

---

### 8. Product Hunt Gallery Images
**Dimensions:** 1270 x 760 px each

You need 5 images total. Use screenshots of:

1. **Landing Page** (`index.html`)
   - Full-page screenshot
   - Shows hero, features, CTA

2. **Dashboard** (`dashboard.html`)
   - Stats cards, quick actions
   - Shows the product in use

3. **Pricing** (`pricing.html`)
   - 3-tier comparison
   - Founding member offer highlighted

4. **Success Page** (`success.html`)
   - Post-signup experience
   - Onboarding steps

5. **Feature Highlight - AI** (NEEDS DESIGN)
   - Mockup of AI agent interface
   - Chat-style interface
   - Show AI helping with deployment

---

## 🎨 Canva Template Links (Create These)

### Quick Social Media Kit

1. **Go to Canva.com**
2. **Create Brand Kit:**
   - Brand name: BlackRoad OS
   - Colors: Add hex codes above
   - Fonts: Inter (primary), SF Pro Display (secondary)
   - Logo: Upload when you have one

3. **Use These Templates:**
   - Twitter Post (1200x675)
   - Instagram Post (1080x1080)
   - LinkedIn Post (1200x627)
   - Story (1080x1920)

---

## 🚀 How to Take Screenshots

### Option 1: Browser DevTools (Best Quality)

```bash
# Open page in browser
open index.html

# Press F12 → Toggle Device Toolbar (Cmd+Shift+M)
# Set dimensions to 1270x760
# Right-click → Capture Screenshot
```

### Option 2: MacOS Screenshot Tool

```bash
# Press Cmd+Shift+4
# Drag to select area
# File saved to Desktop
```

### Option 3: Use CleanShot (Recommended)

- Capture scrolling screenshot
- Add annotations
- Export at exact dimensions

---

## 📱 Social Media Specifications

### Twitter/X
- Profile Picture: 400 x 400 px (round display)
- Header: 1500 x 500 px
- Post Image: 1200 x 675 px
- Card Image: 1200 x 628 px

### Instagram
- Profile Picture: 320 x 320 px
- Post: 1080 x 1080 px (square) or 1080 x 1350 px (portrait)
- Story: 1080 x 1920 px
- Reels: 1080 x 1920 px

### LinkedIn
- Profile Picture: 400 x 400 px
- Banner: 1584 x 396 px
- Post Image: 1200 x 627 px
- Company Logo: 300 x 300 px

### Facebook
- Profile Picture: 180 x 180 px
- Cover Photo: 820 x 312 px
- Post Image: 1200 x 630 px

### Product Hunt
- Thumbnail: 240 x 240 px
- Gallery: 1270 x 760 px (up to 8 images)

---

## 🎯 Design Principles

**1. Bold & Modern**
- Use gradient generously
- Large, bold typography
- Ample white space

**2. High Contrast**
- White text on gradient
- Green CTAs pop
- Red for urgency/scarcity

**3. Consistent Branding**
- Always use brand gradient
- Consistent emoji usage: 🚀⚡🤖🔒🎁
- Inter font family

**4. Mobile-First**
- Test at small sizes
- Large touch targets
- Readable at thumbnail size

**5. Action-Oriented**
- Every design should have clear CTA
- Use scarcity ("79 spots left")
- Show benefits, not features

---

## ✅ Quick Checklist

Before posting any design:

- [ ] Uses brand colors (#667eea, #764ba2, #10b981)
- [ ] Text is readable at thumbnail size
- [ ] CTA is clear and prominent
- [ ] Exported at correct dimensions
- [ ] File size under 5MB (for social media)
- [ ] No pixelation or blur
- [ ] Matches brand aesthetic
- [ ] Includes app.blackroad.io somewhere

---

## 🛠️ Tools You Need

**Design:**
- Canva Pro (recommended) - $13/month
- Figma (alternative, free tier)
- Adobe Express (alternative)

**Screenshots:**
- CleanShot X ($29 one-time) - Best option
- Browser DevTools (free)
- Mac Screenshot (Cmd+Shift+4, free)

**Optimization:**
- TinyPNG (compress images, free)
- ImageOptim (Mac, free)
- Squoosh (web-based, free)

---

## 🎨 Sample Canva Projects

### Starter Pack (Create These First)

1. **Launch Tweet Graphic**
   - Use immediately for Twitter announcement
   - Shareable size

2. **Instagram Announcement**
   - Post when you launch
   - Cross-post to Facebook

3. **Product Hunt Thumbnail**
   - Upload when you submit to PH
   - Makes listing stand out

4. **Email Header**
   - Use in welcome email
   - Professional look

5. **LinkedIn Launch Post**
   - Professional audience
   - Announce to network

---

## 💡 Pro Tips

**1. Batch Create**
Create all designs in one session. Duplicate templates and swap text/images.

**2. Template Everything**
Save each design as a template in Canva for quick updates.

**3. Export 2x Resolution**
For retina displays, export at 2x (e.g., 2400x1350 for Twitter instead of 1200x675).

**4. Use Brand Kit**
Set up Canva Brand Kit once, then it auto-applies colors/fonts to all designs.

**5. A/B Test**
Create 2-3 variations of key graphics (launch tweet, PH thumbnail) and test which performs better.

---

## 🚀 Launch Day Design Checklist

**Pre-Launch:**
- [ ] Twitter header updated
- [ ] Instagram profile picture + bio
- [ ] LinkedIn banner updated
- [ ] Product Hunt thumbnail ready
- [ ] Product Hunt gallery (5 images) ready
- [ ] Launch tweet graphic ready
- [ ] Email header for welcome email ready

**Launch Day:**
- [ ] Post launch tweet with graphic
- [ ] Update Instagram with launch post
- [ ] Share on LinkedIn with image
- [ ] Submit to Product Hunt with all images
- [ ] Update website OG images (meta tags)

**Post-Launch:**
- [ ] Create "We launched!" recap graphic
- [ ] Share milestone graphics (#1 Product, etc.)
- [ ] Create customer testimonial graphics
- [ ] Design case study graphics

---

## 📸 Next Steps

1. **Take Screenshots**
   ```bash
   # Open each page in browser at 1270x760
   open dashboard.html
   open pricing.html
   open success.html
   open index.html

   # Use CleanShot or browser DevTools to capture
   ```

2. **Create Canva Account**
   - Sign up at canva.com
   - Get Canva Pro trial (30 days free)
   - Set up Brand Kit

3. **Create Designs (30 min)**
   - Use templates above
   - Start with Launch Tweet + PH Thumbnail
   - Batch create rest

4. **Export & Organize**
   ```bash
   mkdir ~/Downloads/blackroad-designs
   # Export all as PNG
   # Compress with TinyPNG
   # Upload to project folder
   ```

5. **Deploy to Website**
   ```bash
   # Add OG meta tags to index.html
   <meta property="og:image" content="https://app.blackroad.io/og-image.png" />
   <meta name="twitter:image" content="https://app.blackroad.io/twitter-card.png" />
   ```

---

**Ready to design? Open Canva and let's make BlackRoad OS look AMAZING! 🎨**