36 KiB
Executable file
Barclaycard digital guidelines
How we come to life in digital
barclaycard
March 2024 | Version 1 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.
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact < Previous Next >
Overview
Introduction
Introduction Expression Design assets
This document is your guide to creating materials within a Barclaycard digital environment.
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 8px baseline grid across everything in this document and our digital applications.
When working with our brand, always consider our design principles:
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. As skilled experts, we're able to present complex information with clarity. Delivering trustworthy, 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 Barclaycard logo, Card Portal and the colour cyan are our sacred assets, unifying and visually connecting our brand across every touchpoint and audience.
We have optimised our sacred assets to perform better in digital environments.
Page 2
Overview | Blueprint | Colour | Typography | Grid | Iconography | Components | How it comes together | Governance and contact
< Previous | Next >
Overview
The Barclaycard visual identity
Introduction | Expression | Design assets
These brand assets provide Barclaycard with the tools to create purposeful and contemporary communications on-screen.
The following guidance shows how to use our assets for digital applications.
The page includes various visual brand elements:
- The Barclaycard logo in blue text
- A collection of colorful brand imagery showing diverse people in various scenarios including business meetings, casual interactions, and lifestyle moments
- Color palette swatches showing the brand color system with blues, greens, yellows, reds, purples, and other colors
- A sample digital interface showing "Hello" text with "Barclays Effra" typography on a blue background
- A sample communication piece with purple background containing text "Remember, the clocks go forwarrrrrrrrd an hour tonight"
- UI iconography samples showing various interface elements like arrows, settings, close buttons, and other digital interface symbols
Page 3
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact Previous Next
Overview
Logo
Introduction Expression Design assets
The Barclaycard logo is a primary brand asset, appearing on everything that we do. And we've optimised it for digital use.
The Open World symbol and Barclaycard wordmark are always used together, except when the Open World is used for:
- Social media profiles
- Favicons
- App icons.
The cyan logo is used against all the colours in our palette and is used in all possible instances.
The Barclaycard logo has been optimised for digital use.
Clear spacing: [Diagram showing the Barclaycard logo with clear spacing guidelines indicated by dotted lines and measurement markers]
Favicon [Small circular favicon showing the Open World symbol]
Logo minimum size: 25px [Small Barclaycard logo showing minimum size implementation]
[Two logo examples shown on colored backgrounds:
- Barclaycard logo in white on cyan background
- Barclaycard logo in white on dark blue background]
Page 4
Overview | Blueprint | Colour | Typography | Grid | Iconography | Components | How it comes together | Governance and contact | ← Previous | Next →
Overview
Types of photography
Overview | Expression | Design assets
We have two image types:
- People and places
- Objects and products.
People and places (1) opens our audience up to a world of access and opportunity by showing them what's possible with Barclaycard.
Objects and products (2) help to simplify complex messages and bring a feeling of humour and fun.
In smaller digital screen sizes, cut-out photography is extremely useful.
Cut out and full bleed photography have the flexibility to use their original settings or adopt a single Barclaycard coloured background. Consider using a contrasting colour from our palette to make your cut-outs pop.
[The right side of the page displays a comprehensive grid of photography examples organized into two main sections labeled (1) and (2), with B2B and B2C categories. The grid shows various lifestyle and product photographs including people in different settings, objects, and Barclaycard-related imagery. The photos demonstrate the two types of photography described in the text - people and places photography showing real-world scenarios and access opportunities, and objects and products photography featuring items like cards, technology, and everyday objects in colorful, engaging compositions.]
Page 5
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contactPrevious Next
Blueprint and Global Digital Expression
Introduction
Overview Expression Design
Blueprint is our global design system, created in collaboration with Group Brand and rooted in our Global Digital Expression (GDE) characteristics.
By having a global design system for Barclaycard and Barclays, we're able to build digital services in a faster, more consistent way, with accessibility and user-insights at the heart.
Like our brand assets, Blueprint and our GDE can be flexed depending on the format, touchpoint or audience.
There are several Blueprint libraries: the main libraries are Foundations, which includes colour, typography and icons and Components, which contains the building blocks that designers need to create digital experiences for Barclaycard.
Wherever possible, Blueprint should be the common design language used in our digital channels across Barclaycard.
Anything created from 2021 should use Blueprint components.
In instances where Blueprint can't be used (e.g. third-party white labelled platforms), digital designs should be rooted in the GDE, to ensure brand consistency.
For access to the Blueprint design system libraries, please email creativecloudmanagement@barclays.com.
Page 6
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact< Previous Next >
Blueprint
Barclays Global Digital Expression (GDE)
Overview Expression Design
Where possible, use Blueprint design system. If not using Blueprint, align to the characteristics of the GDE which are:
- Cyan Card Portal in first touchpoint and main entry points
- Barclaycard logo
- Barclays Effra fonts and accessible type colour and size
- Barclays functional colour 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
- Bold, purposeful, expressive imagery
- Minimalist designs.
Mobile Interface Example:
19:02
barclaycard
Get a £75 voucher to spend at Simply if you get a quote and take out a policy between 30th January and 19th June 2023. Terms and conditions apply
Using your card abroad
Take the trouble out of travel
Page 7
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact < Previous Next >
Blueprint
Atom design
Overview Expression Design
We atomise our assets to create everything from a button to a webpage.
| Atoms | Molecules | Organisms | Templates | Pages |
| [Single circle diagram] | [Three connected circles diagram] | [Grid of multiple circles diagram] | [Grid pattern diagram] | [Complete webpage mockup with "Title goes here" and person image] |
| 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, navigation icons, Log out] | ||
Page 8
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact < Previous Next >
Colour
Blue - Interactive
Overview Expression
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
Cyan is one of our sacred assets and it should be used where possible with our brand elements, such as our logo, Open World and the Card Portal.
Blue - Interactive is our primary functional colour, which is more accessible than cyan in digital environments. It's used to highlight interactive elements such as buttons or links.
It has been carefully chosen to meet accessibility colour contrast requirements with our background colours in both light and dark modes.
[Mobile interface examples showing three phone screens demonstrating the different color modes in Barclays mobile applications, with numbered annotations 1, 2, and 3 corresponding to the color swatches above. The screens show various interface elements including "Hi Emilie" greeting, account balances, navigation buttons for Home, Discover, and Payment, and options like "Save & invest".]
Page 9
Overview | Blueprint | Colour | Typography | Grid | Iconography | Components | How it comes together | Governance and contact | < Previous | Next >
Colour
Masterbrand palette
Overview | Expression
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.
| Cyan Hex: 00AEEF RGB: 0 174 239 |
Light yellow Hex: FFFF98 RGB: 255 255 152 |
Primary blue Hex: 1A2142 RGB: 26 33 66 |
Bright blue Hex: 001276 RGB: 0 18 118 |
Bright mint Hex: AFFDFD RGB: 175 253 253 |
Bright purple Hex: 5C1E5B RGB: 92 30 91 |
Black Hex: 000000 RGB: 0 0 0 |
Stone 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 |
Page 10
Overview | Blueprint | Colour | Typography | Grid | Iconography | Components | How it comes together | Governance and contact
< Previous | Next >
Colour Pairings
Overview | Expression
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.
| Cyan paired with Bright blue |
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 |
|---|---|---|---|---|---|---|---|
| AA AAA |
AAA AAA |
AA AAA |
AAA AAA |
AAA AAA |
AAA AAA |
AAA AAA |
AAA AAA |
| 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 |
|
| AAA AAA |
AA AAA |
AAA AAA |
AA AAA |
AA AAA |
AA AAA |
AA AAA |
|
| 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 |
|
| AA AAA |
AA AAA |
AAA AAA |
AA AAA |
AA AAA |
AA AAA |
AAA AAA |
|
| 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 |
|
| AAA AAA |
AA AAA |
AA AAA |
AAA AAA |
AAA AAA |
AA AAA |
AAA AAA |
Page 11
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact< Previous Next >
Colour
Functional palette - light mode
Overview Expression
Master palette - light
| Cyan - Brand | Blue - Interactive | Black - Interactive 2 |
| Hex: 00AEEF | Hex: 006DE3 | Hex: 272727 |
Status
| Blue - Information | Green - Success | Amber - Warning | Red - Error |
| Hex: 006DE3 | Hex: 09821F | Hex: FFBA00 | Hex: E3000F |
Blue - Interactive is used for all interactive elements such as buttons or links. It should be used purposefully and not overused.
Blue - Information has the same hex value as Blue - Interactive but has a different label due to its function as a status colour.
Supplementing our colour palette, we have a set of colours used within digital communications to signify a particular action or perform specific functions:
- Our greyscale is designed for layering sections and components within a screen, to create a sense of depth without distracting from the key messages
- Status colours and tints are used in form fields, alerts and notifications to indicate new information, errors, warnings, or successes
- Amber, Red and Grey status tints have the same hex value for both light and extra light variations.
Greyscale
| White - Neutral 000 | Grey - Neutral 100 | Grey - Neutral 300 |
| Hex: FFFFFF | Hex: F6F6F6 | Hex: E2E2E2 |
| Grey - Neutral 700 | Grey - Neutral 900 | Black - Title |
| Hex: 8E8E8E | Hex: 515151 | Hex: 272727 |
Status tints
| Blue - Information extra light | Green - Success extra light | Amber - Warning extra light | Red - Error extra light | Grey - Neutral 900 extra light |
| Hex: F2F8FE | Hex: F4F9F5 | Hex: FFF8E7 | Hex: FDE7E9 | Hex: EEEEEE |
| Blue - Information light | Green - Success light | Amber - Warning light | Red - Error light | Grey - Neutral 900 light |
| Hex: E7F0FB | Hex: E9F4EA | Hex: FFF8E7 | Hex: FDE7E9 | Hex: EEEEEE |
To align with Blueprint, our Functional palette naming is updated to include Blueprint colour labels.
Page 12
Overview | Blueprint | Colour | Typography | Grid | Iconography | Components | How it comes together | Governance and contact
< Previous | Next >
Colour
Functional palette - dark mode
Overview | Expression
Our dark mode is designed with all digital experiences in mind: app, website and logged-in journeys.
| Master palette - dark | Status | |||||
|---|---|---|---|---|---|---|
| Cyan - Brand Hex: 00AEEF |
Blue - Interactive Hex: 3696FC |
White - Interactive 2 Hex: FFFFFF |
Blue - Information Hex: 3696FC |
Green - Success Hex: 32D74B |
Amber - Warning Hex: FFC21C |
Red - Error Hex: FF5B4B |
| Greyscale | Status tints | ||||||
|---|---|---|---|---|---|---|---|
| Black - Neutral 000 Hex: 161B2F |
Black - Neutral 100 Hex: 292B3D |
Black - Neutral 300 Hex: 646774 |
Blue - Information extra light Hex: 1C253C |
Green - Success extra light Hex: 1C2930 |
Amber - Warning extra light Hex: 29282D |
Red - Error extra light Hex: 281F2E |
Grey - Neutral 900 extra light Hex: 262939 |
| Black - Neutral 700 Hex: 979AA3 |
Black - Neutral 900 Hex: CBCCD1 |
White - Title Hex: FFFFFF |
Blue - Information light Hex: 192744 |
Green - Success light Hex: 192E32 |
Amber - Warning light Hex: 2D2C2D |
Red - Error light Hex: 2D1F30 |
Grey - Neutral 900 light Hex: 262C42 |
Page 13
Overview | Blueprint | Colour | Typography | Grid | Iconography | Components | How it comes together | Governance and contact
< Previous | Next >
Typography Overview
Overview | Expression | Design principles
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
System font
Arial / Arial bold
Arial is the system font and should be used where Barclays Effra is not available.
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.
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.
Page 14
Overview | Blueprint | Colour | Typography | Grid | Iconography | Components | How it comes together | Governance and contact
< Previous | Next >
Typography
Type scale
Overview | Expression | Design principles
The type scale includes 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 ££ | 80px | 88px (1.1) | -24 |
| XX Large | Hero title | 48px | 56px (1.166) | -16 |
| X Large | Sub headlines, article titles | 32px | 40px (1.25) | -12 |
| Large | Large copy, quotes | 24px | 32px (1:333) | -4 |
| 8px grid exception Medium | Sub titles for body copy | 20px | 28px (1.4) | -4 |
| Standard | Body copy, Buttons, Labels | 16px | 24px (1.5) | 0 |
| 8px grid exception Small | Small copy, form descriptions | 14px | 21px (1.5) | 8 |
| 8px grid exception X Small | Footer content | 12px | 18px (1.5) | 12 |
Page 15
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact
< Previous Next >
Typography
Responsive type
Overview Expression Design principles
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 |
Page 16
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact
Typography
Ticker tape
Overview Expression Design principles
Ticker tape is a supporting type style and is used to highlight and elevate key messaging.
Always set your leading (1) by multiplying the type size by 0.95. For example, 12pt x 0.95 = 11.4 leading size.
The cap height defines the ticker tape clear space (2). Use 25% of the cap height for the clear space above and below the text. Use between 20% to 30% of the cap height for the clear space left and right of the text.
Ticker tape can be rotated from -1.5° (4) to +1.5° (5) only. Aim to use different rotations to create spontaneity.
Always ensure only the ticker tape rotates, never rotate the type (6).
Visual Examples:
(1) Ticker tape typography - Shows proper leading spacing
(2) K - Demonstrates 20% to 30% clear space measurements
(3) Key words - Shows 25% clear space implementation with blue background
(4) Rotate + - Example of positive rotation on blue background
(5) Rotate - - Example of negative rotation on blue background
(6) ❌ Don't rotate type - Shows incorrect rotation with red X indicator
← Previous Next →
Page 17
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact< Previous Next >
Typography
Ticker tape
Overview Expression Design principles
Ticker tape must always be accessible, considered and never overused.
Aim to only use it once per communication or spread it out to support an energising statement or headline.
Cyan is our primary colour for ticker tape, paired with Bright blue copy
Highlight a key word
Up to three lines of ticker tape for a headline
If text is longer than three lines, highlight up to four words
| ✓ Ticker tape varies in length and angle. |
This is an example of a three line heading |
| ✗ Ticker tape sits to a straight margin. |
This is an example of a three line heading |
Don't use multiple sizes for ticker tape headlines
Page 18
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact< Previous Next >
Grid
Desktop
Overview
The Barclaycard 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 8px baseline grid. Where this isn't appropriate or practical this has been highlighted as an exception.
Desktop 1440px Columns: x12 Margin: 24px Gutters: 24px
The grid system shows 12 columns with 24px gutters between each column. The layout demonstrates equal-width columns with consistent spacing, providing a structured framework for responsive design across the 1440px desktop viewport.
Page 19
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact <page_header> Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact ◀ Previous Next ▶
Grid
Tablet
Overview
The Barclaycard 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 8px baseline grid. Where this isn't appropriate or practical this has been highlighted as an exception.
Tablet 763px Columns: x12 Margin: 24px Gutters: 24px
Page 20
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact < Previous Next >
Grid
Mobile
Overview
The Barclaycard 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 8px baseline grid. Where this isn't appropriate or practical this has been highlighted as an exception.
The mobile grid layout shows a 375px wide mobile viewport with 6 columns, 24px margins on each side, and 16px gutters between columns. The diagram illustrates the spacing measurements with annotations showing 24px margins and 16px gutters throughout the grid structure.
Mobile 375px Columns: x6 Margin: 24px Gutters 16px
Page 21
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact < Previous Next >
Iconography
Functional iconography
Overview Expression
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.
-
Use a 24x24px grid as a starting point
-
Design the icon using a 2px thickness throughout
-
Apply a 1px rounded corner to the outside edge of the icon.
| (1) Create a 24x24px grid | (2) Design the icon using a 2px thickness throughout | (3) Apply a 1px rounded corner to the outside edge of the icon |
|---|---|---|
| [Grid layout showing 24x24px grid structure] | [Icon example showing circular download icon with 2px thickness on turquoise background] | [Icon example showing house icon with rounded corners] |
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 – 24px | Small – 20px (8px grid exception) | Large – 32px |
|---|---|---|
| [House icon at 24px size] | [House icon at 20px size] | [House icon at 32px size] |
States
| Selected | Activated |
|---|---|
| [Row of icons showing: filled blue house, outline bell, outline message, outline calendar, outline settings] | [Two filled blue icons: circular user icon and house icon] |
Any new items require Big Ticket approval.
Page 22
Overview | Blueprint | Colour | Typography | Grid | Iconography | Components | How it comes together | Governance and contact
< Previous | Next >
Iconography
Functional iconography
Overview | Expression
To see all our icons, visit our icon library.
|
Light Theme Icons
|
Dark Theme Icons
|
Page 23
Overview | Blueprint | Colour | Typography | Grid | Iconography | Components | How it comes together | Governance and contact
< Previous | Next >
Components Overview
Overview | Design assets
Blueprint design system features their Component library, filled with many components to use as building blocks to create your digital designs.
The majority of components are shared across both Barclaycard and Barclays, however the Card Portal hero and Ticker tape are specific to Barclaycard.
You can find all components in Blueprint design system libraries. To request access, please email creativecloudmanagement@barclays.com.
| Light Mode | Dark Mode |
|---|---|
| Link label > | Link label > |
| 🔗 Link label | 🔗 Link label | 🔗 Link label | 🔗 Link label |
| Button label | Button label |
| ⚪ | 🔵 | ⚪ | 🔵 |
| ☐ | ☑ | ☐ | ☑ |
| Step 1 of 3 ━━━━━━━━━━━━━━━━━━━━ |
Step 1 of 3 ━━━━━━━━━━━━━━━━━━━━ |
Page 24
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact
<page_header> Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact Previous Next
Components
Card Portal
Overview Design assets
The Card Portal is a highly flexible sacred asset that creates consistency by revealing opportunities to our audiences. Cyan is always the Card Portal colour and any Barclaycard colour can be partnered with it. In web, the Card Portal is positioned in the Hero banner.
In digital web components, the Card Portal will always sit in front of the other assets.
Its flexibility enables it to adapt to any digital, print and physical format. It can be brought to life imaginatively to create memorable Barclaycard experiences.
[Visual example 1: Two teal Barclaycard Visa credit cards displayed at an angle on a purple background, enclosed within a cyan rounded rectangle border]
[Visual example 2: The word "LATE" repeated multiple times in large white text on a teal background, enclosed within a cyan rounded rectangle border]
[Visual example 3: A web banner component on a blue background showing a smiling person in a red shirt on the right side, with content on the left including "Title goes here" as a heading, "Optional subtitle goes here" as a subheading, descriptive text reading "Additional description text can go here if you need lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt." and two buttons labeled "Button label". The entire component is enclosed within a cyan rounded rectangle border]
Page 25