# 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).*
