From fc52ea6b1185358991b8f98aca039c831ff8d682 Mon Sep 17 00:00:00 2001 From: michael Date: Sat, 24 Jan 2026 12:18:47 -0600 Subject: [PATCH] Add comprehensive channel tech specs specification for Gemini analysis Replaces placeholder with detailed technical specifications including: - Platform-specific dimensions and safe zones (Meta, TikTok, Pinterest, YouTube/PMAX, Snapchat) - Exact pixel measurements for safe zones extracted from source templates - Brand element placement rules for Barclays and Barclaycard - File format, typography, and accessibility requirements - Comprehensive violations checklist for analysis Based on Barclays and Barclaycard Social Templates (August 2025). Co-Authored-By: Claude Opus 4.5 --- prompts/channel_tech_specs.md | 616 +++++++++++++++++++++++++++++++--- 1 file changed, 566 insertions(+), 50 deletions(-) diff --git a/prompts/channel_tech_specs.md b/prompts/channel_tech_specs.md index 0a22824..2f9947e 100644 --- a/prompts/channel_tech_specs.md +++ b/prompts/channel_tech_specs.md @@ -1,45 +1,487 @@ # Channel Technical Specifications -This document contains technical specifications for digital marketing assets. +This specification defines technical specifications, dimensions, safe zones, and format requirements for social media and digital marketing assets. Use this to assess proof assets for technical compliance with platform specifications. -## Image Specifications +--- -### Social Media Dimensions -- Instagram Feed: 1080x1080 (1:1), 1080x1350 (4:5), 1080x566 (1.91:1) -- Instagram Stories: 1080x1920 (9:16) -- Facebook Feed: 1200x630 (1.91:1), 1080x1080 (1:1) -- Facebook Stories: 1080x1920 (9:16) -- LinkedIn Feed: 1200x627 (1.91:1), 1080x1080 (1:1) -- Twitter/X: 1200x675 (16:9), 1200x1200 (1:1) +## 1. OVERVIEW -### File Formats -- Static Images: JPG, PNG -- Animated: GIF (max 15 seconds for most platforms) -- Maximum file size: Varies by platform (typically 4-8MB for images) +### Purpose +This specification covers technical requirements for digital channel assets, focusing on dimensions, safe zones, file formats, and brand element placement. For brand compliance (logo, Portal, colors, typography), refer to the Brand Specification. For creative best practices (content strategy, engagement optimization), refer to the Channel Best Practices Specification. -### Resolution Requirements -- Minimum 72 DPI for web -- Minimum 150 DPI for print -- Retina displays: 2x resolution recommended +### Supported Brands +- **Barclays**: Eagle logo, "Make money work for you" tagline +- **Barclaycard**: Barclaycard logo, APR disclaimers (28.9% APR Representative) -## Typography Specifications +### Platform Coverage +This specification covers technical requirements for: +- Meta (Facebook & Instagram): In-feed, Stories, Reels +- TikTok +- Pinterest +- Google/YouTube PMAX +- Snapchat + +--- + +## 2. META IN-FEED SPECIFICATIONS + +### 2.1 Square Format (1:1) + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1080 pixels | +| Aspect Ratio | 1:1 | +| Safe Zones | Full canvas (no UI overlays) | +| Supported Content | Static, Carousel, Video | +| File Formats | JPG, PNG, MP4 | + +**Brand Element Placement:** +- Logo/Eagle: Top-right corner, 12px from edges +- Barclays: Eagle with "Make money work for you" tagline on end frame +- Barclaycard: Logo with APR disclaimer (ticker tape style) + +**Carousel Specifics:** +- First frame: No Eagle (clashes with carousel icon in grid view) +- Note: Sponsored posts don't appear in grid, so first frame CAN have Eagle for ads +- Image counter appears on all frames - may clash with Eagle positioning +- Last image: Full logo + Portal required + +### 2.2 Portrait Format (4:5) + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1350 pixels | +| Aspect Ratio | 4:5 | +| Safe Zones | Full canvas (no UI overlays) | +| Supported Content | Static, Carousel, Video | +| File Formats | JPG, PNG, MP4 | + +**Brand Element Placement:** +- Same rules as 1:1 format +- More vertical real estate for content + +### 2.3 Video Frame Sequence (Meta In-feed) + +| Frame | Content | Brand Elements | +|-------|---------|----------------| +| Frame 1 | Hook/Headline | Logo top-right | +| Frames 2-4 | Supporting content | Logo top-right | +| Final Frame | Brand signoff | Full logo + tagline | + +--- + +## 3. META STORIES SPECIFICATIONS (9:16) + +### Dimensions & Safe Zones + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1920 pixels | +| Aspect Ratio | 9:16 | +| Supported Content | Static, Video | +| Max Duration | 15 seconds per frame | + +**Safe Zone Measurements (in pixels):** + +| Zone | Measurement | Description | +|------|-------------|-------------| +| Left Margin | 64px | Avoid placing content | +| Right Margin | 64px | Avoid placing content | +| Top Header Area | 268px | Profile/close button zone - AVOID | +| Bottom CTA Area | 384px | Learn more/swipe up zone - AVOID for key content | +| Safe Content Area | ~1268px height (center) | Primary content zone | + +**Content Placement Guidelines:** +- Key messaging within center safe zone +- CTA visible above "Learn more" overlay +- Avoid top 14% (profile/close button area) +- Avoid bottom 20% (reply/swipe area) + +--- + +## 4. META REELS SPECIFICATIONS (9:16) + +### Dimensions & Safe Zones + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1920 pixels | +| Aspect Ratio | 9:16 | +| Supported Content | Static, Carousel, Video | +| Max Duration | 90 seconds (15-30 seconds optimal) | + +**Safe Zone Measurements (in pixels):** + +| Zone | Measurement | Description | +|------|-------------|-------------| +| Left Margin | 64px | Avoid placing content | +| Right Margin | 64px | Account for engagement icons (likes, comments, share) | +| Top Header Area | 268px | Reels/Friends tabs, navigation - AVOID | +| Main Content Area | 672-768px | Primary content zone | +| Bottom Area | 226px | Username, CTA, post copy area - AVOID for key content | + +**Key Differences from Stories:** +- Right side has engagement icons (likes, comments, share) +- Username and CTA button overlay at bottom +- "Sponsored" label placement + +--- + +## 5. TIKTOK SPECIFICATIONS (9:16) + +### Dimensions & Safe Zones + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1920 pixels | +| Aspect Ratio | 9:16 | +| Content Type | Video only | +| File Format | MP4 | + +**Safe Zone Measurements (in pixels):** + +| Zone | Measurement | Description | +|------|-------------|-------------| +| Left/Right Margin | 120px | Navigation padding | +| Top Safe Zone | 252px | LIVE/Following/For You navigation - AVOID | +| Main Content Area | 1560px | Primary content zone | +| Bottom Safe Zone | 240px | Username, post copy, Learn more button - AVOID | +| Left Side Zone | 704px | Keep content left of right engagement icons | + +**Critical Notes:** +- Right side heavily occupied by engagement icons (profile, like, comment, bookmark, share) +- Bottom contains username, description, and CTA +- "Ad" label and "Learn more" button overlay at bottom + +--- + +## 6. PINTEREST SPECIFICATIONS + +### 6.1 Square Format (1:1) + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1080 pixels | +| Aspect Ratio | 1:1 | +| Supported Content | Static, Video | +| File Formats | JPG, PNG, MP4 | + +**Static Pins:** +- Use 16px border (43.2px in design) +- Portal frame included + +**Video Pins:** +- Full logo in corner instead of Portal +- No portal frame + +### 6.2 Portrait Format (2:3) + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1000 x 1500 pixels | +| Aspect Ratio | 2:3 | +| Supported Content | Static, Video | +| File Formats | JPG, PNG, MP4 | + +**Same rules as 1:1:** +- Static: 16px border + Portal +- Video: Full logo, no Portal + +### 6.3 Vertical Format (9:16) + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1920 pixels | +| Aspect Ratio | 9:16 | +| Supported Content | Video | +| File Format | MP4 | + +**Safe Zone Measurements (in pixels):** + +| Zone | Measurement | Description | +|------|-------------|-------------| +| Left Margin | 65px | Content padding | +| Right Margin | 65px | Content padding | +| Top Safe Zone | 195px | Back arrow, navigation - AVOID | +| Header Area | 270px | Extended safe zone | +| Bottom Area | 440px | Learn more button, attribution - AVOID | + +**Two Design Options:** +1. **Option 1**: Designed to Pinterest's safe zones (content within safe areas) +2. **Option 2**: Full-bleed design (content extends to edges) + +**Note:** Most commonly viewed in in-feed format; full-screen only when user clicks and scrolls right + +--- + +## 7. GOOGLE/YOUTUBE PMAX SPECIFICATIONS + +### 7.1 Horizontal Format (16:9) + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1920 x 1080 pixels | +| Aspect Ratio | 16:9 | +| Supported Content | Static, Video | +| File Formats | JPG, PNG, MP4 | + +**Safe Zone Measurements (in pixels):** + +| Zone | Measurement | Description | +|------|-------------|-------------| +| Left Side | 496px | Account for video controls | +| Right Side | 475px | Account for skip button | +| Top | 183px (133px extended) | Progress bar area | +| Bottom | 387px | CTA, sponsored label | +| Safe Content Height | 162px minimum | Core content zone | + +**Placement Contexts:** +- YouTube in-feed +- YouTube in-stream (portrait & landscape) + +### 7.2 Vertical Format (9:16) + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1920 pixels | +| Aspect Ratio | 9:16 | +| Supported Content | Static, Video | +| File Formats | JPG, PNG, MP4 | + +**Safe Zone Measurements (in pixels):** + +| Zone | Measurement | Description | +|------|-------------|-------------| +| Side Margins | 48px | Left and right padding | +| Top Safe Zone | 192px | "Visit advertiser" button - AVOID | +| Header Area | 288px | Extended top zone | +| Main Content Area | 672px | Primary content zone | +| Bottom | Variable | Navigation, Shorts UI | + +**YouTube Shorts Considerations:** +- Engagement icons on right side +- "Sponsored" label +- Post copy area at bottom + +### 7.3 Square Format (1:1) + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1080 pixels | +| Aspect Ratio | 1:1 | +| Supported Content | Static, Video | +| File Formats | JPG, PNG, MP4 | + +**Video Safe Zone Measurements (in pixels):** + +| Zone | Measurement | Description | +|------|-------------|-------------| +| Side Margins | 48px | Left and right | +| Content Width | 546px | Central content area | +| Top Zone | 105px | Navigation area | +| Middle Zone | 390px | Primary content | +| Bottom Zone | 192px | CTA area | + +**Static Safe Zone Measurements (in pixels):** + +| Zone | Measurement | Description | +|------|-------------|-------------| +| All Margins | 108px | All four sides | +| Content Area | Central | Primary content zone | + +**Placement Contexts:** +- YouTube in-stream +- YouTube in-feed +- Gmail in-feed + +### 7.4 Portrait Format (4:5) + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1350 pixels | +| Aspect Ratio | 4:5 | +| Supported Content | Static | +| File Formats | JPG, PNG | + +**Safe Zone Measurements (in pixels):** + +| Zone | Measurement | +|------|-------------| +| Top/Bottom Margins | 108px | +| Side Margins | 135px | + +### 7.5 Landscape Format (1.91:1) + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1200 x 628 pixels | +| Aspect Ratio | 1.91:1 | +| Supported Content | Static | +| File Formats | JPG, PNG | + +**Safe Zone Measurements (in pixels):** + +| Zone | Measurement | +|------|-------------| +| Top/Bottom Margins | 120px | +| Side Margins | 63px | + +**Placement Contexts:** +- Discover in-feed +- Gmail in-feed +- YouTube in-feed + +--- + +## 8. SNAPCHAT SPECIFICATIONS (9:16) + +### Dimensions & Safe Zones + +| Attribute | Specification | +|-----------|---------------| +| Dimensions | 1080 x 1920 pixels | +| Aspect Ratio | 9:16 | +| Supported Content | Static, Video | +| File Formats | JPG, PNG, MP4 | + +**Safe Zone Measurements (in pixels):** + +| Zone | Measurement | Description | +|------|-------------|-------------| +| Left Margin | 54px | Content padding | +| Right Margin | 54px | Content padding | +| Top Space | 150px | Username, "Ad" label area - AVOID | +| Main Content Area | 330px (reference) | Primary safe content zone | +| Bottom | Variable | Username, copy, "Learn More" CTA - AVOID | + +**Content Structure:** +- Username and "Ad" label at top +- Main content in center +- Secondary username and copy at bottom +- "Learn More" CTA button + +--- + +## 9. BRAND ELEMENT PLACEMENT RULES + +### 9.1 Barclays Brand Elements + +| Element | Placement | Size | Notes | +|---------|-----------|------|-------| +| Eagle | Top-right corner | 40px minimum height | 12px from edges | +| Full Logo | End frame | 2/3 of Eagle size | Used on final video frame | +| Portal | Frame edges | 8px thin (16px for Twitter/X) | For social posts | +| Tagline | With logo | Below logo | "Make money work for you" | + +**Carousel-Specific Rules:** +- First frame: No Eagle (clashes with carousel icon in grid view) +- Image counter may clash with Eagle - position accordingly +- Last image: Full logo + Portal required + +**Platform-Specific Notes:** +- Twitter/X: Use 16px thin Portal (platform rounds corners) +- Pinterest static: Include Portal with 16px border +- Pinterest video: Full logo instead of Portal + +### 9.2 Barclaycard Brand Elements + +| Element | Placement | Size | Notes | +|---------|-----------|------|-------| +| Logo | Top or corner | Per template | Barclaycard wordmark | +| APR Disclaimer | Prominent position | Same size as trigger copy | Must be clearly visible | +| Ticker Tape | With APR | Bright Blue type | Used when APR is present | + +**APR Disclaimer Requirements:** +- If copy triggers the APR, disclaimer wording must be same size as APR +- Standard text: "28.9% APR Representative (variable). Subject to application, financial circumstances and borrowing history." +- Always visible and legible +- Ticker tape style on Bright Blue background + +### 9.3 Video End Frame Requirements + +| Brand | Required Elements | +|-------|-------------------| +| Barclays | Full logo + "Make money work for you" tagline | +| Barclaycard | Full logo + "Make money work for you" tagline | + +--- + +## 10. FILE FORMAT SPECIFICATIONS + +### Image Formats + +| Format | Usage | Max File Size | +|--------|-------|---------------| +| JPG | Static posts, photos | 4-8MB (platform-specific) | +| PNG | Graphics with transparency | 4-8MB (platform-specific) | + +### Video Formats + +| Attribute | Specification | +|-----------|---------------| +| Format | MP4 (H.264 codec) | +| Frame Rate | 24-30fps | +| Resolution | Platform-specific (see dimensions above) | +| Audio Sample Rate | 48kHz | +| Audio Bit Rate | 128kbps minimum (stereo) | +| Captions | Built-in to file | + +**Caption Requirements:** +- Captions required on ALL video content +- Build captions into the video file +- Do NOT use .SRT files (Reddit and some platforms don't accept them) +- Ensure captions don't overlap with safe zone UI elements + +--- + +## 11. TYPOGRAPHY SPECIFICATIONS ### Minimum Font Sizes -- Body text: 12px minimum for legibility -- Headlines: Scale appropriately based on format -- Mobile: Consider 14px minimum for body text + +| Context | Minimum Size | Recommended | +|---------|--------------|-------------| +| Body text (digital) | 12px | 14-16px | +| Headlines | Scale with format | 20px+ | +| Legal/Disclaimer | 12px | 14px | +| CTA text | 14px | 16px | +| Mobile display | 14px | 16px | ### Character Limits -- Headlines: 65 characters maximum -- Body copy: 300 characters maximum -- Social post copy: Platform-specific limits + +| Element | Maximum Characters | +|---------|-------------------| +| Headlines | 65 characters | +| Body copy | 300 characters | +| Social post captions | Platform-specific | ### Font Stack - Primary: Barclays Effra - Fallback: Arial, sans-serif - Font weights: Regular, Medium, Bold -## Digital Grid System +--- + +## 12. ACCESSIBILITY REQUIREMENTS + +### Color Contrast +- WCAG AA minimum: 4.5:1 for normal text +- WCAG AA for large text: 3:1 (18px+ or 14px+ bold) +- WCAG AAA preferred: 7:1 + +### Touch Targets (Interactive Elements) +- iOS minimum: 44x44 pixels +- Android minimum: 48x48dp +- Recommended: 48x48 pixels with adequate spacing + +### Video Accessibility +- Captions required on ALL video content +- Build captions into file (not .SRT for some platforms) +- Ensure captions don't overlap with UI elements +- Sound-optional viewing - content must work muted + +--- + +## 13. DIGITAL GRID SYSTEM ### Desktop (1440px+) - 12-column grid @@ -63,35 +505,109 @@ This document contains technical specifications for digital marketing assets. - 8px baseline grid for consistent spacing - All spacing should be multiples of 8px -## Video Specifications +--- -### Format Requirements -- Format: MP4 (H.264 codec) -- Aspect ratios: 16:9, 1:1, 4:5, 9:16 -- Frame rate: 24-30fps -- Maximum duration: Platform-specific +## 14. PLATFORM-SPECIFIC TECHNICAL REQUIREMENTS -### Audio -- Sample rate: 48kHz -- Bit rate: 128kbps minimum for stereo +### Meta (Facebook & Instagram) +- Stories: 15-second maximum per frame +- Reels: 90 seconds maximum (15-30 seconds optimal) +- Video auto-plays without sound - captions essential +- Carousel: Image counter overlays - account for in design -### Captions/Subtitles -- Required for accessibility -- Clear, legible font -- Adequate contrast with background +### TikTok +- Video-only platform +- Sound-on expected but must work muted +- Engagement icons overlap right side - keep content left +- "Ad" label and "Learn more" overlay at bottom -## Accessibility Requirements +### Pinterest +- In-feed is most common view +- Full-screen requires user action (click and scroll) +- Static pins: Use 16px border (43.2px in design) with Portal +- Video pins: Use full logo instead of Portal, no border -### Color Contrast -- WCAG AA: 4.5:1 for normal text -- WCAG AA: 3:1 for large text (18px+ or 14px+ bold) -- WCAG AAA: 7:1 for enhanced contrast +### YouTube/PMAX +- Multiple placement contexts (in-feed, in-stream, Shorts) +- Safe zones vary by placement type +- In-stream has skip button overlay +- Shorts has different UI from standard video -### Touch Targets -- Minimum size: 44x44 pixels -- Adequate spacing between interactive elements +### Snapchat +- Vertical-only format (9:16) +- Username and Ad label at top +- Learn More CTA at bottom +- Full-screen immersive experience -### Safe Zones -- Account for platform UI overlays -- Keep critical content within safe areas -- Allow for various device notches and bezels +--- + +## 15. VIOLATIONS CHECKLIST + +### Dimension & Resolution Violations +- [ ] Asset dimensions don't match platform requirements +- [ ] Aspect ratio incorrect for intended placement +- [ ] Resolution too low (below 72 DPI for web) +- [ ] Image scaled beyond source resolution +- [ ] File size exceeds platform limits + +### Safe Zone Violations +- [ ] Critical content placed in top header zone (Stories/Reels/TikTok) +- [ ] Key messaging in bottom CTA overlay zone +- [ ] Brand elements clashing with platform UI +- [ ] Content placed in side zones with engagement icons (TikTok/Reels) +- [ ] Text/CTA in rounded corner crop zones +- [ ] Content in Pinterest top 195px or bottom 440px (9:16) +- [ ] Content in Snapchat top 150px area + +### File Format Violations +- [ ] Wrong format for content type +- [ ] File size exceeds platform limits +- [ ] Video codec incompatible (not H.264) +- [ ] Frame rate outside 24-30fps range +- [ ] Missing captions on video content +- [ ] Captions uploaded as .SRT instead of built-in +- [ ] Audio quality below 128kbps + +### Typography Violations +- [ ] Font size below minimum (12px body, 14px mobile) +- [ ] Text illegible at intended display size +- [ ] Character count exceeds platform limits +- [ ] Insufficient contrast with background +- [ ] Wrong font used (not Barclays Effra or approved fallback) + +### Brand Element Violations - Barclays +- [ ] Eagle in wrong position (should be top-right) +- [ ] Eagle smaller than 40px height minimum +- [ ] Eagle closer than 12px from edges +- [ ] Eagle on first frame of carousel (should be avoided) +- [ ] Missing full logo on video end frame +- [ ] Missing "Make money work for you" tagline on end frame +- [ ] Wrong Portal thickness (should be 8px, 16px for Twitter/X) +- [ ] Portal missing on Pinterest static pins +- [ ] Portal present on Pinterest video (should be logo only) + +### Brand Element Violations - Barclaycard +- [ ] APR disclaimer missing when triggered +- [ ] APR disclaimer smaller than trigger copy +- [ ] APR disclaimer not prominent/visible +- [ ] Missing ticker tape style on APR text +- [ ] Logo missing or incorrectly positioned + +### Accessibility Violations +- [ ] Color contrast fails WCAG AA (below 4.5:1 for normal text) +- [ ] Color contrast fails for large text (below 3:1) +- [ ] Touch targets below 44x44 pixels +- [ ] Missing video captions +- [ ] Captions overlapping with UI elements +- [ ] Text requires zooming to read +- [ ] Content doesn't work with sound muted + +### Grid System Violations +- [ ] Not following 8px baseline grid +- [ ] Incorrect column count for device type +- [ ] Gutters don't match specifications +- [ ] Margins don't match device breakpoints + +--- + +*Version: Based on Barclays Social Templates (August 2025), Barclaycard Social Templates (August 2025), and platform-specific technical documentation.*