# 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.
Atoms Molecules Organisms Templates Pages
Button Search bar Header navigation Templates / Pages. If you require any templates or pages please get in touch with the development teams at Barclays.
Button label Search or ask a question... Personal
🔔 👤 🔍 Log out
**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.
Favicon
16-26 px		 Smaller formats
27-49 px		 Normal
50 px+
**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.
**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. **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 **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
**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.
1 Masterbrand sacred asset 2 Interaction colour – light mode 3 Interaction colour – dark mode
Cyan
Hex:
00AEEF 		Blue - Interactive - light mode
Hex:
006DE3 		Blue - Interactive - dark mode
Hex:
3696FC
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.*
Cyan Light yellow Primary blue Bright blue Bright mint Bright purple Black Stone
Hex:
00AEEF

RGB:
0 174 239		 Hex:
FFFF98

RGB:
255 255 152		 Hex:
1A2142

RGB:
26 33 66		 Hex:
001276

RGB:
0 18 118		 Hex:
AFFDFD

RGB:
175 253 253		 Hex:
5C1E5B

RGB:
92 30 91		 Hex:
272727

RGB:
39 39 39		 Hex:
E8E8C9

RGB:
232 232 201
Bright yellow

Hex:
FFFF00

RGB:
255 255 0		 Light teal

Hex:
007481

RGB:
0 116 129		 Dark blue

Hex:
00395D

RGB:
0 57 93		 Light blue

Hex:
0076B6

RGB:
0 118 182		 Dark purple

Hex:
4C3D6C

RGB:
76 61 108		 Light purple

Hex:
E1C0E2

RGB:
225 192 226		 Light grey

Hex:
D9D9D9

RGB:
217 217 217
Orange

Hex:
FFCB05

RGB:
255 203 5		 Teal

Hex:
006666

RGB:
0 102 102		 Mint

Hex:
CDF5E8

RGB:
205 245 232		 Active blue

Hex:
006DE3

RGB:
0 109 227		 Light claret

Hex:
FFC9C9

RGB:
255 201 201		 Electric violet

Hex:
7A0FF9

RGB:
122 15 249		 Dark grey

Hex:
515151

RGB:
81 81 81
Lime

Hex:
C3FB5A

RGB:
195 251 90		 Dark teal

Hex:
004750

RGB:
0 71 80		 Green

Hex:
3F7E37

RGB:
63 126 55		 Electric blue

Hex:
0000FF

RGB:
0 0 255		 Bright claret

Hex:
C7237A

RGB:
199 35 122		 Dark claret

Hex:
752157

RGB:
117 33 87		 White

Hex:
FFFFFF

