
# An introduction to our digital brand

## Discover our global digital expression

BARCLAYS

February 2024
RESTRICTED – EXTERNAL: This document is for use only by Barclays employees and their nominated agencies.
This document has been optimised for digital and should not be printed where possible.


---



< Previous    Brand expression core principles    Design principles    Blueprint    GDE    Visual overview    Accessibility    Next >

# Brand expression core principles

This guideline document is an introduction to our digital brand expression. To find out more about our brand and how it is used in other platforms, take a look at our brand expression core principles.

Here are some key things to remember:

* Ensure you use the correct Eagle
* Logo and Eagle proportions must be adhered to
* No elements should be on the Portal except the Eagle and the permitted image cut-out or headline overlap
* Portal sizes and treatments must not be changed except as shown in core principles
* Photography is primary over graphics
* Do not over-use cyan, it should always be purposeful
* Colour sets should be used when using multiple colours in communications
* To meet accessibility criteria, only use nominated colour pairings.

**Navigation Menu:**
* Introduction
* Approach to digital
* Toolkit
* How it comes together
* Digital governance
* Contacts

**Sample Page Display - Capturing possibilities:**

## Capturing possibilities

Our world is full of possibilities, there to be seized, but often disappearing before people can make the most of them. At Barclays, we keep our eye on the horizon, focused on discovering new possibilities as they appear.

Once we spot them, we act boldly to present them to our customers, clients and colleagues; to the large and small, the confident and cautious, and everyone in between.

Because we believe that by capturing possibilities we're helping create brighter futures, making an enduring difference for each other and for the long term.

**Navigation items shown in sample:**
* Introduction
* Brand expression core principles
* Design principles
* Voice
* Accessibility
* Visual overview
* Sacred assets
* Logo
* Portal
* Colour
* Typography
* Photography
* Graphic style
* Motion
* Global digital expression
* Applications
* Business units
* Contacts

An introduction to our digital brand
February 2024
Page 2


---



< Previous    Brand expression core principles    Design principles    Blueprint    GDE    Visual overview    Accessibility    Next >

* Introduction
* Approach to digital
* Toolkit
* How it comes together
* Digital governance
* Contacts

# Design principles

The purpose of this document and our component library is to build a design system for use across all digital experiences.

As part of our improved design system, we aim to achieve:

* Carefully designed components inviting interactivity
* An optimised colour palette and clear navigational system
* Consideration of brand asset usage for digital spaces.

Please note: we have been working to an 8 px baseline grid across everything in this file. Where this isn't appropriate or practical this has been pulled out as an exception.

When working with the Barclays brand, our design principles must be considered. They are:

## Bold
All creative work we do should push boundaries, be innovative, bold and inventive. We strive for vivid, fresh, never seen before ideas that will create impact in busy digital settings.

## Purposeful
We create purposeful, impeccable designs, tailored to the needs and design cues of each of our audiences, enterprise wide. As skilled experts, we are able to present complex information with clarity. Delivering trustworthy experiences that are truly authentic to who we are. Creating seamless and frictionless digital experiences.

## Expressive
We want the work we produce to be positive, human, aspirational and expressive. Grounded in the reality of our customers, clients and business – we focus on the people we work for and those we work with. We believe in surfacing the most powerful currency of them all – real human connection, both on and offline.

## Sacred assets
The Eagle, Portal and the colour cyan are our sacred assets, unifying and visually connecting our brand across every touchpoint and audience, enterprise wide. Instantly recognisable through the power of one Barclays. We have optimised some of our sacred assets to perform better in digital environments.

An introduction to our digital brand
February 2024                                                                                                                                           Page 3


---



< Previous    Brand expression core principles    Design principles    Blueprint    GDE    Visual overview    Accessibility    Next >

* Introduction
* Approach to digital
* Toolkit
* How it comes together
* Digital governance
* Contacts

# Blueprint

Blueprint is a user experience framework and component library designed to help deliver our digital services in a faster, more consistent way.

Our global digital expression (GDE) is a system of design elements that allow anyone to create beautiful, forward-thinking and accessible digital experiences for our customers, clients and colleagues.

Like our brand assets, our GDE can be flexed depending on the format, touchpoint or audience, and Blueprint defines how we want users to experience our brand.

Blueprint contains components that can be applied across most Barclays-owned digital channels including the Barclays app, Online Banking, home.barclays and internal tools like FullServe.

The component library includes the fundamentals, key technical details and additional information to help build brilliant designs that work. This is all to ensure that we build a consistent and brand-led user experience across our digital touchpoints with usability and accessibility at the heart.

Wherever possible, Blueprint should be the common design language used in our digital channels across Barclays. Anything created from 2021 should use Blueprint components.

In instances where Blueprint can't be used (e.g. third party or white labelled platforms) these guidelines should be followed to ensure brand consistency.

