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)

# 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

# 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

   # 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

   mkdir ~/Downloads/blackroad-designs
   # Export all as PNG
   # Compress with TinyPNG
   # Upload to project folder
   

5. Deploy to Website

   # 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! 🎨