modcomms/prompts/channel_tech_specs.md

Channel Technical Specifications

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.

---

1. OVERVIEW

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.

Supported Brands

• Barclays: Eagle logo, "Make money work for you" tagline
• Barclaycard: Barclaycard logo, APR disclaimers (28.9% APR Representative)

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

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

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

---

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
• Column width: Flexible
• Gutter: 24px
• Margin: 80px

Tablet (768px - 1439px)

• 12-column grid
• Column width: Flexible
• Gutter: 24px
• Margin: 40px

Mobile (< 768px)

• 6-column grid
• Column width: Flexible
• Gutter: 16px
• Margin: 16px

Baseline Grid

• 8px baseline grid for consistent spacing
• All spacing should be multiples of 8px

---

14. PLATFORM-SPECIFIC TECHNICAL REQUIREMENTS

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

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

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

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

Snapchat

• Vertical-only format (9:16)
• Username and Ad label at top
• Learn More CTA at bottom
• Full-screen immersive experience

---

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.