For access to the Blueprint design system libraries, please email creativecloudmanagement@barclays.com

An introduction to our digital brand
February 2024                                                                                                                                                Page 4


---



< Previous    Brand expression core principles    Design principles    Blueprint    GDE    Visual overview    Accessibility    Next >

# Global Digital Expression (GDE)

Where possible, use **Blueprint design system**. If not using Blueprint, align to the characteristics of the **GDE**:

* Cyan Portal in first touch point and main entry points*
* Optimized logo and eagle
* Barclays Effra fonts and accessible type colour and size
* Barclays functional palettes
* Accessibility approved colour parings only
* Light mode: White background with greyscales for layering
* Dark mode: Midnight Blue background with greyscales for layering
* Rounded corner components, except for heroes or full width components
* Bold, purposeful, expressive imagery style
* Minimalist designs

----

**BARCLAYS** Personal    Contact us    Find a branch    Search    Register    Login

Digital banking    Bank accounts    Borrowing    Credit cards    Savings    Investments    Insurance    Help and support

**INSURANCE**

## Life insurance

**What's life insurance?**

Life insurance helps makes sure your loved ones are protected if you die or become terminally ill with a life expectancy of less than 12 months.

Getting life insurance might not seem urgent right now, but the earlier you get it, the less it'll cost.

Your monthly payment stays the same throughout your policy, too.

Already a customer and looking to make a claim?    [Make a claim]

*defined as where half or majority of traffic comes from outside Barclays channels

Introduction
Approach to digital
Toolkit
How it comes together
Digital governance
Contacts

An introduction to our digital brand
February 2024                                                                                                                                                Page 5


---



< Previous    Brand expression core principles    Design principles    Blueprint    GDE    Visual overview    Accessibility    Next >

# Visual overview

The following areas illustrate our 2D components within our brand expression that need to be considered.

## Brand Components

**Cyan**
[Large cyan blue rectangular color block]

**Logo**
BARCLAYS [with blue eagle logo]

**Eagle**
[Blue eagle symbol on light background]

**Portal**
[Cyan background with dark teal/green rectangular overlay]

**Typefaces**
Barclays Effra
Arial

**Colour**
[Color palette grid showing various colors including:
- Yellow, dark blue, bright yellow, light yellow
- Dark green, light green, teal, light blue
- Blue, medium blue, light blue, cyan
- Pink, light pink, purple, black
- White, gray, dark purple, black]

**Photography**
[Collection of photographs showing:
- Two people walking (woman in red dress, man in patterned shirt)
- Person with laptop outdoors
- Two people looking at laptop together]

**Graphic style**
[Various graphic elements including:
- Stylized mountain/landscape illustration
- Blue key icon
- Building/cityscape illustration
- Coffee cup icon]

**Motion**
ALWAYS MOVING.
WE NEVER STOP.

**Global digital expression**
Link label >    Link label    [Link label icon]

Button label    [User icon]
                Link label

[Toggle switches and UI elements]
[Slider control]

Step 1 of 3

An introduction to our digital brand
February 2024                                                                                                                    Page 6


---



Brand expression core principles | Design principles | Blueprint | Visual overview | Accessibility

Previous ← | → Next

# Accessibility

**Navigation Menu:**
* Introduction
* Approach to digital  
* Toolkit
* How it comes together
* Digital governance
* Contacts

Accessibility at Barclays means we ensure that we provide products, services or employment for everyone, regardless of their abilities, situation or circumstances.

This extends to how we design and develop digital services – ensuring we provide a great experience for a greater number of people.

We don't want to unintentionally leave out or leave anyone behind, so focusing on accessibility and inclusive design has to be at the heart of how we operate.

See Barclays accessibility information.

An introduction to our digital brand
February 2024                                                                                                                                                Page 7


---



< Previous    Branded user experience  Atomic design    Next >

# Branded user experience (UX)

Here are the key considerations we keep in mind to ensure that all our digital experiences are right for Barclays.

## Functional

All Barclays digital platforms must function in the way(s) the user expects. We always consider the latest user experience (UX) and user interface (UI) expectations and optimisations, accessibility and other digital hygiene factors such as frictionless navigation.

## Relevant

Always be aware of the context of which our experiences are going to exist within and how our content will be consumed. Everything in the digital experience must have a purpose to the user.

## Focused

The Barclays digital experience should be intuitive, user-centric, seamless and consistent across touchpoints.

## Differentiated

Keeping what makes 'Barclays, Barclays' whilst also pushing the boundaries makes our experiences stand out. Developing unique emotional connections that create value with every interaction is core to our digital brand.

An introduction to our digital brand
February 2024Page 8


---



< Previous    Branded user experience  Atomic design    Next >

# Atomic design

Our digital communications are built on atomic design; the process of creating effective design systems, from the smallest component (atoms: buttons) to larger, more complex organisms through to templates and pages.

