Oliver/modcomms
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add comprehensive Barclays brand specification for Gemini analysis

Browse source 
Creates prompts/brand_barclays.md with complete brand guidelines including:
- Sacred assets (Eagle, Portal, Cyan)
- Logo/Eagle specifications with sizing rules
- Portal sizing and treatment guidelines
- Full masterbrand color palette (24 colors with hex codes)
- Typography rules (Barclays Effra, 5 weights)
- Digital, social media, email, and advertising guidelines
- Accessibility requirements (WCAG AA/AAA)
- Common violations checklist for brand assessment

This spec is sent to Gemini when users select "Barclays" brand for
proof analysis, providing condensed guidelines for accurate assessment.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
michael 2026-01-24 11:41:10 -06:00
parent 2cd3b2b9ae
commit f24b7c7905
1 changed files with 501 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

501
prompts/brand_barclays.md Normal file
View file

@ -0,0 +1,501 @@
# Barclays Brand Specification
This specification defines the brand guidelines for Barclays marketing materials. Use this to assess proof assets for brand compliance.
---
## 1. BRAND OVERVIEW
### Brand Platform
- **Expression**: "Capturing possibilities" - Our world is full of possibilities to be seized. We keep our eye on the horizon, focused on discovering new possibilities as they appear.
- **Purpose**: Working together for a better financial future
- **Values**: Respect, Integrity, Service, Excellence, Stewardship
### Sacred Assets (Non-Negotiable)
The following three assets unify Barclays across all touchpoints and must never be altered:
1. **Eagle** - Primary brand mark (logo with Eagle + wordmark)
2. **Portal** - Bold graphic framing device representing "capturing possibilities"
3. **Cyan** - #00AEEF (RGB: 0, 174, 239) - Must be present in all communications
### Design Principles
All creative work must reflect these principles:
- **Bold**: Push boundaries, be innovative, vivid, fresh ideas that create impact
- **Purposeful**: Impeccable designs tailored to audience needs, presenting complex information with clarity
- **Expressive**: Positive, human, aspirational, grounded in customer reality
### Brand Voice (Four Personality Traits)
- **Pioneering**: Bold, creative, forward-thinking, inspiring
- **Connected**: Warm, personal, direct, avoids jargon
- **Optimistic**: Positive, active, uplifting, benefits-focused
- **Professional**: Clear, concise, grammatically perfect, honest
---
## 2. LOGO REQUIREMENTS
### Logo Versions
- **Primary Logo**: Eagle + "BARCLAYS" wordmark - used at 40px+ height
- **Digital Logo**: Optimized for 27-39px height
- **Eagle Only**: Used on Portal and small digital spaces where logo is too small
### Responsive Eagle Sizes
| Size | Usage |
|------|-------|
| 40px+ (10mm+) | Primary - all standard applications |
| 27-39px (7-9mm) | Digital - smaller digital formats |
| 16-26px | Favicon only - browser tabs |
### Color Usage
- **Cyan Logo**: Primary - used in all possible instances
- **White/Reversed**: When cyan is background color or not visible on imagery
### Exclusion Zones
- **Standard applications**: One Eagle height around all sides
- **Digital/small space**: Half Eagle height minimum
### Signposts (Approved Extensions)
- Premier Banking, Wealth Management, Private Bank, International Banking
- One-line or two-line format depending on space
- All signposting requires Group Brand approval
### Don'ts
- Never modify, distort, or alter the logo
- Never change logo colors outside of cyan or white
- Never use logo smaller than minimum sizes
- Never crowd the logo with other elements
- Never use the logo for decorative purposes
---
## 3. PORTAL SPECIFICATIONS
### Purpose
The Portal is a visual representation of "capturing possibilities" - a bold graphic framing device that brings Barclays together, unifying communications while allowing flexibility of expression.
### Portal Sizing
- **Standard Portal Width**: 1/8 of the shortest side of the communication
- **Thin Portal (8px)**: Small digital formats, social media
- **Thin Portal (16px)**: Platforms with rounded edges (Twitter)
### Eagle on Portal
- **Eagle Height**: 2/3 of the Portal thickness
- **Positioning**: 1/8 from inner Portal edge (horizontal and vertical)
- Always in top-right corner
### Portal Treatments
| Treatment | Usage |
|-----------|-------|
| Primary Cyan | Brand impact in competitive markets, cohesive communications |
| Cyan Translucent | Show more image, Barclays presence not focal point (use "Screen" blend) |
| Dark Translucent | Subtle Barclays link with sophistication (use "Multiply" blend) |
| Color Portal | Targeted messaging, responding to content/tone |
| Texture Portal | Communications where imagery supports messaging |
### Breaking Out of Portal
- Only ONE element may break the Portal - typography OR photography, never both
- Only headlines may break out (never body copy, legal copy, or other text)
- Photography must be subtle - only one part of image overlapping
- Never bleed/crop imagery completely off the Portal
### Don'ts
- Never alter or extend the Portal shape
- Never overuse the Portal - preserve its integrity and impact
- Never place elements on Portal except Eagle and permitted overlap
- Never use both typography and photography breaking out simultaneously
- Never use thin Portal for print or OOH
---
## 4. COLOR PALETTE
### Masterbrand Palette
| Color Name | Hex Code | RGB |
|------------|----------|-----|
| Cyan (Sacred) | #00AEEF | 0, 174, 239 |
| Primary Blue | #1A2142 | 26, 33, 66 |
| Bright Blue | #001276 | 0, 18, 118 |
| Dark Blue | #00395D | 0, 57, 93 |
| Light Blue | #0076B6 | 0, 118, 182 |
| Light Teal | #007481 | 0, 116, 129 |
| Teal | #006666 | 0, 102, 102 |
| Dark Teal | #004750 | 0, 71, 80 |
| Bright Mint | #AFFDFD | 175, 253, 253 |
| Mint | #CDF5E8 | 205, 245, 232 |
| Green | #3F7E37 | 63, 126, 55 |
| Lime | #C3FB5A | 195, 251, 90 |
| Bright Yellow | #FFFF00 | 255, 255, 0 |
| Light Yellow | #FFFF98 | 255, 255, 152 |
| Orange | #FFCB05 | 255, 203, 5 |
| Bright Purple | #5C1E5B | 92, 30, 91 |
| Dark Purple | #4C3D6C | 76, 61, 108 |
| Light Purple | #E1C0E2 | 225, 192, 226 |
| Electric Violet | #7A0FF9 | 122, 15, 249 |
| Bright Claret | #C7237A | 199, 35, 122 |
| Dark Claret | #752157 | 117, 33, 87 |
| Light Claret | #FFC9C9 | 255, 201, 201 |
| Black | #000000 | 0, 0, 0 |
| Dark Grey | #515151 | 81, 81, 81 |
| Light Grey | #D9D9D9 | 217, 217, 217 |
| Stone | #E8E8C9 | 232, 232, 201 |
| White | #FFFFFF | 255, 255, 255 |
| Active Blue | #006DE3 | 0, 109, 227 |
### Functional Palette - Light Mode
| Function | Hex Code |
|----------|----------|
| Blue - Interactive | #006DE3 |
| Green - Success | #09821F |
| Amber - Warning | #FFBA00 |
| Red - Error | #E3000F |
| White - Neutral 000 | #FFFFFF |
| Grey - Neutral 100 | #F6F6F6 |
| Grey - Neutral 300 | #E2E2E2 |
| Grey - Neutral 700 | #8E8E8E |
| Grey - Neutral 900 | #515151 |
| Black - Title | #272727 |
### Functional Palette - Dark Mode
| Function | Hex Code |
|----------|----------|
| Blue - Interactive | #3696FC |
| Green - Success | #32D74B |
| Amber - Warning | #FFC21C |
| Red - Error | #FF5B4B |
| Black - Neutral 000 | #161B2F |
| Black - Neutral 100 | #292B3D |
### Color Categories
- **Expressive**: Bright Yellow, Lime, Electric Violet, Electric Blue, Bright Claret, Bright Mint, Green, Orange - for impact/attention
- **Softened**: Light Yellow, Mint, Light Claret, Light Purple, White, Light Grey, Stone - linking colors
- **Professional**: Light Teal, Bright Blue, Bright Purple, Dark Teal, Dark Blue, Dark Purple, Teal, Light Blue, Dark Claret, Primary Blue, Dark Grey, Black - gravitas/sophistication
### Color Usage Rules
- **Cyan**: Sacred asset - use purposefully, never for body copy (accessibility)
- **Active Blue (#006DE3)**: ONLY for interactive elements (buttons, links) - never for decoration
- **Accessibility**: All pairings must meet WCAG AA minimum (AAA preferred)
- Only use approved Masterbrand colors - no off-palette colors
- Tints only for complex data navigation (diagrams, charts) - never on Portal
---
## 5. TYPOGRAPHY
### Primary Font
- **Barclays Effra** - Modern, flexible, digital-first
### Available Weights
- Light / Light Italic
- Regular / Italic
- Medium / Medium Italic
- Bold / Bold Italic
- Heavy / Heavy Italic
### System Fallback
- **Arial** - When Barclays Effra unavailable
### Usage Rules
- **Headings**: Barclays Effra Medium or Bold
- **Body Text**: Barclays Effra Regular or Medium
- **Line Spacing**: 1.1x or 1.2x text size
- **Light weight**: Use with caution in digital/small print (accessibility)
### Type Scale
| Name | Font Size | Line Height | Usage |
|------|-----------|-------------|-------|
| Supersize | 80px | 88px (1.1) | Titles, large amounts |
| XX Large | 48px | 56px | Hero titles |
| X Large | 32px | 40px | Sub-headlines, article titles |
| Large | 24px | 32px | Large copy, quotes |
| Medium | 20px | 28px | Sub-titles for body copy |
| Standard | 16px | 24px | Body copy, buttons, labels |
| Small | 14px | 21px | Small copy, form descriptions |
| X Small | 12px | 18px | Footer content |
### Responsive Type (Mobile 0-640px)
- Supersize: 48/56
- XX Large: 32/40
- X Large: 24/32
- Large: 20/28
- Medium: 18/24
- Standard/Small/X Small: No change
### Typographic Expression
Typography can be varied based on tone:
- **Bold** - Friendly, straightforward, impactful
- **UPPERCASE** - Confident, factual, professional
- *Italic* - Instructional, informative
- **S P A C E D** - Premium
### Don'ts
- Never use cyan for headings or body copy (accessibility)
- Never use fonts outside of Barclays Effra or Arial
- Never use excessive capitalisation
---
## 6. GRID SYSTEM
### Baseline
- **8px baseline grid** used throughout (exceptions noted where impractical)
### Breakpoints
| Device | Width | Columns | Margin | Gutters |
|--------|-------|---------|--------|---------|
| Desktop | 1440px | 12 | 24px | 24px |
| Tablet | 763px | 12 | 24px | 24px |
| Mobile | 375px | 6 | 24px | 16px |
---
## 7. ICONOGRAPHY
### Grid Specifications
- **Base Grid**: 24x24px
- **Stroke Thickness**: 2px throughout
- **Corner Radius**: 1px rounded on outside edge
### Scale Options
- Default: 24px
- Small: 20px (8px grid exception)
- Large: 32px
### States
- **Selected**: Filled icon
- **Activated**: Highlighted/circled
### Rules
- Icons should communicate function simply with minimal lines
- New icons require Big Ticket approval
- Use icons from approved Barclays library
---
## 8. DIGITAL DESIGN
### Global Digital Expression (GDE) Characteristics
When Blueprint design system is not available, follow these characteristics:
- Cyan Portal at first touchpoint and main entry points
- Optimized logo and Eagle
- Barclays Effra fonts with accessible color and sizing
- Barclays functional color palettes
- Accessibility-approved color pairings only
- **Light Mode**: White background with greyscales for layering
- **Dark Mode**: Midnight Blue (#161B2F) background with greyscales for layering
- Rounded corner components (except heroes/full width)
- Bold, purposeful, expressive imagery style
- Minimalist designs
### Blueprint Design System
- Component library for Barclays-owned digital channels
- Atomic design: Atoms > Molecules > Organisms > Templates > Pages
- Anything created from 2021 should use Blueprint components
---
## 9. SOCIAL MEDIA GUIDELINES
### Branding Tiers
| Tier | Usage | Elements |
|------|-------|----------|
| Primary | Most cases | 8px or 16px thin Portal + Eagle |
| Alternative | More visual real estate | Eagle only |
| Static End Post | End of carousels/series | Full logo + Portal |
| No Branding | Live posting, first carousel frame | Exception only |
### Logo/Eagle Usage
- **Eagle**: Primary - 40px height at 400px post width, scale proportionally
- **Logo**: Exceptional cases - 2/3 the size of Eagle
- **Placement**: Always top-right corner, 12px from edges
- **Profile Image**: Cyan Eagle only, 25px top/bottom padding, 33px left/right
### Portal Usage
- 8px thin Portal: Most social posts
- 16px thin Portal: Platforms with rounded edges (Twitter)
- Standard Portal: When ample space available
### Content Rules
- **20% Rule**: Type should cover maximum 20% of post area
- **Character Limits**: Headlines 65, Body 300, Quotations 250, Attribution 100
- **Type Placement**: Left-aligned, anywhere on vertical axis
- **Photography**: People-centered, story-led for organic content
### Emoji/Hashtag Guidelines
- Emojis must be relevant and appropriate - avoid overuse
- Hashtags: Be relevant, don't overuse, #Ad required for sponsored content
- Avoid grotesque, culturally insensitive, or suggestive imagery
---
## 10. EMAIL GUIDELINES
### Framework
- Portal as distinctive header frame
- Clean blocks create flowing narrative
- Modular approach for easy testing and reordering
### Standard Hierarchy
1. Logo
2. Image
3. Headline
4. Introduction (primary proposition)
5. Supporting content
6. T&Cs (always at end)
### Components
- Portal header
- Typography: Barclays Effra
- Functional color palette
- Proper logo sizing and placement
- Approved icons
- Consistent padding and spacing based on 8px grid
---
## 11. ADVERTISING GUIDELINES
### Print and Digital OOH
- **Portal**: Primary Portal (1/8 shortest side)
- **Eagle**: 2/3 Portal height, positioned 1/8 from inner edge
- **Logo**: 2/3 Eagle height
- One element may break Portal (headline OR photography)
- Headline, body copy, CTA, and logo sit together as a visual unit
### Small Format Digital and Social Media
- **Portal**: Thin Portal (8px)
- **Eagle**: 40px height
- **Logo**: 1/2 Eagle height
- 12px spacing from Portal edge
### Scale for Different Sizes
| Shortest Side | Multiplier | Portal | Spacing | Eagle Height |
|---------------|------------|--------|---------|--------------|
| ≤400px | x0 | 8px | 12px | 40px |
| 675px | x1.69 | 13.52px | 20.28px | 67.6px |
| 1080px | x2.7 | 21.6px | 32.4px | 108px |
| 1200px | x3 | 24px | 36px | 120px |
| 2000px | x5 | 40px | 60px | 200px |
### Typography
- **Headlines**: Effra Bold, Regular, or Light (including italics)
- **Body Copy**: Effra Regular, white or black
- **CTA**: Effra Bold, same size as body copy
- **Minimum Font Size**: 12pt for digital
### Legal Copy
- Placed at bottom on white background - never on Portal
- Effra Regular, minimum 6.5/8.5pt for print, 75/95pt for OOH
- Margins: 1/2 logo Eagle height (left/right), 1/4 logo Eagle height (top/bottom)
---
## 12. ACCESSIBILITY REQUIREMENTS
### Text Design
- Use plain language without jargon or technical terms
- Avoid excessive capitalisation
- Use camelCase for hashtags (#AmpItUp)
- Place hashtags and mentions at end of text
- Replace "click here" with descriptive CTAs ("Find out more")
- Ensure legible font sizes at all breakpoints
### Visual Accessibility
- All color pairings must meet WCAG AA minimum (AAA preferred)
- Cyan should NEVER be used for headings or body copy
- Light weight fonts: Use with caution in digital/small print
- Limit emoji use to maximum 3 per post
- Avoid special characters that screen readers misinterpret
### Alt Text
- Provide descriptive alt text for all images
- Custom descriptions preferred over automatic
- Omit "image of" or "photograph of" (screen readers add this)
- Mention colors if relevant to content
- Transcribe any text that is central to meaning
### Diversity, Equity and Inclusion
- Always consider religion, race, ethnicity, gender identity, sexual orientation, age, and status
- Ensure everyone feels included and welcome in communications
- Be representative of all audiences
---
## 13. COMMON VIOLATIONS CHECKLIST
### Logo/Eagle Issues
- [ ] Eagle below minimum size (40px primary, 27px digital, 16px favicon)
- [ ] Logo modified, distorted, or recolored
- [ ] Insufficient exclusion zone around logo
- [ ] Logo color other than cyan or white
- [ ] Eagle in wrong corner (should be top-right)
- [ ] Signpost used in small formats (crowds the post)
- [ ] Wrong Eagle version for size
### Portal Issues
- [ ] Portal width not 1/8 of shortest side
- [ ] Portal altered, extended, or distorted
- [ ] Both typography AND photography breaking Portal
- [ ] Body copy or legal text breaking Portal (only headlines allowed)
- [ ] Elements placed on Portal other than Eagle and permitted overlap
- [ ] Thin Portal used for print/OOH
- [ ] Eagle not positioned 1/8 from inner Portal edge
- [ ] Eagle not 2/3 of Portal height
### Color Issues
- [ ] Off-brand colors used (not from Masterbrand palette)
- [ ] Poor color contrast (fails WCAG AA)
- [ ] Active Blue (#006DE3) used for non-interactive elements
- [ ] Cyan used for body copy or headings
- [ ] Missing cyan in the design
- [ ] Non-approved color pairings
- [ ] Tints used on Portal
### Typography Issues
- [ ] Non-Effra font used (when Effra available)
- [ ] Arial used when Effra is available
- [ ] Wrong font weights
- [ ] Incorrect line spacing
- [ ] Font size below minimum (12pt digital)
- [ ] Light weight used in small print without consideration
### Layout Issues
- [ ] 8px grid not followed
- [ ] Incorrect column structure for breakpoint
- [ ] Elements crowding sacred assets
- [ ] Social post exceeds 20% type coverage
- [ ] Type not left-aligned in social posts
### Accessibility Issues
- [ ] Text too small to read
- [ ] Poor contrast between text and background
- [ ] Missing alt text for images
- [ ] "Click here" instead of descriptive CTA
- [ ] Excessive emoji use (>3 per post)
- [ ] All caps used excessively
- [ ] Cyan used for body copy
---
## 14. APPROVAL REQUIREMENTS
### Big Ticket Approval Required For
- New icons not in the approved library
- Influencer or celebrity partnerships
- Logo variations (e.g., Pride Month, Black History Month adaptations)
- Brand activations with modified assets
- New signposts or extensions
- Any alteration to sacred assets
### Design Governance
- All work from 2021 onwards should use Blueprint design system
- Third-party/white-labeled platforms use GDE characteristics
- Contact brand@barclays.com for questions
---
*Version: Based on Barclays Expression Core Principles (August 2024 v2), Digital Guidelines (February 2024), Advertising Guidelines (February 2023), Voice Toolkit (October 2023), Social Media Guidelines (October 2023), and Tiered Brand Flex Style Guide (February 2025).*