39 KiB
Executable file
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
<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 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