You can find all components in Blueprint design system libraries. To request access, please email creativecloudmanagement@barclays.com.

<table>
<tr>
<td>Atoms</td>
<td>Molecules</td>
<td>Organisms</td>
<td>Templates</td>
<td>Pages</td>
</tr>
</table>

<table>
<tr>
<td>Button</td>
<td>Search bar</td>
<td>Header navigation</td>
<td colspan="2">Templates / Pages. If you require any templates or pages please get in touch with the development teams at Barclays.</td>
</tr>
<tr>
<td>Button label</td>
<td>Search or ask a question...</td>
<td>Personal<br/>🔔 👤 🔍 Log out</td>
<td></td>
<td></td>
</tr>
</table>

**Navigation Menu:**
* Introduction
* **Approach to digital** (highlighted)
* Toolkit
* How it comes together
* Digital governance
* Contacts

An introduction to our digital brand
February 2024
Page 9


---



< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

# The Eagle

**The Eagle    The Portal and cyan**

We've optimised our Eagle to be better seen at all sizes and for all audiences.

There are now three versions available which will work responsively when implemented successfully into our ecosystem.

We only ever use the favicon version for its sole intended purpose, and smaller formats predominantly for usage between 27-49 px.

<table>
<tr>
<td>Favicon<br>16-26 px</td>
<td>Smaller formats<br>27-49 px</td>
<td>Normal<br>50 px+</td>
</tr>
</table>

**The Eagle becomes blurred when small**
The detailed feathers and wing tips on the Eagle get pixelated and fuzzy at small sizes so we use the favicon version.

**We now have a responsive logo**
Our approved responsive logos ensure the Eagle stays sharp with 3 sizes for different scales.

An introduction to our digital brand
February 2024                                                                                                                                                         Page 10


---



< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

# The Portal

**The Eagle**  **The Portal and cyan**

Our Portal is used to thoughtfully welcome users, highlight key content and transport users through the journey.

It is intended to enhance and not distract from the overall experience.

The Portal also allows us to bring more cyan into our digital experiences.

We do not want to overuse the Portal and so we want to ensure that all instances aid brand recognition and support the use of cyan.

<table>
<tr>
<td>

**BARCLAYS**

**Digital banking** | **Bank accounts** | **Borrowing** | **Credit cards** | **Savings** | **Investments** | **Insurance** | **Help and support**

Personal | Contact us | Find a branch | Search | Register | Login

The Bank of England base rate change December 2022. Do you have savings, a mortgage or credit cards with us? Find out what the change means for you.

**Make money work for you**

Everything you need in the palm of your hand from a bank you can trust

**Explore accounts** | **Get the app**

**Explore all that Barclays has to offer**

From current accounts, mortgages and insurance, to loans, credit cards and saving accounts - see how we can help you.

</td>
<td>

**Mobile App Interface:**

19:02

Hi Emilie

**Your favourites** | **Customise**

**Barclays Essentials**
£1,323.84
Available balance

**Barclaycard Forward**
£800.23

**Your daily insights**

Spotify direct debit change

</td>
<td>

**Account Details:**

← Barclays Essentials

20-30-02 4849 06984
**£1,323.84**
Available balance
Overdraft: £1,000.00

**Transfer**

**Recent transactions**
ZTL*CAFEAMOR LTD
12 Nov 2022

Starbucks
12 Nov 2022

Dogs Trust
11 Nov 2022

</td>
</tr>
</table>

**BARCLAYS**

**Barclays Marketing Frontiers**

**The Power of Purpose**

Dear Colleague,

And the second – made possible by that underlying soundness and strength – is our continued support for our customers, our clients, our colleagues, and the communities and economies where we live and work around the world.

**H1 highlights video** I am incredibly proud of the way all of you have worked together to support Barclays' obligation to help alleviate the social and economic impact of COVID-19, and I thank you for everything you're doing.

We've produced another video featuring many of you telling our story - so please do take the time to watch it.

**Event details**

**Left Sidebar Navigation:**
* Introduction
* Approach to digital
* **Toolkit** (highlighted)
* How it comes together
* Digital governance
* Contacts

**An introduction to our digital brand**

February 2024

Page 11


---



< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

# Blue - Interactive

Blue - Interactive  Masterbrand  Functional light  Functional dark  Pairings  Pairing examples

Cyan is one of our sacred assets, it should be used where possible with our brand elements, such as our logo, Eagle and the Portal.

Blue - Interactive is a functional colour that is used to highlight interactive elements such as buttons or links.

It has been carefully designed to be easily accessible with our background colour selection in both light and dark modes.

