Add comprehensive Barclaycard brand specification for Gemini analysis
- Create prompts/brand_barclaycard.md with structured brand guidelines covering logo, Card Portal, colors, typography, and accessibility - Update ReferenceDocsService with get_barclaycard_brand_spec() method - Update BrandAgent to use the new spec instead of raw reference docs - Spec is ~15KB vs ~293KB of raw docs for more efficient analysis Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
michael
parent
b52162b111
commit
d3e7f99be0
3 changed files with 485 additions and 10 deletions
|
|
@ -20,7 +20,8 @@ class BrandAgent(BaseAgent):
|
|||
reference_docs: Service for loading reference documents
|
||||
"""
|
||||
self.gemini = gemini_service
|
||||
self.brand_context = reference_docs.get_brand_context()
|
||||
# Use the Barclaycard-specific brand spec (more concise and structured for analysis)
|
||||
self.brand_context = reference_docs.get_barclaycard_brand_spec()
|
||||
|
||||
async def analyze(self, images: List[Tuple[bytes, str]]) -> SubReview:
|
||||
"""
|
||||
|
|
@ -32,27 +33,29 @@ class BrandAgent(BaseAgent):
|
|||
Returns:
|
||||
SubReview with brand compliance assessment
|
||||
"""
|
||||
prompt = f"""You are a brand expert for Barclays Bank. Your role is to analyze marketing proofs for adherence to Barclays UK brand guidelines.
|
||||
prompt = f"""You are a brand expert for Barclaycard. Your role is to analyze marketing proofs for adherence to Barclaycard brand guidelines.
|
||||
|
||||
Here are the brand guidelines to use for your analysis:
|
||||
Here is the Barclaycard brand specification to use for your analysis:
|
||||
|
||||
{self.brand_context}
|
||||
|
||||
---
|
||||
|
||||
Analyze the uploaded proof against these Barclays brand guidelines, checking for:
|
||||
Analyze the uploaded proof against the Barclaycard brand specification above, checking for:
|
||||
|
||||
1. **Logo Usage**: Is the Barclays Eagle/logo used correctly? Check sizing, placement (should be top-right or as specified), clear space requirements, and that it hasn't been altered.
|
||||
1. **Logo Usage**: Is the Barclaycard logo (Open World symbol + wordmark) used correctly? Check minimum size (25px), clear space, placement, and that it hasn't been altered. Logo should be cyan or white only.
|
||||
|
||||
2. **Card Portal**: If the Card Portal asset is present, verify it follows the sizing rules (1/12 of shortest side for print, responsive for digital), proper cyan color, and corner visibility.
|
||||
2. **Card Portal**: If the Card Portal is present, verify it follows sizing rules (stroke weight and corner radius based on shortest side), cyan border color (#00AEEF), rotation within ±1.5°, and that the logo is not placed outside it.
|
||||
|
||||
3. **Color Palette**: Are only approved brand colors used? Check for proper color pairings and that cyan is used appropriately as a sacred asset.
|
||||
3. **Color Palette**: Are only approved Barclaycard masterbrand colors used? Check for proper WCAG-compliant color pairings, cyan presence as sacred asset, and Active Blue (#006DE3) only used for interactive elements.
|
||||
|
||||
4. **Typography**: Is Barclays Effra (or approved fallback) used correctly? Check font weights, sizes, and hierarchy.
|
||||
4. **Typography**: Is Barclays Effra (or Arial fallback) used correctly? Check font weights (Medium/Bold for headings, Regular/Medium for body), sizes per type scale, and line spacing (1.1x or 1.2x).
|
||||
|
||||
5. **Design Principles**: Does the overall design reflect the brand principles of Bold, Purposeful, and Expressive?
|
||||
5. **Design Principles**: Does the overall design reflect Bold, Purposeful, and Expressive principles?
|
||||
|
||||
6. **Sacred Assets**: Verify that sacred assets (Cyan, Logo/Eagle, Portal) are not altered or misused.
|
||||
6. **Sacred Assets**: Verify the three sacred assets (Cyan, Logo, Card Portal) are present and not altered or misused.
|
||||
|
||||
7. **Accessibility**: Check for legible font sizes, proper contrast, and appropriate use of ticker tape (max once per communication, ±1.5° rotation only).
|
||||
|
||||
Provide your analysis as a JSON object. Be specific about any issues found and reference the relevant guideline sections.
|
||||
|
||||
|
|
|
|||
|
|
@ -17,9 +17,13 @@ class ReferenceDocsService:
|
|||
base_path = Path(__file__).parent.parent.parent.parent / "reference_docs"
|
||||
self.base_path = Path(base_path)
|
||||
|
||||
# Path to prompts directory at project root (sibling to backend/)
|
||||
self.prompts_path = Path(__file__).parent.parent.parent.parent / "prompts"
|
||||
|
||||
# Cache loaded documents
|
||||
self._brand_context: str | None = None
|
||||
self._channel_context: str | None = None
|
||||
self._barclaycard_brand_spec: str | None = None
|
||||
|
||||
def get_brand_context(self) -> str:
|
||||
"""Load and return all brand guideline documents as a single context string."""
|
||||
|
|
@ -28,6 +32,22 @@ class ReferenceDocsService:
|
|||
self._brand_context = self._load_all_markdown_files(brand_path)
|
||||
return self._brand_context
|
||||
|
||||
def get_barclaycard_brand_spec(self) -> str:
|
||||
"""Load and return the Barclaycard brand specification from prompts directory."""
|
||||
if self._barclaycard_brand_spec is None:
|
||||
spec_path = self.prompts_path / "brand_barclaycard.md"
|
||||
try:
|
||||
if spec_path.exists():
|
||||
self._barclaycard_brand_spec = spec_path.read_text(encoding="utf-8")
|
||||
else:
|
||||
print(f"Warning: Barclaycard brand spec not found at {spec_path}")
|
||||
# Fall back to raw brand context
|
||||
self._barclaycard_brand_spec = self.get_brand_context()
|
||||
except Exception as e:
|
||||
print(f"Warning: Could not read Barclaycard brand spec: {e}")
|
||||
self._barclaycard_brand_spec = self.get_brand_context()
|
||||
return self._barclaycard_brand_spec
|
||||
|
||||
def get_channel_context(self) -> str:
|
||||
"""Load and return all channel guideline documents as a single context string."""
|
||||
if self._channel_context is None:
|
||||
|
|
|
|||
452
prompts/brand_barclaycard.md
Normal file
452
prompts/brand_barclaycard.md
Normal file
|
|
@ -0,0 +1,452 @@
|
|||
# Barclaycard Brand Specification
|
||||
|
||||
This specification defines the brand guidelines for Barclaycard marketing materials. Use this to assess proof assets for brand compliance.
|
||||
|
||||
---
|
||||
|
||||
## 1. BRAND OVERVIEW
|
||||
|
||||
### Brand Platform
|
||||
- **Expression**: "Capturing possibilities" - Barclaycard captures the attention of audiences by revealing unmissable opportunities
|
||||
- **Identity**: Barclaycard is part of Barclays Group, visually aligned with Barclays while maintaining its distinctive playful DNA
|
||||
|
||||
### Sacred Assets (Non-Negotiable)
|
||||
The following three assets unify Barclaycard across all touchpoints and must never be altered:
|
||||
1. **Logo** - Open World symbol + Barclaycard wordmark
|
||||
2. **Card Portal** - The distinctive rounded-rectangle frame
|
||||
3. **Cyan** - The primary sacred color (#00AEEF)
|
||||
|
||||
### Design Principles
|
||||
All creative work must reflect these principles:
|
||||
- **Bold**: Push boundaries, 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
|
||||
|
||||
---
|
||||
|
||||
## 2. LOGO REQUIREMENTS
|
||||
|
||||
### Usage Rules
|
||||
- **Always Together**: Open World symbol and Barclaycard wordmark must always be used together
|
||||
- **Exceptions for Symbol Only**: Social media profiles, favicons, and app icons may use the Open World symbol alone
|
||||
- **Primary Color**: Cyan logo is used against all palette colors in all possible instances
|
||||
- **Alternative**: White can be used as an exception when cyan is not possible
|
||||
|
||||
### Sizing
|
||||
- **Minimum Width**: 25px for digital applications
|
||||
- **Ideal Width**: 120px when space allows (especially for social media)
|
||||
|
||||
### Clear Space
|
||||
- Maintain clear space around the logo equal to the height of the "c" in the wordmark
|
||||
- Never obstruct the logo or crowd it with other elements
|
||||
|
||||
### Placement
|
||||
- Logo should appear at first point of contact
|
||||
- Position in corners or centered (top/bottom) depending on format
|
||||
- When used with headlines, position logo underneath the typography/heading
|
||||
- If logo exists in product photography and is large enough to see, do not add another logo
|
||||
|
||||
### Don'ts
|
||||
- Never modify, distort, or alter the logo
|
||||
- Never change the logo colors outside of cyan or white
|
||||
- Never place the logo outside of the Card Portal when Card Portal is used
|
||||
- Never reduce below 25px minimum width
|
||||
|
||||
---
|
||||
|
||||
## 3. CARD PORTAL SPECIFICATIONS
|
||||
|
||||
### Purpose
|
||||
The Card Portal is a distinctive graphic device that frames or draws attention to content, revealing opportunities to the audience.
|
||||
|
||||
### Construction Rules
|
||||
- **Color**: Always cyan (#00AEEF) for the border - no exceptions
|
||||
- **Clear Space**: Use 1/12 of shortest side for margin
|
||||
- **Portal Size**: Occupies 10/12 of the space (after clear space)
|
||||
- **Stroke Position**: Stroke sits inside the margin
|
||||
|
||||
### Sizing by Shortest Side
|
||||
|
||||
| Shortest Side | Stroke Weight | Corner Radius |
|
||||
|---------------|---------------|---------------|
|
||||
| ≤299px | 3pt | 10px |
|
||||
| ≤599px | 6pt | 20px |
|
||||
| ≤1920px | 12pt | 30px |
|
||||
| ≤3840px | 24pt | 60px |
|
||||
|
||||
### Rotation
|
||||
- Card Portal can rotate from -1.5° to +1.5° only
|
||||
- Use different rotations to create spontaneity
|
||||
- Never rotate beyond this range
|
||||
|
||||
### Placement
|
||||
- Web: Positioned in Hero banner, always sits in front of other assets
|
||||
- First touchpoint and main entry points
|
||||
- Can be used as architectural beacon in physical spaces
|
||||
|
||||
### Don'ts
|
||||
- Never alter or extend the Card Portal shape
|
||||
- Never change the border color from cyan
|
||||
- Never place the logo outside the Card Portal when Portal is used
|
||||
- Never cover two corners of the Card Portal with overlapping elements
|
||||
- Never use Card Portal if content cannot fit comfortably and be displayed clearly
|
||||
|
||||
---
|
||||
|
||||
## 4. COLOR PALETTE
|
||||
|
||||
### Sacred Color
|
||||
- **Cyan**: #00AEEF (RGB: 0, 174, 239) - Must be visible in all communications
|
||||
|
||||
### Masterbrand Palette (24 colors)
|
||||
|
||||
| Color Name | Hex Code |
|
||||
|------------|----------|
|
||||
| Cyan (Sacred) | #00AEEF |
|
||||
| Light Yellow | #FFFF98 |
|
||||
| Primary Blue (Dark Blue) | #1A2142 |
|
||||
| Bright Blue | #001276 |
|
||||
| Bright Mint | #AFFDFD |
|
||||
| Bright Purple | #5C1E5B |
|
||||
| Black | #000000 |
|
||||
| Stone | #E8E8C9 |
|
||||
| Bright Yellow | #FFFF00 |
|
||||
| Light Teal | #007481 |
|
||||
| Dark Blue | #00395D |
|
||||
| Light Blue | #0076B6 |
|
||||
| Dark Purple | #4C3D6C |
|
||||
| Light Purple | #E1C0E2 |
|
||||
| Light Grey | #D9D9D9 |
|
||||
| Orange | #FFCB05 |
|
||||
| Teal | #006666 |
|
||||
| Mint | #CDF5E8 |
|
||||
| Active Blue | #006DE3 |
|
||||
| Light Claret | #FFC9C9 |
|
||||
| Dark Claret | #752157 |
|
||||
| Electric Violet | #7A0FF9 |
|
||||
| Dark Teal | #004750 |
|
||||
| Green | #3F7E37 |
|
||||
| Electric Blue | #0000FF |
|
||||
| Lime | #C3FB5A |
|
||||
| Bright Claret | #C7237A |
|
||||
| White | #FFFFFF |
|
||||
| Dark Grey | #515151 |
|
||||
|
||||
### 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 Usage Rules
|
||||
- **Cyan**: Use purposefully as a connecting thread, for brand announcements, navigation
|
||||
- **Active Blue**: Only for interactive elements (buttons, links) - never for decoration
|
||||
- **Accessibility**: All color pairings must meet WCAG AA/AAA contrast requirements
|
||||
- Only use approved brand colors - no off-palette colors
|
||||
|
||||
### Approved Color Pairings (WCAG Compliant)
|
||||
- Cyan paired with Bright Blue (AA/AAA)
|
||||
- Light Yellow paired with Dark Grey (AAA/AAA)
|
||||
- Primary Blue paired with White (AA/AAA)
|
||||
- Black paired with White (AAA/AAA)
|
||||
- Bright Blue paired with Bright Mint (AAA/AAA)
|
||||
|
||||
---
|
||||
|
||||
## 5. TYPOGRAPHY
|
||||
|
||||
### Primary Font
|
||||
- **Barclays Effra** - Modern, flexible, digital-first
|
||||
- **System Fallback**: Arial (when Effra unavailable)
|
||||
|
||||
### Available Weights
|
||||
- Light / Light Italic
|
||||
- Regular / Italic
|
||||
- Medium / Medium Italic
|
||||
- Bold / Bold Italic
|
||||
- Heavy / Heavy Italic
|
||||
|
||||
### Usage Rules
|
||||
- **Headings**: Set in Barclays Effra Medium or Bold
|
||||
- **Body Text**: Set in Barclays Effra Regular or Medium
|
||||
- **Line Spacing**: 1.1x or 1.2x text size (exception: Heading XXXL)
|
||||
|
||||
### 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
|
||||
|
||||
### Ticker Tape (Highlight Style)
|
||||
- Used to highlight and elevate key messaging
|
||||
- **Primary Color**: Cyan background with Bright Blue copy
|
||||
- **Rotation**: -1.5° to +1.5° only (rotate the tape, never the type)
|
||||
- **Clear Space**: 25% cap height above/below, 20-30% left/right
|
||||
- **Usage**: Maximum once per communication or well-spaced throughout
|
||||
- **Limits**: Max 3 lines or 4 highlighted words for longer text
|
||||
- Vary length and angle to create spontaneity
|
||||
- Never align ticker tape to a straight margin
|
||||
|
||||
### Don'ts
|
||||
- Never rotate the type itself, only the ticker tape container
|
||||
- Never use multiple sizes for ticker tape headlines
|
||||
- Never overuse ticker tape in a single communication
|
||||
|
||||
---
|
||||
|
||||
## 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 the approved Barclaycard library
|
||||
|
||||
---
|
||||
|
||||
## 8. DIGITAL DESIGN
|
||||
|
||||
### Global Digital Expression (GDE) Characteristics
|
||||
When Blueprint design system is not available, follow these characteristics:
|
||||
- Cyan Card Portal at first touchpoint and main entry points
|
||||
- Barclaycard logo prominently displayed
|
||||
- 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
|
||||
- Bold, purposeful, expressive imagery
|
||||
- Minimalist designs
|
||||
|
||||
### Component Hierarchy (Atomic Design)
|
||||
1. **Atoms**: Basic elements (buttons, inputs, labels)
|
||||
2. **Molecules**: Combined atoms
|
||||
3. **Organisms**: Complex UI sections
|
||||
4. **Templates**: Page layouts
|
||||
5. **Pages**: Full implementations
|
||||
|
||||
---
|
||||
|
||||
## 9. SOCIAL MEDIA GUIDELINES
|
||||
|
||||
### Content Classification
|
||||
|
||||
**Brand-led Content** (heavier brand presence):
|
||||
- Educational, promotional, product demos
|
||||
- Customer testimonials, seasonal content
|
||||
- Uses expanded or combination brand presence
|
||||
|
||||
**Content-led Content** (lighter brand presence):
|
||||
- Entertainment, behind-the-scenes, UGC
|
||||
- Interactive games, competitions, live streams
|
||||
- Uses reduced or minimal brand presence
|
||||
|
||||
### Brand Presence Levels
|
||||
|
||||
| Level | Usage | Assets |
|
||||
|-------|-------|--------|
|
||||
| Reduced | Content-led on TikTok, creator content | Ticker tape, headline, in-app subtitles, profile icon |
|
||||
| Minimal | Logo for recognition | Logo (any corner or centered), profile name |
|
||||
| Combination | Moderate brand presence | Logo + start frame + Card Portal |
|
||||
| Expanded | Maximum brand presence | Logo + start frame + Card Portal + end frame |
|
||||
|
||||
### Logo Placement for Social
|
||||
- Can be in any of 4 corners or centered top/bottom
|
||||
- When used with headlines, position underneath typography
|
||||
- Minimum 25px, ideal 120px width
|
||||
- Never place outside Card Portal
|
||||
|
||||
### Co-branding Social Posts
|
||||
- Follow minimum sizing (25px) and clear space rules
|
||||
- Place Barclaycard and co-brand logos in different corners
|
||||
- Bottom center placement allowed for extreme portrait formats
|
||||
- Below headline placement is acceptable
|
||||
|
||||
### Social Media Don'ts
|
||||
1. Don't alter or extend the Card Portal
|
||||
2. Never place logo outside Card Portal when Portal is used
|
||||
3. Don't repeat layouts in carousels or close posts
|
||||
4. Don't feature other brands prominently without partnership agreement
|
||||
5. Don't cover two corners of the Card Portal
|
||||
|
||||
---
|
||||
|
||||
## 10. EMAIL GUIDELINES
|
||||
|
||||
### Framework
|
||||
- Card 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
|
||||
- Card Portal header
|
||||
- Typography: Barclays Effra
|
||||
- Functional color palette
|
||||
- Proper logo sizing and placement
|
||||
- Approved icons
|
||||
- Consistent padding and spacing based on 8px grid
|
||||
|
||||
---
|
||||
|
||||
## 11. 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)
|
||||
- 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 the content
|
||||
- Transcribe any text that is central to meaning
|
||||
|
||||
---
|
||||
|
||||
## 12. COMMON VIOLATIONS CHECKLIST
|
||||
|
||||
### Logo Issues
|
||||
- [ ] Logo below 25px minimum width
|
||||
- [ ] Missing Open World symbol (wordmark alone)
|
||||
- [ ] Logo modified, distorted, or recolored
|
||||
- [ ] Insufficient clear space around logo
|
||||
- [ ] Logo placed outside Card Portal when Portal is present
|
||||
- [ ] Logo color other than cyan or white
|
||||
|
||||
### Card Portal Issues
|
||||
- [ ] Portal border color other than cyan (#00AEEF)
|
||||
- [ ] Portal altered, extended, or distorted
|
||||
- [ ] Wrong stroke weight for the size
|
||||
- [ ] Wrong corner radius for the size
|
||||
- [ ] Rotation beyond ±1.5°
|
||||
- [ ] Two corners covered by overlapping elements
|
||||
- [ ] Logo placed outside the portal
|
||||
|
||||
### Color Issues
|
||||
- [ ] Off-brand colors used
|
||||
- [ ] Poor color contrast (fails WCAG AA)
|
||||
- [ ] Active Blue (#006DE3) used for non-interactive elements
|
||||
- [ ] Missing cyan in the design
|
||||
- [ ] Non-approved color pairings
|
||||
|
||||
### Typography Issues
|
||||
- [ ] Non-Effra font used (when Effra available)
|
||||
- [ ] Wrong font weights
|
||||
- [ ] Incorrect line spacing
|
||||
- [ ] Ticker tape overused (more than once per communication)
|
||||
- [ ] Ticker tape rotation beyond ±1.5°
|
||||
- [ ] Type itself rotated (not just ticker tape container)
|
||||
|
||||
### Layout Issues
|
||||
- [ ] 8px grid not followed
|
||||
- [ ] Incorrect column structure for breakpoint
|
||||
- [ ] Elements crowding sacred assets
|
||||
|
||||
### 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
|
||||
|
||||
---
|
||||
|
||||
## 13. APPROVAL REQUIREMENTS
|
||||
|
||||
### Big Ticket Approval Required For
|
||||
- New icons not in the approved library
|
||||
- Influencer or celebrity partnerships
|
||||
- Logo variations (e.g., Pride Month adaptations)
|
||||
- Brand activations with modified assets
|
||||
- Certain social content categories
|
||||
|
||||
### 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 Barclaycard Core Principles (October 2024 v4), Digital Guidelines (March 2024 v1), Social Media Guidelines (May 2024 v1), Experiential Guidelines (June 2024 v1), and Email Guidelines (January 2025 v3).*
|
||||
Loading…
Add table
Reference in a new issue