1271 lines
36 KiB
Markdown
Executable file
1271 lines
36 KiB
Markdown
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:
|
||
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 | <ins>Design assets</ins>
|
||
|
||
We have two image types:
|
||
1. People and places
|
||
2. Objects and products.
|
||
|
||
**People and places** <sup>(1)</sup> opens our audience up to a world of access and opportunity by showing them what's possible with Barclaycard.
|
||
|
||
**Objects and products** <sup>(2)</sup> 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 <ins>Design</ins>
|
||
|
||
We atomise our assets to create everything from a button to a webpage.
|
||
|
||
<table>
|
||
<tr>
|
||
<td>Atoms</td>
|
||
<td>Molecules</td>
|
||
<td>Organisms</td>
|
||
<td>Templates</td>
|
||
<td>Pages</td>
|
||
</tr>
|
||
<tr>
|
||
<td>[Single circle diagram]</td>
|
||
<td>[Three connected circles diagram]</td>
|
||
<td>[Grid of multiple circles diagram]</td>
|
||
<td>[Grid pattern diagram]</td>
|
||
<td>[Complete webpage mockup with "Title goes here" and person image]</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<table>
|
||
<tr>
|
||
<td>Button</td>
|
||
<td>Search bar</td>
|
||
<td>Header navigation</td>
|
||
<td colspan="2">Templates / Pages. If you require any templates or pages please get in touch with the development teams at Barclays.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>[Button label]</td>
|
||
<td>[Search or ask a question...]</td>
|
||
<td>[Personal, navigation icons, Log out]</td>
|
||
<td colspan="2"></td>
|
||
</tr>
|
||
</table>
|
||
|
||
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.
|
||
|
||
<table>
|
||
<tr>
|
||
<td><strong>Cyan</strong><br>Hex:<br>00AEEF<br>RGB:<br>0 174 239</td>
|
||
<td><strong>Light yellow</strong><br>Hex:<br>FFFF98<br>RGB:<br>255 255 152</td>
|
||
<td><strong>Primary blue</strong><br>Hex:<br>1A2142<br>RGB:<br>26 33 66</td>
|
||
<td><strong>Bright blue</strong><br>Hex:<br>001276<br>RGB:<br>0 18 118</td>
|
||
<td><strong>Bright mint</strong><br>Hex:<br>AFFDFD<br>RGB:<br>175 253 253</td>
|
||
<td><strong>Bright purple</strong><br>Hex:<br>5C1E5B<br>RGB:<br>92 30 91</td>
|
||
<td><strong>Black</strong><br>Hex:<br>000000<br>RGB:<br>0 0 0</td>
|
||
<td><strong>Stone</strong><br>Hex:<br>E8E8C9<br>RGB:<br>232 232 201</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td><strong>Bright yellow</strong><br>Hex:<br>FFFF00<br>RGB:<br>255 255 0</td>
|
||
<td><strong>Light teal</strong><br>Hex:<br>007481<br>RGB:<br>0 116 129</td>
|
||
<td><strong>Dark blue</strong><br>Hex:<br>00395D<br>RGB:<br>0 57 93</td>
|
||
<td><strong>Light blue</strong><br>Hex:<br>0076B6<br>RGB:<br>0 118 182</td>
|
||
<td><strong>Dark purple</strong><br>Hex:<br>4C3D6C<br>RGB:<br>76 61 108</td>
|
||
<td><strong>Light purple</strong><br>Hex:<br>E1C0E2<br>RGB:<br>225 192 226</td>
|
||
<td><strong>Light grey</strong><br>Hex:<br>D9D9D9<br>RGB:<br>217 217 217</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td><strong>Orange</strong><br>Hex:<br>FFCB05<br>RGB:<br>255 203 5</td>
|
||
<td><strong>Teal</strong><br>Hex:<br>006666<br>RGB:<br>0 102 102</td>
|
||
<td><strong>Mint</strong><br>Hex:<br>CDF5E8<br>RGB:<br>205 245 232</td>
|
||
<td><strong>Active blue</strong><br>Hex:<br>006DE3<br>RGB:<br>0 109 227</td>
|
||
<td><strong>Light claret</strong><br>Hex:<br>FFC9C9<br>RGB:<br>255 201 201</td>
|
||
<td><strong>Electric violet</strong><br>Hex:<br>7A0FF9<br>RGB:<br>122 15 249</td>
|
||
<td><strong>Dark grey</strong><br>Hex:<br>515151<br>RGB:<br>81 81 81</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td><strong>Lime</strong><br>Hex:<br>C3FB5A<br>RGB:<br>195 251 90</td>
|
||
<td><strong>Dark teal</strong><br>Hex:<br>004750<br>RGB:<br>0 71 80</td>
|
||
<td><strong>Green</strong><br>Hex:<br>3F7E37<br>RGB:<br>63 126 55</td>
|
||
<td><strong>Electric blue</strong><br>Hex:<br>0000FF<br>RGB:<br>0 0 255</td>
|
||
<td><strong>Bright claret</strong><br>Hex:<br>C7237A<br>RGB:<br>199 35 122</td>
|
||
<td><strong>Dark claret</strong><br>Hex:<br>752157<br>RGB:<br>117 33 87</td>
|
||
<td><strong>White</strong><br>Hex:<br>FFFFFF<br>RGB:<br>255 255 255</td>
|
||
</tr>
|
||
</table>
|
||
|
||
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.
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Cyan<br><em>paired with</em><br>Bright blue</th>
|
||
<th>Light yellow<br><em>paired with</em><br>Dark grey</th>
|
||
<th>Primary blue<br><em>paired with</em><br>White</th>
|
||
<th>Bright blue<br><em>paired with</em><br>Bright mint</th>
|
||
<th>Bright mint<br><em>paired with</em><br>Bright blue</th>
|
||
<th>Bright purple<br><em>paired with</em><br>Light purple</th>
|
||
<th>Black<br><em>paired with</em><br>White</th>
|
||
<th>Stone<br><em>paired with</em><br>Dark blue</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>AA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td>Bright yellow<br><em>paired with</em><br>Dark grey</td>
|
||
<td>Light teal<br><em>paired with</em><br>Bright mint</td>
|
||
<td>Dark blue<br><em>paired with</em><br>Light purple</td>
|
||
<td>Light blue<br><em>paired with</em><br>White</td>
|
||
<td>Dark purple<br><em>paired with</em><br>Light purple</td>
|
||
<td>Light purple<br><em>paired with</em><br>Dark claret</td>
|
||
<td>Light grey<br><em>paired with</em><br>Dark grey</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td>Orange<br><em>paired with</em><br>Dark grey</td>
|
||
<td>Teal<br><em>paired with</em><br>Bright mint</td>
|
||
<td>Mint<br><em>paired with</em><br>Bright blue</td>
|
||
<td>Active blue<br><em>paired with</em><br>White</td>
|
||
<td>Light claret<br><em>paired with</em><br>Dark claret</td>
|
||
<td>Electric violet<br><em>paired with</em><br>White</td>
|
||
<td>Dark grey<br><em>paired with</em><br>White</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td>Lime<br><em>paired with</em><br>Dark teal</td>
|
||
<td>Dark teal<br><em>paired with</em><br>Bright mint</td>
|
||
<td>Green<br><em>paired with</em><br>White</td>
|
||
<td>Electric blue<br><em>paired with</em><br>Mint</td>
|
||
<td>Bright claret<br><em>paired with</em><br>White</td>
|
||
<td>Dark claret<br><em>paired with</em><br>Light purple</td>
|
||
<td>White<br><em>paired with</em><br>Black</td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
<td>AA<br>AAA</td>
|
||
<td>AAA<br>AAA</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
Page 11
|
||
|
||
|
||
---
|
||
|
||
|
||
|
||
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact< Previous Next >
|
||
|
||
# Colour
|
||
## Functional palette - light mode
|
||
|
||
Overview <ins>Expression</ins>
|
||
|
||
**Master palette - light**
|
||
|
||
<table>
|
||
<tr>
|
||
<td>Cyan - Brand</td>
|
||
<td>Blue - Interactive</td>
|
||
<td>Black - Interactive 2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Hex: 00AEEF</td>
|
||
<td>Hex: 006DE3</td>
|
||
<td>Hex: 272727</td>
|
||
</tr>
|
||
</table>
|
||
|
||
**Status**
|
||
|
||
<table>
|
||
<tr>
|
||
<td>Blue - Information</td>
|
||
<td>Green - Success</td>
|
||
<td>Amber - Warning</td>
|
||
<td>Red - Error</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Hex: 006DE3</td>
|
||
<td>Hex: 09821F</td>
|
||
<td>Hex: FFBA00</td>
|
||
<td>Hex: E3000F</td>
|
||
</tr>
|
||
</table>
|
||
|
||
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**
|
||
|
||
<table>
|
||
<tr>
|
||
<td>White - Neutral 000</td>
|
||
<td>Grey - Neutral 100</td>
|
||
<td>Grey - Neutral 300</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Hex: FFFFFF</td>
|
||
<td>Hex: F6F6F6</td>
|
||
<td>Hex: E2E2E2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Grey - Neutral 700</td>
|
||
<td>Grey - Neutral 900</td>
|
||
<td>Black - Title</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Hex: 8E8E8E</td>
|
||
<td>Hex: 515151</td>
|
||
<td>Hex: 272727</td>
|
||
</tr>
|
||
</table>
|
||
|
||
**Status tints**
|
||
|
||
<table>
|
||
<tr>
|
||
<td>Blue - Information extra light</td>
|
||
<td>Green - Success extra light</td>
|
||
<td>Amber - Warning extra light</td>
|
||
<td>Red - Error extra light</td>
|
||
<td>Grey - Neutral 900 extra light</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Hex: F2F8FE</td>
|
||
<td>Hex: F4F9F5</td>
|
||
<td>Hex: FFF8E7</td>
|
||
<td>Hex: FDE7E9</td>
|
||
<td>Hex: EEEEEE</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Blue - Information light</td>
|
||
<td>Green - Success light</td>
|
||
<td>Amber - Warning light</td>
|
||
<td>Red - Error light</td>
|
||
<td>Grey - Neutral 900 light</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Hex: E7F0FB</td>
|
||
<td>Hex: E9F4EA</td>
|
||
<td>Hex: FFF8E7</td>
|
||
<td>Hex: FDE7E9</td>
|
||
<td>Hex: EEEEEE</td>
|
||
</tr>
|
||
</table>
|
||
|
||
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.
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th colspan="3">Master palette - dark</th>
|
||
<th colspan="4">Status</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Cyan - Brand<br><br>Hex:<br>00AEEF</td>
|
||
<td>Blue - Interactive<br><br>Hex:<br>3696FC</td>
|
||
<td>White - Interactive 2<br><br>Hex:<br>FFFFFF</td>
|
||
<td>Blue - Information<br><br>Hex:<br>3696FC</td>
|
||
<td>Green - Success<br><br>Hex:<br>32D74B</td>
|
||
<td>Amber - Warning<br><br>Hex:<br>FFC21C</td>
|
||
<td>Red - Error<br><br>Hex:<br>FF5B4B</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th colspan="3">Greyscale</th>
|
||
<th colspan="5">Status tints</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Black - Neutral 000<br><br>Hex:<br>161B2F</td>
|
||
<td>Black - Neutral 100<br><br>Hex:<br>292B3D</td>
|
||
<td>Black - Neutral 300<br><br>Hex:<br>646774</td>
|
||
<td>Blue - Information extra light<br><br>Hex:<br>1C253C</td>
|
||
<td>Green - Success extra light<br><br>Hex:<br>1C2930</td>
|
||
<td>Amber - Warning extra light<br><br>Hex:<br>29282D</td>
|
||
<td>Red - Error extra light<br><br>Hex:<br>281F2E</td>
|
||
<td>Grey - Neutral 900 extra light<br><br>Hex:<br>262939</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Black - Neutral 700<br><br>Hex:<br>979AA3</td>
|
||
<td>Black - Neutral 900<br><br>Hex:<br>CBCCD1</td>
|
||
<td>White - Title<br><br>Hex:<br>FFFFFF</td>
|
||
<td>Blue - Information light<br><br>Hex:<br>192744</td>
|
||
<td>Green - Success light<br><br>Hex:<br>192E32</td>
|
||
<td>Amber - Warning light<br><br>Hex:<br>2D2C2D</td>
|
||
<td>Red - Error light<br><br>Hex:<br>2D1F30</td>
|
||
<td>Grey - Neutral 900 light<br><br>Hex:<br>262C42</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
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 | <ins>Typography</ins> | Grid | Iconography | Components | How it comes together | Governance and contact
|
||
|
||
< Previous | Next >
|
||
|
||
# Typography
|
||
## Type scale
|
||
|
||
Overview | <ins>Expression</ins> | Design principles
|
||
|
||
The type scale includes eight typographic styles. This range is designed to support all the needs of your application and its content.
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Examples</th>
|
||
<th>Font size</th>
|
||
<th>Line height PX (Ratio)</th>
|
||
<th>Letter spacing</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Supersize</td>
|
||
<td>Titles or large ££</td>
|
||
<td>80px</td>
|
||
<td>88px (1.1)</td>
|
||
<td>-24</td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX Large</td>
|
||
<td>Hero title</td>
|
||
<td>48px</td>
|
||
<td>56px (1.166)</td>
|
||
<td>-16</td>
|
||
</tr>
|
||
<tr>
|
||
<td>X Large</td>
|
||
<td>Sub headlines, article titles</td>
|
||
<td>32px</td>
|
||
<td>40px (1.25)</td>
|
||
<td>-12</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Large</td>
|
||
<td>Large copy, quotes</td>
|
||
<td>24px</td>
|
||
<td>32px (1:333)</td>
|
||
<td>-4</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span style="background-color: orange; padding: 2px 4px; font-size: 10px;">8px grid exception</span> Medium</td>
|
||
<td>Sub titles for body copy</td>
|
||
<td>20px</td>
|
||
<td>28px (1.4)</td>
|
||
<td>-4</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Standard</td>
|
||
<td>Body copy, Buttons, Labels</td>
|
||
<td>16px</td>
|
||
<td>24px (1.5)</td>
|
||
<td>0</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span style="background-color: orange; padding: 2px 4px; font-size: 10px;">8px grid exception</span> Small</td>
|
||
<td>Small copy, form descriptions</td>
|
||
<td>14px</td>
|
||
<td>21px (1.5)</td>
|
||
<td>8</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span style="background-color: orange; padding: 2px 4px; font-size: 10px;">8px grid exception</span> X Small</td>
|
||
<td>Footer content</td>
|
||
<td>12px</td>
|
||
<td>18px (1.5)</td>
|
||
<td>12</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
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.
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Other (641+)</th>
|
||
<th>Mobile (0-640)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Supersize</td>
|
||
<td>80 / 88</td>
|
||
<td>48 / 56</td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX Large</td>
|
||
<td>48 / 56</td>
|
||
<td>32 / 40</td>
|
||
</tr>
|
||
<tr>
|
||
<td>X Large</td>
|
||
<td>32 / 40</td>
|
||
<td>24 / 32</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Large</td>
|
||
<td>24 / 32</td>
|
||
<td>20 / 28</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Medium</td>
|
||
<td>20 / 28</td>
|
||
<td>18 / 24</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Standard</td>
|
||
<td>16 / 24</td>
|
||
<td>No change</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Small</td>
|
||
<td>14 / 21</td>
|
||
<td>No change</td>
|
||
</tr>
|
||
<tr>
|
||
<td>X Small</td>
|
||
<td>12 / 18</td>
|
||
<td>No change</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
Page 16
|
||
|
||
|
||
---
|
||
|
||
|
||
|
||
Overview Blueprint Colour Typography Grid Iconography Components How it comes together Governance and contact
|
||
|
||
# Typography
|
||
## Ticker tape
|
||
|
||
Overview Expression <ins>Design principles</ins>
|
||
|
||
Ticker tape is a supporting type style and is used to highlight and elevate key messaging.
|
||
|
||
Always set your leading <sup>(1)</sup> 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 <sup>(2)</sup>. 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° <sup>(4)</sup> to +1.5° <sup>(5)</sup> only. Aim to use different rotations to create spontaneity.
|
||
|
||
Always ensure only the ticker tape rotates, never rotate the type <sup>(6)</sup>.
|
||
|
||
**Visual Examples:**
|
||
|
||
<sup>(1)</sup> Ticker tape typography - Shows proper leading spacing
|
||
|
||
<sup>(2)</sup> K - Demonstrates 20% to 30% clear space measurements
|
||
|
||
<sup>(3)</sup> Key words - Shows 25% clear space implementation with blue background
|
||
|
||
<sup>(4)</sup> Rotate + - Example of positive rotation on blue background
|
||
|
||
<sup>(5)</sup> Rotate - - Example of negative rotation on blue background
|
||
|
||
<sup>(6)</sup> ❌ 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 <ins>Design principles</ins>
|
||
|
||
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**
|
||
|
||
<table>
|
||
<tr>
|
||
<td>✓<br>Ticker tape varies in length and angle.</td>
|
||
<td><strong>This is an example of a three line heading</strong></td>
|
||
</tr>
|
||
<tr>
|
||
<td>✗<br>Ticker tape sits to a straight margin.</td>
|
||
<td><strong>This is an example of a three line heading</strong></td>
|
||
</tr>
|
||
</table>
|
||
|
||
**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.
|
||
|
||
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.
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>(1) Create a 24x24px grid</th>
|
||
<th>(2) Design the icon using a 2px thickness throughout</th>
|
||
<th>(3) Apply a 1px rounded corner to the outside edge of the icon</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>[Grid layout showing 24x24px grid structure]</td>
|
||
<td>[Icon example showing circular download icon with 2px thickness on turquoise background]</td>
|
||
<td>[Icon example showing house icon with rounded corners]</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
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**
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Default – 24px</th>
|
||
<th>Small – 20px (8px grid exception)</th>
|
||
<th>Large – 32px</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>[House icon at 24px size]</td>
|
||
<td>[House icon at 20px size]</td>
|
||
<td>[House icon at 32px size]</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
**States**
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Selected</th>
|
||
<th>Activated</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>[Row of icons showing: filled blue house, outline bell, outline message, outline calendar, outline settings]</td>
|
||
<td>[Two filled blue icons: circular user icon and house icon]</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
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.
|
||
|
||
<table>
|
||
<tr>
|
||
<td>
|
||
|
||
**Light Theme Icons**
|
||
|
||
<table>
|
||
<tr>
|
||
<td>ℹ️</td><td>←</td><td>⚙️</td><td>✕</td><td>☁️</td><td>🕐</td>
|
||
</tr>
|
||
<tr>
|
||
<td>📅</td><td>🖼️</td><td>💰</td><td>📊</td><td>📋</td><td>🔔</td>
|
||
</tr>
|
||
<tr>
|
||
<td>🏠</td><td>🔖</td><td>✉️</td><td>✏️</td><td>🚫</td><td>⚙️</td>
|
||
</tr>
|
||
<tr>
|
||
<td>💎</td><td>👤</td><td>🏁</td><td>⚙️</td><td>🗑️</td><td>▶️</td>
|
||
</tr>
|
||
<tr>
|
||
<td>↻</td><td>⚠️</td><td>📤</td><td>💬</td><td>📄</td><td>👁️</td>
|
||
</tr>
|
||
<tr>
|
||
<td>📱</td><td>ℹ️</td><td>🛒</td><td>☁️</td><td>🧮</td><td>📍</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</td>
|
||
<td>
|
||
|
||
**Dark Theme Icons**
|
||
|
||
<table>
|
||
<tr>
|
||
<td>ℹ️</td><td>←</td><td>⚙️</td><td>✕</td><td>☁️</td><td>🕐</td>
|
||
</tr>
|
||
<tr>
|
||
<td>📅</td><td>🖼️</td><td>💰</td><td>📊</td><td>📋</td><td>🔔</td>
|
||
</tr>
|
||
<tr>
|
||
<td>🏠</td><td>🔖</td><td>✉️</td><td>✏️</td><td>🚫</td><td>⚙️</td>
|
||
</tr>
|
||
<tr>
|
||
<td>💎</td><td>👤</td><td>🏁</td><td>⚙️</td><td>🗑️</td><td>▶️</td>
|
||
</tr>
|
||
<tr>
|
||
<td>↻</td><td>⚠️</td><td>📤</td><td>💬</td><td>📄</td><td>👁️</td>
|
||
</tr>
|
||
<tr>
|
||
<td>📱</td><td>ℹ️</td><td>🛒</td><td>☁️</td><td>🧮</td><td>📍</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
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.
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Light Mode</th>
|
||
<th>Dark Mode</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Link label ></td>
|
||
<td>Link label ></td>
|
||
</tr>
|
||
<tr>
|
||
<td>🔗 Link label | 🔗 Link label</td>
|
||
<td>🔗 Link label | 🔗 Link label</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Button label</td>
|
||
<td>Button label</td>
|
||
</tr>
|
||
<tr>
|
||
<td>⚪ | 🔵</td>
|
||
<td>⚪ | 🔵</td>
|
||
</tr>
|
||
<tr>
|
||
<td>☐ | ☑</td>
|
||
<td>☐ | ☑</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Step 1 of 3<br/>━━━━━━━━━━━━━━━━━━━━</td>
|
||
<td>Step 1 of 3<br/>━━━━━━━━━━━━━━━━━━━━</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
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
|