<table>
<thead>
<tr>
<th>1 Masterbrand sacred asset</th>
<th>2 Interaction colour – light mode</th>
<th>3 Interaction colour – dark mode</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cyan<br>
Hex:<br>
00AEEF
</td>
<td>
Blue - Interactive - light mode<br>
Hex:<br>
006DE3
</td>
<td>
Blue - Interactive - dark mode<br>
Hex:<br>
3696FC
</td>
</tr>
</tbody>
</table>

The page shows three mobile phone mockups demonstrating the practical application of these colors:

**Phone 1 (Light Mode):** Shows the Barclays app interface with cyan branding elements, displaying account balances for Barclays Essentials (£1,323.84) and Barclaycard Forward (£800.23), along with various interactive elements and notifications.

**Phone 2 (Welcome Screen):** Displays the Barclays welcome screen with blue interactive elements, featuring "I have an account" and "Apply for a bank account" buttons.

**Phone 3 (Dark Mode):** Shows the same interface as Phone 1 but in dark mode, demonstrating how the interactive blue color (3696FC) works against dark backgrounds while maintaining accessibility and brand consistency.

An introduction to our digital brand
February 2024                                                                                                                                                Page 12


---



Sacred assets Colour Type Grids Icons UI motion Components Cards Photography Graphics

# Masterbrand palette

Blue - Interactive    Masterbrand     Functional light  Functional dark  Pairings    Pairing examples

Our Masterbrand colours and a bespoke functional palette are used on digital applications. Always apply them purposefully on your designs.

This palette can be used with both light and dark modes.

**Active blue**  
*Active blue is a functional colour that is used to highlight interactive elements such as buttons or links only.*

<table>
<thead>
<tr>
<th>Cyan</th>
<th>Light yellow</th>
<th>Primary blue</th>
<th>Bright blue</th>
<th>Bright mint</th>
<th>Bright purple</th>
<th>Black</th>
<th>Stone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hex:<br>00AEEF<br><br>RGB:<br>0 174 239</td>
<td>Hex:<br>FFFF98<br><br>RGB:<br>255 255 152</td>
<td>Hex:<br>1A2142<br><br>RGB:<br>26 33 66</td>
<td>Hex:<br>001276<br><br>RGB:<br>0 18 118</td>
<td>Hex:<br>AFFDFD<br><br>RGB:<br>175 253 253</td>
<td>Hex:<br>5C1E5B<br><br>RGB:<br>92 30 91</td>
<td>Hex:<br>272727<br><br>RGB:<br>39 39 39</td>
<td>Hex:<br>E8E8C9<br><br>RGB:<br>232 232 201</td>
</tr>
<tr>
<td></td>
<td>Bright yellow<br><br>Hex:<br>FFFF00<br><br>RGB:<br>255 255 0</td>
<td>Light teal<br><br>Hex:<br>007481<br><br>RGB:<br>0 116 129</td>
<td>Dark blue<br><br>Hex:<br>00395D<br><br>RGB:<br>0 57 93</td>
<td>Light blue<br><br>Hex:<br>0076B6<br><br>RGB:<br>0 118 182</td>
<td>Dark purple<br><br>Hex:<br>4C3D6C<br><br>RGB:<br>76 61 108</td>
<td>Light purple<br><br>Hex:<br>E1C0E2<br><br>RGB:<br>225 192 226</td>
<td>Light grey<br><br>Hex:<br>D9D9D9<br><br>RGB:<br>217 217 217</td>
</tr>
<tr>
<td></td>
<td>Orange<br><br>Hex:<br>FFCB05<br><br>RGB:<br>255 203 5</td>
<td>Teal<br><br>Hex:<br>006666<br><br>RGB:<br>0 102 102</td>
<td>Mint<br><br>Hex:<br>CDF5E8<br><br>RGB:<br>205 245 232</td>
<td>Active blue<br><br>Hex:<br>006DE3<br><br>RGB:<br>0 109 227</td>
<td>Light claret<br><br>Hex:<br>FFC9C9<br><br>RGB:<br>255 201 201</td>
<td>Electric violet<br><br>Hex:<br>7A0FF9<br><br>RGB:<br>122 15 249</td>
<td>Dark grey<br><br>Hex:<br>515151<br><br>RGB:<br>81 81 81</td>
</tr>
<tr>
<td></td>
<td>Lime<br><br>Hex:<br>C3FB5A<br><br>RGB:<br>195 251 90</td>
<td>Dark teal<br><br>Hex:<br>004750<br><br>RGB:<br>0 71 80</td>
<td>Green<br><br>Hex:<br>3F7E37<br><br>RGB:<br>63 126 55</td>
<td>Electric blue<br><br>Hex:<br>0000FF<br><br>RGB:<br>0 0 255</td>
<td>Bright claret<br><br>Hex:<br>C7237A<br><br>RGB:<br>199 35 122</td>
<td>Dark claret<br><br>Hex:<br>752157<br><br>RGB:<br>117 33 87</td>
<td>White<br><br>Hex:<br>FFFFFF<br><br>RGB:<br>255 255 255</td>
</tr>
</tbody>
</table>

