# Social Media Assets
This directory contains social media preview images and assets for the n8n Workflow Builder MCP Server repository.
## Files
- `social-preview.png` - Primary social media preview image (1200x630px)
- `social-preview-twitter.png` - Twitter-optimized preview (1200x600px)
- `social-preview-linkedin.png` - LinkedIn-optimized preview (1200x630px)
## Design Specifications
### Primary Social Preview (social-preview.png)
- **Dimensions**: 1200x630px (1.91:1 ratio)
- **Format**: PNG with transparency support
- **Background**: Professional gradient using n8n brand colors
- **Elements**:
- n8n logo
- MCP (Model Context Protocol) icon
- AI assistant icons (Claude, ChatGPT)
- Title: "n8n Workflow Builder MCP Server"
- Subtitle: "AI Assistant Integration for Workflow Automation"
- Key features: "Natural Language • AI-Powered • Free & Open Source"
### Color Palette
- **Primary**: #FF6D5A (n8n orange)
- **Secondary**: #1E293B (dark slate)
- **Accent**: #3B82F6 (blue)
- **Text**: #FFFFFF (white)
- **Background**: Linear gradient from #1E293B to #0F172A
### Typography
- **Title**: Bold, sans-serif, 48px
- **Subtitle**: Medium, sans-serif, 24px
- **Features**: Regular, sans-serif, 18px
## Usage
These images are automatically used when the repository is shared on:
- Facebook
- Twitter/X
- LinkedIn
- Discord
- Slack
- Other social platforms supporting Open Graph
## Updating Images
When updating social preview images:
1. Maintain the same dimensions and aspect ratios
2. Keep file sizes under 1MB for optimal loading
3. Test previews using social media debugging tools
4. Update the image URLs in README.md if filenames change
## Tools for Creation
Recommended tools for creating social preview images:
- **Figma** - Professional design tool
- **Canva** - User-friendly template-based design
- **Adobe Photoshop** - Advanced image editing
- **GIMP** - Free alternative to Photoshop
- **Sketch** - macOS design tool
## Testing
Test social previews using:
- [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
- [Twitter Card Validator](https://cards-dev.twitter.com/validator)
- [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/)
- [Social Share Preview](https://socialsharepreview.com/)
