diff --git a/backend/app/agents/brand_agent.py b/backend/app/agents/brand_agent.py index 4494fb0..f61d048 100755 --- a/backend/app/agents/brand_agent.py +++ b/backend/app/agents/brand_agent.py @@ -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. diff --git a/backend/app/services/reference_docs.py b/backend/app/services/reference_docs.py index 041e33f..819b8cc 100755 --- a/backend/app/services/reference_docs.py +++ b/backend/app/services/reference_docs.py @@ -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: diff --git a/prompts/brand_barclaycard.md b/prompts/brand_barclaycard.md new file mode 100644 index 0000000..50914d0 --- /dev/null +++ b/prompts/brand_barclaycard.md @@ -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).*