An introduction to our digital brand
February 2024


---



Sacred assets Colour Type Grids Icons UI motion Components Cards Photography Graphics

# Functional palette

Blue - Interactive | Masterbrand | Functional light | **Functional dark** | Pairings | Pairing examples

Blue - Interactive is used for all interactive elements.

Supplementing our colour palette, we have a set of colours used within digital communications to signify a particular action or perform specific functions:

* Blue - Interactive is used to highlight interactive elements such as buttons or links
* Status colours and tints are used in form fields, alerts and notifications to indicate new information, errors, warnings, or successes.
* Blue - Interactive and Blue - Information have the same hex code but different labels depending on the context they are used in.

To align with Blueprint, our Functional palette naming is updated to include Blueprint colour labels.

## Master palette - light

<table>
<tr>
<td>Cyan - Brand<br>Hex:<br>00AEEF</td>
<td>Blue - Interactive<br>Hex:<br>006DE3</td>
<td>Black - Interactive 2<br>Hex:<br>272727</td>
</tr>
</table>

## Status

<table>
<tr>
<td>Blue - Information<br>Hex:<br>006DE3</td>
<td>Green - Success<br>Hex:<br>09821F</td>
<td>Amber - Warning<br>Hex:<br>FFBA00</td>
<td>Red - Error<br>Hex:<br>E3000F</td>
</tr>
</table>

## Grey scale

<table>
<tr>
<td>White - Neutral 000<br>Hex:<br>FFFFFF</td>
<td>Grey - Neutral 100<br>Hex:<br>F6F6F6</td>
<td>Grey - Neutral 300<br>Hex:<br>E2E2E2</td>
</tr>
<tr>
<td>Grey - Neutral 700<br>Hex:<br>8E8E8E</td>
<td>Grey - Neutral 900<br>Hex:<br>515151</td>
<td>Black - Title<br>Hex:<br>272727</td>
</tr>
</table>

## Status tints light

<table>
<tr>
<td>Information light<br>Hex:<br>E7F0FB</td>
<td>Success light<br>Hex:<br>E9F4EA</td>
<td>Warning light<br>Hex:<br>FFF8E7</td>
<td>Error light<br>Hex:<br>FDE7E9</td>
<td>Neutral 900 light<br>Hex:<br>EEEEEE</td>
</tr>
</table>

## Status tints extra light

<table>
<tr>
<td>Information extra light<br>Hex:<br>F2F8FE</td>
<td>Success extra light<br>Hex:<br>F4F9F5</td>
<td>Warning extra light<br>Hex:<br>FFF8E7</td>
<td>Error extra light<br>Hex:<br>FCF3F3</td>
<td>Neutral 900 extra light<br>Hex:<br>F6F6F6</td>
</tr>
</table>

An introduction to our digital brand
February 2024
Page 14


---



Sacred assets | Colour | Type | Grids | Icons | UI motion | Components | Cards | Photography | Graphics

Previous ← | → Next

# Functional palette

Blue - Interactive | Masterbrand | Functional light | **Functional dark** | Pairings | Pairing examples

Our dark mode is designed to be a supplemental mode (digital only, not for print).

## Master palette - dark

<table>
<thead>
<tr>
<th>Cyan - Brand</th>
<th>Blue - Interactive</th>
<th>White - Interactive 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hex: 00AEEF</td>
<td>Hex: 3696FC</td>
<td>Hex: FFFFFF</td>
</tr>
</tbody>
</table>

## Status

<table>
<thead>
<tr>
<th>Blue - Information</th>
<th>Green - Success</th>
<th>Amber - Warning</th>
<th>Red - Error</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hex: 3696FC</td>
<td>Hex: 32D74B</td>
<td>Hex: FFC21C</td>
<td>Hex: FF5B4B</td>
</tr>
</tbody>
</table>

## Greyscale

<table>
<thead>
<tr>
<th>Black - Neutral 000</th>
<th>Black - Neutral 100</th>
<th>Black - Neutral 300</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hex: 161B2F</td>
<td>Hex: 292B3D</td>
<td>Hex: 646774</td>
</tr>
</tbody>
</table>

<table>
<thead>
<tr>
<th>Black - Neutral 700</th>
<th>Black - Neutral 900</th>
<th>White - Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hex: 979AA3</td>
<td>Hex: CBCCD1</td>
<td>Hex: FFFFFF</td>
</tr>
</tbody>
</table>

## Status tints light

<table>
<thead>
<tr>
<th>Information light</th>
<th>Success light</th>
<th>Warning light</th>
<th>Error light</th>
<th>Neutral 900 light</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hex: 192744</td>
<td>Hex: 192E32</td>
<td>Hex: 2D2C2D</td>
<td>Hex: 2D1F30</td>
<td>Hex: 262C42</td>
</tr>
</tbody>
</table>

