# 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: 1. Barclaycard logo in white on cyan background 2. 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: 1. People and places 2. 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 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. 1. Use a 24x24px grid as a starting point 2. Design the icon using a 2px thickness throughout 3. 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 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