RGB:
255 255 255
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
Cyan - Brand
Hex:
00AEEF		 Blue - Interactive
Hex:
006DE3		 Black - Interactive 2
Hex:
272727
## Status
Blue - Information
Hex:
006DE3		 Green - Success
Hex:
09821F		 Amber - Warning
Hex:
FFBA00		 Red - Error
Hex:
E3000F
## Grey scale
White - Neutral 000
Hex:
FFFFFF		 Grey - Neutral 100
Hex:
F6F6F6		 Grey - Neutral 300
Hex:
E2E2E2
Grey - Neutral 700
Hex:
8E8E8E		 Grey - Neutral 900
Hex:
515151		 Black - Title
Hex:
272727
## Status tints light
Information light
Hex:
E7F0FB		 Success light
Hex:
E9F4EA		 Warning light
Hex:
FFF8E7		 Error light
Hex:
FDE7E9		 Neutral 900 light
Hex:
EEEEEE
## Status tints extra light
Information extra light
Hex:
F2F8FE		 Success extra light
Hex:
F4F9F5		 Warning extra light
Hex:
FFF8E7		 Error extra light
Hex:
FCF3F3		 Neutral 900 extra light
Hex:
F6F6F6
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
Cyan - Brand Blue - Interactive White - Interactive 2
Hex: 00AEEF Hex: 3696FC Hex: FFFFFF
## Status
Blue - Information Green - Success Amber - Warning Red - Error
Hex: 3696FC Hex: 32D74B Hex: FFC21C Hex: FF5B4B
## Greyscale
Black - Neutral 000 Black - Neutral 100 Black - Neutral 300
Hex: 161B2F Hex: 292B3D Hex: 646774
Black - Neutral 700 Black - Neutral 900 White - Title
Hex: 979AA3 Hex: CBCCD1 Hex: FFFFFF
## Status tints light
Information light Success light Warning light Error light Neutral 900 light
Hex: 192744 Hex: 192E32 Hex: 2D2C2D Hex: 2D1F30 Hex: 262C42
## Status tints extra light
Information extra light Success extra light Warning extra light Error extra light Neutral 900 extra light
Hex: 1C253C Hex: 1C2930 Hex: 29282D Hex: 281F2E Hex: 262939
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.
Light yellow
paired with
Dark grey		 Primary blue
paired with
White		 Bright blue
paired with
Bright mint		 Bright mint
paired with
Bright blue		 Bright purple
paired with
Light purple		 Black
paired with
White		 Stone
paired with
Dark blue
Bright yellow
paired with
Dark grey		 Light teal
paired with
Bright mint		 Dark blue
paired with
Light purple		 Light blue
paired with
White		 Dark purple
paired with
Light purple		 Light purple
paired with
Dark claret		 Light grey
paired with
Dark grey
Orange
paired with
Dark grey		 Teal
paired with
Bright mint		 Mint
paired with
Bright blue		 Active blue
paired with
White		 Light claret
paired with
Dark claret		 Electric violet
paired with
White		 Dark grey
paired with
White
Lime
paired with
Dark teal		 Dark teal
paired with
Bright mint		 Green
paired with
White		 Electric blue
paired with
Mint		 Bright claret
paired with
White		 Dark claret
paired with
Light purple		 White
paired with
Black
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**
Day Value
M +3%
T +2%
W +1%
T +1%
F +2%
S +3%
7 Days 30 Days 90 Days Stone *paired with* Dark blue 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 Type Grids Icons UI motion Components Cards Photography Graphics Next > # Type scale Typography Type scale Responsive type The type scale comprises eight typographic styles. This range is designed to support all the needs of your application and its content.
Name Examples Font size Line height PX (Ratio) Letter spacing
Supersize Titles or large ££ 80 px 88 px (1.1) -24
XX Large Hero title 48 px 56 px (1.166) -16
X Large Sub headlines, article titles 32 px 40 px (1.25) -12
Large Large copy, quotes 24 px 32 px (1:333) -4
8 px grid exception Medium Sub titles for body copy 20 px 28 px (1.4) -4
Standard Body copy, Buttons, Labels 16 px 24 px (1.5) 0
8 px grid exception Small Small copy, form descriptions 14 px 21 px (1.5) 8
8 px grid exception X Small Footer content 12 px 18 px (1.5) 12
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.
Name Other (641+) Mobile (0-640)
Supersize 80 / 88 48 / 56
XX Large 48 / 56 32 / 40
X Large 32 / 40 24 / 32
Large 24 / 32 20 / 28
Medium 20 / 28 18 / 24
Standard 16 / 24 No change
Small 14 / 21 No change
X Small 12 / 18 No change
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
**Light Theme Icons:**
⏱←⚙✕🔄⏰
📅🖼🔒📊📋🔔
🏠🔖✉✏🚫⚙
💎👤📱⚙🗑>
↻⚠📤💬📋🎯
📱
**Dark Theme Icons:**
⏱←⚙✕☁⏰
📅🖼🔒📊📋🔔
🏠🔖✉✏🚫⚙
💎👤$⚙🗑>
↻⚠📤💬📋🎯
📱
To see all our icons, visit our icon library. Page 25