## Status tints extra light

<table>
<thead>
<tr>
<th>Information extra light</th>
<th>Success extra light</th>
<th>Warning extra light</th>
<th>Error extra light</th>
<th>Neutral 900 extra light</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hex: 1C253C</td>
<td>Hex: 1C2930</td>
<td>Hex: 29282D</td>
<td>Hex: 281F2E</td>
<td>Hex: 262939</td>
</tr>
</tbody>
</table>

Introduction
Approach to digital
Toolkit
How it comes together
Digital governance
Contacts

An introduction to our digital brand
February 2024
Page 15


---



< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

* Introduction
* Approach to digital
* **Toolkit**
* How it comes together
* Digital governance
* Contacts

# Colour pairings

Blue - Interactive  Masterbrand  Functional light  Functional dark  Pairings  **Pairing examples**

We want to make use of the full Masterbrand palette whilst retaining accessibility. We have carefully selected and tested the colour pairings shown here to ensure the combinations not only look cohesive, but always adhere to our accessibility standards.

Within this, certain colours have been attributed to certain business units, please refer to core principles for further guidance on this.

For Functional palette colour pairings, please refer directly to the Foundations Library in Blueprint.

<table>
<tr>
<td>Light yellow<br><em>paired with</em><br>Dark grey</td>
<td>Primary blue<br><em>paired with</em><br>White</td>
<td>Bright blue<br><em>paired with</em><br>Bright mint</td>
<td>Bright mint<br><em>paired with</em><br>Bright blue</td>
<td>Bright purple<br><em>paired with</em><br>Light purple</td>
<td>Black<br><em>paired with</em><br>White</td>
<td>Stone<br><em>paired with</em><br>Dark blue</td>
</tr>
<tr>
<td>Bright yellow<br><em>paired with</em><br>Dark grey</td>
<td>Light teal<br><em>paired with</em><br>Bright mint</td>
<td>Dark blue<br><em>paired with</em><br>Light purple</td>
<td>Light blue<br><em>paired with</em><br>White</td>
<td>Dark purple<br><em>paired with</em><br>Light purple</td>
<td>Light purple<br><em>paired with</em><br>Dark claret</td>
<td>Light grey<br><em>paired with</em><br>Dark grey</td>
</tr>
<tr>
<td>Orange<br><em>paired with</em><br>Dark grey</td>
<td>Teal<br><em>paired with</em><br>Bright mint</td>
<td>Mint<br><em>paired with</em><br>Bright blue</td>
<td>Active blue<br><em>paired with</em><br>White</td>
<td>Light claret<br><em>paired with</em><br>Dark claret</td>
<td>Electric violet<br><em>paired with</em><br>White</td>
<td>Dark grey<br><em>paired with</em><br>White</td>
</tr>
<tr>
<td>Lime<br><em>paired with</em><br>Dark teal</td>
<td>Dark teal<br><em>paired with</em><br>Bright mint</td>
<td>Green<br><em>paired with</em><br>White</td>
<td>Electric blue<br><em>paired with</em><br>Mint</td>
<td>Bright claret<br><em>paired with</em><br>White</td>
<td>Dark claret<br><em>paired with</em><br>Light purple</td>
<td>White<br><em>paired with</em><br>Black</td>
</tr>
</table>

An introduction to our digital brand
February 2024


---



An introduction to our digital brand
February 2024

< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

# Pairing examples

Blue - Interactive  Masterbrand  Functional light  Functional dark  Pairings  **Pairing examples**

These examples show how some of the colour pairings come to life on cards.

## Chart / Table / Icon

**Shopping**
£180.27

42% ↑ This month you save 42% more

You've spent 24% of your shopping budget

Light claret
*paired with*
Dark claret

## For specific business units

**INCOME**

<table>
<thead>
<tr>
<th>Day</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>M</td>
<td>+3%</td>
</tr>
<tr>
<td>T</td>
<td>+2%</td>
</tr>
<tr>
<td>W</td>
<td>+1%</td>
</tr>
<tr>
<td>T</td>
<td>+1%</td>
</tr>
<tr>
<td>F</td>
<td>+2%</td>
</tr>
<tr>
<td>S</td>
<td>+3%</td>
</tr>
</tbody>
</table>

7 Days  30 Days  90 Days

Stone
*paired with*
Dark blue

<page_footer>
An introduction to our digital brand
February 2024Page 17


---



< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

# Typography

Typography  Type scale  Responsive type

Barclays Effra is our primary font. It's modern, flexible and digital first. Barclays Effra should be used wherever possible.

We use Light, Regular, Medium and Bold weights to create a clear hierarchy and to ensure accessibility.

Headings are set in Barclays Effra Medium or Bold.

Barclays Effra Light is used as an option for applications targeted at high-net-worth audiences only.

Body text is set in Barclays Effra Regular or Medium, this provides flexibility for hierarchy.

Line spacing is either 1.1 or 1.2x text size with the exception of Heading XXXL.

## Primary font

Barclays Effra light

*Barclays Effra light italic*

Barclays Effra regular

*Barclays Effra italic*

**Barclays Effra medium**

***Barclays Effra medium italic***

**Barclays Effra bold**

***Barclays Effra bold italic***

**Barclays Effra heavy**

***Barclays Effra heavy italic***

## Secondary font

If Barclays Effra is not available and Expert Sans is required, please contact the Group Brand team.

## System font

**Arial / Arial bold**

Arial is the system font and should be used where Effra and Expert Sans are not available.

An introduction to our digital brand
February 2024                                                                                                                                          Page 18


---



< Previous    Sacred assets  Colour  <ins>Type</ins>  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

# Type scale

Typography    <ins>Type scale</ins>    Responsive type

The type scale comprises eight typographic styles. This range is designed to support all the needs of your application and its content.

<table>
<thead>
<tr>
<th>Name</th>
<th>Examples</th>
<th>Font size</th>
<th>Line height PX (Ratio)</th>
<th>Letter spacing</th>
</tr>
</thead>
<tbody>
<tr>
<td>Supersize</td>
<td>Titles or large ££</td>
<td>80 px</td>
<td>88 px (1.1)</td>
<td>-24</td>
</tr>
<tr>
<td>XX Large</td>
<td>Hero title</td>
<td>48 px</td>
<td>56 px (1.166)</td>
<td>-16</td>
</tr>
<tr>
<td>X Large</td>
<td>Sub headlines, article titles</td>
<td>32 px</td>
<td>40 px (1.25)</td>
<td>-12</td>
</tr>
<tr>
<td>Large</td>
<td>Large copy, quotes</td>
<td>24 px</td>
<td>32 px (1:333)</td>
<td>-4</td>
</tr>
<tr>
<td>8 px grid exception    Medium</td>
<td>Sub titles for body copy</td>
<td>20 px</td>
<td>28 px (1.4)</td>
<td>-4</td>
</tr>
<tr>
<td>Standard</td>
<td>Body copy, Buttons, Labels</td>
<td>16 px</td>
<td>24 px (1.5)</td>
<td>0</td>
</tr>
<tr>
<td>8 px grid exception    Small</td>
<td>Small copy, form descriptions</td>
<td>14 px</td>
<td>21 px (1.5)</td>
<td>8</td>
</tr>
<tr>
<td>8 px grid exception    X Small</td>
<td>Footer content</td>
<td>12 px</td>
<td>18 px (1.5)</td>
<td>12</td>
</tr>
</tbody>
</table>

An introduction to our digital brand
February 2024                                                                                                Page 19


---



< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

## Navigation

* Introduction
* Approach to digital  
* Toolkit
* How it comes together
* Digital governance
* Contacts

# Responsive type

Typography  Type scale  Responsive type

We've developed our type sizes to be suitable for average screen densities and reading comfort under typical conditions.

Type is sized across two breakpoint groups to suit a range of devices and input methods.

<table>
<thead>
<tr>
<th>Name</th>
<th>Other (641+)</th>
<th>Mobile (0-640)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Supersize</td>
<td>80 / 88</td>
<td>48 / 56</td>
</tr>
<tr>
<td>XX Large</td>
<td>48 / 56</td>
<td>32 / 40</td>
</tr>
<tr>
<td>X Large</td>
<td>32 / 40</td>
<td>24 / 32</td>
</tr>
<tr>
<td>Large</td>
<td>24 / 32</td>
<td>20 / 28</td>
</tr>
<tr>
<td>Medium</td>
<td>20 / 28</td>
<td>18 / 24</td>
</tr>
<tr>
<td>Standard</td>
<td>16 / 24</td>
<td>No change</td>
</tr>
<tr>
<td>Small</td>
<td>14 / 21</td>
<td>No change</td>
</tr>
<tr>
<td>X Small</td>
<td>12 / 18</td>
<td>No change</td>
</tr>
</tbody>
</table>

An introduction to our digital brand
February 2024                                                                                                    Page 20


---



< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

Introduction

Approach to digital

Toolkit

How it comes together

Digital governance

Contacts

# Grids

Desktop  Tablet  Mobile

The Barclays grid system is set up to three different screen-scales to allow for responsive design across different platforms and devices:

• Desktop (12 column)
• Tablet (12 column)  
• Mobile (6 column)

**Please note:** we have used an 8 px baseline grid. Where this isn't appropriate or practical this has been highlighted as an exception.

Desktop 1440 px
Columns: x12
Margin: 24 px
Gutters: 24 px

An introduction to our digital brand

February 2024                                                                                                                                Page 21


---



An introduction to our digital brand
February 2024Page 22

# Grids

**Desktop** **Tablet** **Mobile**

The Barclays grid system is set up to three different screen-scales to allow for responsive design across different platforms and devices:

• Desktop (12 column)
• Tablet (12 column)  
• Mobile (6 column)

**Please note:** we have used an 8 px baseline grid. Where this isn't appropriate or practical this has been highlighted as an exception.

**Tablet 763 px**
Columns: x12
Margin: 24 px
Gutters: 24 px

[The page shows a visual grid diagram displaying the tablet layout with 12 columns, each marked with "24 px" spacing indicators at the top and bottom. The grid shows the column structure with margins and gutters clearly defined across the 763px width.]

---



< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

Introduction

Approach to digital

Toolkit

How it comes together

Digital governance

Contacts

# Grids

Desktop    Tablet    Mobile

The Barclays grid system is set up to three different screen-scales to allow for responsive design across different platforms and devices:

* Desktop (12 column)
* Tablet (12 column)
* Mobile (6 column)

**Please note:** we have used an 8 px baseline grid. Where this isn't appropriate or practical this has been highlighted as an exception.

Mobile 375 px
Columns: x6
Margin: 24 px
Gutters 16 px

[The page shows a visual grid diagram illustrating the mobile layout with 6 columns, showing measurements of 24 px margins and 16 px gutters between columns]

An introduction to our digital brand

February 2024                                                                                                                                                Page 23


---



< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

# Functional iconography

How to create them    Most popular examples

We use icons to represent our services, creating a more intuitive experience and helping to guide our users through their journey. We have an icon library but if you need to create new icons follow the steps below.

**How to create them**
(1) Use a 24x24 px grid as a starting point
(2) Design the icon using a 2 px thickness throughout
(3) Apply a 1 px rounded corner to the outside edge of the icon.

(1) Create a 24x24 px grid    (2) Design the icon using a 2 px thickness throughout    (3) Apply a 1 px rounded corner to the outside edge of the icon

Icons should communicate their function simply with as few lines as possible. Three scales have been designed to allow for different icon usage and different screen sizes. The default line-drawn icons become filled icons to indicate their selected or activated state.

## Scale

Default – 24 px    Small – 20 px (8 px grid exception)    Large – 32 px

## States

Selected    Activated

Any new items require Big Ticket approval.

**Navigation Menu:**
* Introduction
* Approach to digital
* Toolkit
* How it comes together
* Digital governance
* Contacts

An introduction to our digital brand

February 2024                                                                                                                                            Page 24


---



< Previous    Sacred assets  Colour  Type  Grids  Icons  UI motion  Components  Cards  Photography  Graphics    Next >

**Navigation Menu:**
* Introduction
* Approach to digital
* **Toolkit**
* How it comes together
* Digital governance
* Contacts

----

**An introduction to our digital brand**
February 2024

# Functional iconography

## How to create them    ## Most popular examples

<table>
<tr>
<td>

**Light Theme Icons:**

<table>
<tr>
<td>⏱</td><td>←</td><td>⚙</td><td>✕</td><td>🔄</td><td>⏰</td>
</tr>
<tr>
<td>📅</td><td>🖼</td><td>🔒</td><td>📊</td><td>📋</td><td>🔔</td>
</tr>
<tr>
<td>🏠</td><td>🔖</td><td>✉</td><td>✏</td><td>🚫</td><td>⚙</td>
</tr>
<tr>
<td>💎</td><td>👤</td><td>📱</td><td>⚙</td><td>🗑</td><td>></td>
</tr>
<tr>
<td>↻</td><td>⚠</td><td>📤</td><td>💬</td><td>📋</td><td>🎯</td>
</tr>
<tr>
<td colspan="6">📱</td>
</tr>
</table>

</td>
<td>

**Dark Theme Icons:**

<table>
<tr>
<td>⏱</td><td>←</td><td>⚙</td><td>✕</td><td>☁</td><td>⏰</td>
</tr>
<tr>
<td>📅</td><td>🖼</td><td>🔒</td><td>📊</td><td>📋</td><td>🔔</td>
</tr>
<tr>
<td>🏠</td><td>🔖</td><td>✉</td><td>✏</td><td>🚫</td><td>⚙</td>
</tr>
<tr>
<td>💎</td><td>👤</td><td>$</td><td>⚙</td><td>🗑</td><td>></td>
</tr>
<tr>
<td>↻</td><td>⚠</td><td>📤</td><td>💬</td><td>📋</td><td>🎯</td>
</tr>
<tr>
<td colspan="6">📱</td>
</tr>
</table>

</td>
</tr>
</table>

To see all our icons, visit our icon library.

Page 25
