Digital Guidelines vs. 1.60

Danske Bank Chapter 01 1
Digital design system Introduction
Danske Bank
Digital Design System
Version 2.00
Danske Bank 2
Digital design system
Document navigation
This document provides an overall introduction to Danske Bank’s digital identity. It contains
guidance on individual design elements, as well as design examples to showcase correct usage.
The document also features simple navigation tools to help you find and access exactly what you
need. Use this navigation to find additional information, to jump to a specific section, to access
workable design elements, or to directly download fully functional template documents. Look for
these icons throughout the following chapters.
Download icon This symbol tells you that final files are
accessible and ready for you to download.
Referral icon This symbol tells you that additional relevant information
is to be found elsewhere in the document. Click the link to
access the relevant page.
Attention icon This symbol informs you that there are important
details that require your close attention.
Incorrect icon This symbol indicates that a design is incorrect, and is used
on examples throughout this document.
Danske Bank 3
Table of contents
Chapter01- Introduction
01.0
Chapter02 - Styleguide
02.0
Chapter03 - Design patterns

03.0
z

Chapter 01 Introduction
Our customer promise

01.01
Our communication platform

01.02
Our communication principles

01.03
Our tonality
01.04
Four main principles for our design

01.05
01.01 Our customer promise

Danske Bank is a Nordic bank, unified across borders and market areas by a determination
to put our customers first and focus on the value we can help create in our customers’ lives
and businesses.
No matter what our customers expect of their future, and what it has in store for them,
they need to be able to act in order to stay on top of their situation. And finances will always
play a vital part of this process.
Our promise to our customers:
We help customers be financially confident and achieve their ambiti-

ons by making daily banking and important financial decisions easy
01.01 Our communication platform

Danske Bank is a bank for everybody, and everybody should feel invited and welcomed by us.
Our customers may have different wants, but they all need a bank that will help, support and guide
them in their goals and ambitions.
We want our customers to be able to handle any situation and to seize any opportunity.
Our goal is that our customers reach theirs.
Our communications must always emerge from an insight that is relevant for our
customers and built around three key messages:
We provide state-of-the-art-tools that make banking easy and effortless

We help and guide with proactive specialist advice
We support our customers in their goals and ambitions
01.01 Our communication principles

Our communication must always be inviting and welcoming. We have to make sure that people
across the Nordics feel at home and comfortable enough to share their goals and ambitions with
us.
Also, we must focus on how we help our customers reach their goals and ambitions. Our ability
and commitment to help and empower our customers must shine through in our communication.
Seven communication principles help us maintain this focus:
We have a truly customer centric approach: Build on customer needs
We have a helpful and friendly attitude: Welcome everybody - never exclude
We are genuinely interested: Demonstrate understanding and engagement

We provide direction and relevant expert advice: Proactive guidance easy to act on
We are a Nordic bank with an international network: Ensure target group identification
and adapt to local environment and market situation
We always meet the customer where they are: Use each media/touch point according
to its capabilities
We create meaningful interactions: Ensure coherence between product benefits

and customer needs
01.01 Our tonality - a clear voice

In our communication across all touch points we want to be perceived as a less corporate
and more human bank. Less rational and more emotional. Less focused on numbers and more
focused on customer benefits.
Our tone of voice is genuinely human and inclusive, and we want to show a real
and honest outlook on both life and business.
Danske Bank is a bank for everybody. We speak the language of the people we are talking to.
And since we are not always communicating to everyone at the same time, we will use different
wordings depending on context, audience and situation.
We will never be superior, but we won’t dumb things down. We believe it’s best to avoid clichés,
and instead be concrete and speak frankly about facts, and honestly about opinions.
In other words, our tonality is:
Understanding and warm

Honest and real
Proactive and guiding
For more information and example of our tonality please refer to the Corporate Visual Identity
Design Guidelines.
01.01 Four main principles for our design

There are four main principles that exist in our brand guidelines that must be conveyed to prospe-
ctive as well as existing customers.
We are human and warm

to anchor our brand in emotions and to foster real relationships
We are approachable and authentic

to connect with real stories and real people
We are simple, modern and clean

to ensure relevance and function for the future
We are responsive and in motion

to engage and empower users across all digital touch points
Danske Bank Chapter 02
01 10
Styleguide
Chapter 02 Styleguide
This chapter contains all the storytelling necessary to onboard new stakeholders to the brand,
and brand elements. Ideally, after reading this chapter, people should be able to access the
styleguide and download the assets needed to design.
Intro Layout
02.01 02.06
Colours Cards
02.02 02.07
Pre & post login

Typography 02.08
02.03
Interaction
Imagery 02.09
02.04
Motion
02.10
Iconography
02.05
Digital design system Styleguide
02.01 Intro
- Design principles
02.01 Design principles

When we build products for our customers, or marketing material for our prospects, we must
ensure the experience we create is relevant and welcoming.
These principles have been distilled from many customer interviews and observations
within our industry and define how we approach the products we develop digitally.
These principles are applicable to both the pre and post login state.
Simplicty in all tasks
Priority and urgencty
Supporting active and passive use
Personalisation with minimum effort
Trust and security
Alignment of apps
Unique character
02.02 Colours
- Primary, secondary and greyscale

- Colour codes
- Colour hierarchy
- Action colour usage
- Examples
02.02 Primary, secondary and greyscale

The colour palette is aligned with the offline material in order to ensure consistency between
channels. A system of subtle gradients help differentiate the buttons from the background. Cyan
is the key action colour used to highlight primary interactions with Danske Bank.
Primary colours
Primary colours are an essential part of each digital
component. Always ensure that the overall visual iden-
tity of your product uses these three colours.
Secondary colours
Secondary colours are used to complete the structure
defined by the primary colours. We use them spa-
ringly to highlight content, add interest, and differenti-
ate objects like cards/tools.
Greyscale
Variations of grey #3A4344 are used for text colour.
We recommend a selection of other greys to build
cards/tools. See the example in the following chapter.
Background colours
On most of our pages, we also use an ’off-white’ backg-
round colour with a subtle blue tone.
Action colour
’Action Cyan’ has been added to the existing colour
palette. We recommend using it on a Danske Bank
dark blue/white background. More infor about Action
colour usage here
02.02 Colour codes
Primary colours
#003755 #406980 #7F9BAA #BFCDD4 #E5EBEE
#D7E9F1 #E0EEF5 #E7F1F7 #F0F7FA #F7FAFC
Action colour: #009FDA Background: #FBFDFE White: #FFFFFF
Secondary colours
#6DBACE #E65A6D #74489D #09B89D #FBB273 #FFE17F
#8BC5D7 #EB7C83 #8865AC #5EC3AE #FCC18B #FFE698
#A8D2E0 #EF9A9C #9F84BD #8AD0BF #FDCFA5 #FFECB0
#C3E0EB #F4BAB8 #BAA7D1 #B2DFD3 #FEDDBF #FFF3CA
#E0EEF4 #F9DAD8 #D9D0E7 #D6EDE7 #FEEEDC #FFF9E2
#EFF6F9 #FCECEA #EBE6F2 #EAF6F3 #FEF6ED #FFFBF0
Greyscale
#3A4344 #7B8185 #C7CECB #E7E3DD #C7C4B7
#5E676A #7B8185 #D2D7D5 #EBE8E4 #D2CFC5
#7F898B #ABAFB2 #DBE0DE #F0EEEA #DDDAD2
#A6ADB0 #C5C8CB #E8EBEA #F6F4F2 #E7E5E0
#D0D4D6 #E0E2E3 #F3F5F4 #FAFAF8 #F3F2F0
#E6E8E9 #EFF0F1 #F9FAFA #FCFBFB #F8F8F6

02.02 Colour Hierarchy
Primary colours
Secondary colours
Greyscale
02.02 Action colour usage
Primary colour combinations - Dark Blue (A) White / Background (B)

examples
*Cyan usage
For (a) and (b) cases, we use
cyan as a primary action colour.
Given the complexity of some
projects, it might be necessary
to have two primary action
colours coexisting; only in that
case do we recommend using
white and dark blue respec-
tively for dark blue and white
backgrounds. See the example
on this page.
02.02 Action colour usage
Primary colour combinations - Dark Blue background, cyan as a primary Light Blue background, cyan as a primary White background, cyan as a primary
examples action, dark blue as a secondary. Text is action, light blue as a secondary. Text is action, off white as a secondary. Text is
uniformly white. uniformly dark blue. uniformly dark blue.
02.02 Colours - Action colour usage
Primary colour combinations -

desktop examples
02.02 Colours - Action colour usage
Double primary action colour - example Correct: Incorrect:

In this example, the contextual menu owns the The primary action is white when the dot The primary action is the same colour as
cyan colour, therefore another colour is used to is visible. the dot.
highlight the primary action.
02.03 Typography
- Introduction
- Featured digital fonts
- Native system fonts
- Font sizes
- Examples
Danske Bank Manual version 1.00 Back to table of contents 00
CVI Design Guidelines The design elements
02.03 Typography - Introduction
AgK
2.04 Our typography – A clear distinction
Our Danske typography is a family of fonts designed exclusively for the Danske Bank Group. Due to
the
Ourdigital
Danskerelationship
typographybetween theofnew
is a family typeface
fonts ”Danske
designed Human”,
exclusively and
for the the existing
Danske fonts, Danske
Bank Group. We use these
Text was chosen
typographies towritten
in all providecommunications.
an optimal digitalByreading experience
using the right fontacross all screen
variations sizes. legibility while
we optimize
also establishing recognition and a consistent expression throughout our communication and design.
Expressive
Human
123:; /©™ Informative

confident
02.03 Featured digital fonts

Use as few fonts as possible in order to ensure that loading performance is
light and efficient. We selected three main fonts to deploy across digital products.
Access the font package on
our CVI site repository
Danske Human Medium Italic AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789*#@+<=

>’”÷±%‰⁄&£$€ƒ¥¢ß,.:;“”‘’«»‹›·‚„!?¿¡(/)[\]{|}®©ÄÅÂÁÃÀÆÇÉÊËÈÍÎÏÌÑØÓÔÒÖÕÜÚÛÙŸáà
âäãåæçéèêëíìîïñøóòôöõúùûüÿ†‡§¬•¶ı°`~^ˆ-–—_
Danske Text V2 Regular

Please replace Danske Text Regular with this new version
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789*#@+
<=>’”÷±%‰⁄&£$€ƒ¥¢ß,.:;“”‘’«»‹›·‚„!?¿¡(/)[\]{|}®©ÄÅÂÁÃÀÆÇÉÊËÈÍÎÏÌÑØÓÔÒÖÕÜÚÛ
ÙŸáàâäãåæçéèêëíìîïñøóòôöõúùûüÿ†‡§¬•¶ı°`~^ˆ-–—_
Danske Text V2 Semibold

Please replace Danske Text Bold with this new version
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789*#@
+<=>’”÷±%‰⁄&£$€ƒ¥¢ß,.:;“”‘’«»‹›·‚„!?¿¡(/)[\]{|}®©ÄÅÂÁÃÀÆÇÉÊËÈÍÎÏÌÑØÓÔÒÖÕÜ
ÚÛÙŸáàâäãåæçéèêëíìîïñøóòôöõúùûüÿ†‡§¬•¶ı°`~^ˆ-–—_
Danske Text V2 Italic AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789*#@+

<=>’”÷±%‰⁄&£$€ƒ¥¢ß,.:;“”‘’«»‹›·‚„!?¿¡(/)[\]{|}®©ÄÅÂÁÃÀÆÇÉÊËÈÍÎÏÌÑØÓÔÒÖÕÜÚÛ
ÙŸáàâäãåæçéèêëíìîïñøóòôöõúùûüÿ†‡§¬•¶ı°`~^ˆ-–—_
Danske Narrow Semibold - Only numbers

1234567890
02.03 Native system fonts

Due to technology limitations, we recommend switching to native system fonts if the
official fonts cannot be displayed.
Georgia Italic for Danske Human AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456

789*#@+<=>’”÷±%‰⁄&£$€ƒ¥¢ß,.:;“”‘’«»‹›·‚„!?¿¡(/)[\]{|}®©ÄÅÂÁÃÀÆÇÉÊË
ÈÍÎÏÌÑØÓÔÒÖÕÜÚÛÙŸáàâäãåæçéèêëíìîïñøóòôöõúùûüÿ†‡§¬•¶ı°`~^ˆ-–—_
Verdana Regular for Danske Text v2 Regular AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789

*#@+<=>’”÷±%‰⁄&£$€ƒ¥¢ß,.:;“”‘’«»‹›·‚„!?¿¡(/)[\]{|}®©ÄÅÂÁÃÀÆÇÉÊË
02.03 Native system fonts

Due to technology limitations, we recommend switching to native system fonts if the
official fonts cannot be displayed.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456
Roboto for Android
789*#@+<=>’”÷±%‰⁄&£$€ƒ¥¢ß,.:;“”‘’«»‹›·‚„!?¿¡(/)[\]{|}®©ÄÅÂÁÃÀÆÇÉÊËÈÍÎÏÌÑ
ØÓÔÒÖÕÜÚÛÙŸáàâäãåæçéèêëíìîïñøóòôöõúùûüÿ†‡§¬•¶ı°`~^ˆ-–—_
San Francisco for iOS

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456
789*#@+<=>’”÷±%‰⁄&£$€ƒ¥¢ß,.:;“”‘’«»‹›·‚„!?¿¡(/)[\]{|}®©ÄÅÂÁÃÀÆÇÉÊË
Segoe for Windows Phone AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz012345678

9*#@+<=>’”÷±%‰⁄&£$€ƒ¥¢ß,.:;“”‘’«»‹›·‚„!?¿¡(/)[\]{|}®©ÄÅÂÁÃÀÆÇÉÊËÈÍÎÏÌ
ÑØÓÔÒÖÕÜÚÛÙŸáàâäãåæçéèêëíìîïñøóòôöõúùûüÿ†‡§¬•¶ı°`~^ˆ-–—_
02.03 Font sizes
Headlines
44px Danske Human Medium Italic
Leading 44px
36px Danske Human Medium Italic

Leading 36px
36px Danske Text v2 Regular / Semibold

Leading 36px
Subheaders 24px Danske Text v2 Regular / Semibold / Italic

Leading 33.6px
22px Danske Text v2 Regular / Semibold / Italic

Leading 30.8px
Minimum for reading experience 20px Danske Text v2 Regular / Semibold / Italic
Leading 28px

Leading 25.2px

Leading 22.4px

Minimum for reading experience on Leading 19.6px
applications
Leading 16.8px

Leading 14px
02.03 Fonts - Numbers
132px 1234567890
Danske Narrow Semibold
88px 1234567890
66px 1234567890
Danske Narrow Semibold
36px 1234567890
24px 1234567890
22px 1234567890
20px 1234567890
14px 1234567890
02.04 Photo style
- Introduction
- Our principles
- The ingredients
- Guidance
- Four categories
- Colour grading photos, the process
- Colour grading examples
- Tech specs.
- Cropping
02.04 Photo style - Introduction

Our photo style is an essential part of our new visual identity. We use images to tell our stories,
and to ensure that our expression is inviting, warm and human. This imagery helps establish a na-
tural bond between real people and honest moments. Our images should showcase how Danske
Bank interacts with real people, from customers, and partners, to employees.
02.04 Photo style - Our principles

When building and executing photos in our new visual identity, it is important that our approach
to taking and selecting photos is consistent across designs and elements. Please refer to the
following list of photo principles that capture the thinking behind new photo stories.
Our customers across markets and seg-

1 Real people ments are all real people, and so are we.
We are honest, trustworthy and never

2 Always authentic manipulate facts, figures or photos.
Our customers are dynamic and modern,

3 Dynamic and modern which is the nature of our business.
We follow our customers through thick and

4 Frozen moments of life thin, and we show real dreams and ob-
stacles when they happen.
We see life as it is, we observe, engage and

5 Perspective on life interact - but never force, or intrude.
Access the photo library
in our CVI site repository.
02.04 Photo style - The ingredients

When creating photo material for our brand communications it is important that we have a
common understanding of what elements our photos must contain. A simple recipe helps define
the ingredients in our new photos.
1 Gender Male and female across segments and customer groups
2 Age From the very young to the very old (but young at heart).
3 Social diversity Across social groups, cultures and modern families and
businesses.
4 Ethnicity Reflects our modern multicultural and global society.
Showcase all our markets with regional seasons, characters,

5 Environments people and business units.
Our products and services in bank settings and in the lives of

6 Products people (abstract and concrete).
02.04 Photo style - Guidance
Photo style guidance

Imagery plays a major part in communicating our
brand stories. Our photos must always be honest
and authentic. We want people to look natural,
relaxed, and not ‘posed’. When possible, the main
character/s should face the camera in a natural
manner.
Please note these are just a few

examples of available images. To
access and download the original
formats, please contact Creative
Execution

02.04 Photo style - Four categories
Real people and real lives

Our imagery always depicts authentic people
in real life situations, where our services and
products have a role to play, in obvious or abstract
terms. When shooting photos, we always follow
the story throughout the course of a day, without
the use of lighting, makeup, or any staging. Our
photo stories showcase honest frozen moments of
life when, where, and how they appear to us.
Products in the real world

In contrast to our people imagery, our product ima-
gery showcases the object rather than the person.
We always show products in subtle and natural
settings that are realistic and authentic, and we
always use a credible real-life context.

02.04 Photo style - Four categories
Professionals are people too

Professionals are always shown in real work
situations, where Danske Bank plays an important
role in their working lives. Just like our people
imagery, images of people in working situations
have a personality and clarity that is both engaging
and interesting.
Real life environments

As with all our imagery, the environments we
photograph must capture real life settings and
places. They must have a strong visual character,
and document the surroundings and societies that
Danske Bank, it’s stakeholders, and customers
inhabit.

Danske
DanskeBank
Bank Chapter
Manual 02
version 1.00 Back to table of contents 35
00
Digital design
CVI Design system
Guidelines Styleguide
The design elements
2.05.11
02.04 Our photo
Photo style style – Colour
- Colour grading
grading photos,photos, the process
the process
Wehave
We have devised
devised aa simple
simple 4 4 step
step process
process to
to align
align our
our approach
approach to to treating
treating photos.
photos. All
All photos
photos are
are originally
very different
originally veryin contrast,
different in colours,
contrast,and details,
colours, andwhich means
details, it ismeans
which not possible
it is nottopossible
create anto automatic
create recipe for
post
an processing
automatic images.
recipe We processing
for post therefore rely on youWe
images. andtherefore
photo treatment specialists
rely on you and photototreatment
always evaluate and
adjust eachtophoto
specialists alwaysindividually
evaluate to create
and the
adjust right
each look individually
photo and feel. to create the right look and feel.
Step 01 - Processing the raw photo

Processing the raw file is a very important step,
since this is where the overall contrast, image Step 01 - Processing the raw photo Step 02 - Setting shadows and highlights
brightness, and shadow
Step 01 - Processing the/ highlights
raw photodetails can
actually be established.
Processing Asa avery
the raw file is standard rule,step,
important we since
recommend
this is wherealways usingcontrast,
the overall Adobe Photoshop or
image brightness,
Capture One /for
and shadow processing
highlights all raw
details canfiles.
actually be
established. As a standard rule, we recommend
always using Adobe Photoshop or Capture One for
processing all raw files.
Step
Step02 02--Setting
Setting shadows
shadows and highlights
ItItis
isimportant
importantto toset
set the
the shadow
shadow // highlight
highlight points,
asaswell
wellasasthe
the overall
overall contrast,
contrast, so
so that
that the photo retains
retains its details
its details in both in bothAlso
areas. areas. Also ensure
ensure that thethat
basic grey
the basic(color
balance grey balance (color of
temperature) temperature)
the photo is of the
always
photo is always
corrected, corrected,
so the image is so the image
neither is neither
too cool nor too warm.
too cool nor too warm.

Access
in our CVIa moodboard sheet
site repository.
in our cvi site repository.
Danske
DanskeBank
Bank Chapter
Manual 02
00
Digital design
CVI Design system
The design elements
2.05.12
02.04 Our photo
- Colour grading
grading photos,photos, the process
the process
Wehave
We have devised
devised aa simple
simple 4 4 step
step process
process to
to align
align our
our approach
approach to to treating
treating photos.
photos. All
All photos
photos are
are originally
very different
originally veryin contrast,
different in colours,
contrast,and details,
colours, andwhich means
details, it ismeans
which not possible
it is nottopossible
create anto automatic
create recipe for
post
an processing
automatic images.
recipe We processing
for post therefore rely on youWe
images. andtherefore
photo treatment specialists
rely on you and photototreatment
always evaluate and
adjust eachtophoto
specialists alwaysindividually
evaluate to create
and the
adjust right
each look individually
photo and feel. to create the right look and feel.
Step 03 - Enhancing lighting and tones

It is important to enhance the overall lighting of
the photo. Selectively brightening dark areas and Step 03 - Enhancing lighting and tones Step 04 - Adding Nordic ambiance
enhance
Step 03 existing lighting
- Enhancing (e.g.and
lighting sunlight,
toneswindow
light) in adjustment
It is important layers. the
to enhance Once the correct
overall lighting of
lighting
the photo.is achieved, selectively
Selectively brighteningadjust
darkall skin and
areas to-
nes
enhance existing lighting (e.g. sunlight, tone
to get a consistent and warm skin across
window light) in
photos,
adjustmentregard- lessOnce
layers. of lighting, environment,
the correct and
lighting is achieved,
original skinadjust
selectively hues. all skin tones to get a consistent and RGB
251/211/216
warm skin tone across photos, regard- less of lighting,
environment, and original skin hues
Step 04 - Adding Nordic ambiance

ItStep
is important
04 - Addingto add the final
Nordic color effects to
ambiance
create a subtleto
It is important yetadd
ambient
the finalScandinavian
color effectslight
to
feeling
createacross
a subtlephotos. We doScandinavian
yet ambient this by using light
our feeling
autumn red toneWe
across photos. in the key lighting
do this by usingarea and subtle
our autumn red
sky
tone blue tintkey
in the in the shadow
lighting areaarea.
and subtle sky blue tint in
the shadow area.
To do this we selectively apply a light sky blue tone
(RGB
To do221/234/241)
this we selectively in the shadow
apply a lightareas or tone
sky blue
opposite the key lighting
(RGB 221/234/241) in direction
the shadow with a large
areas soft
or opposite
brush
the key orlighting
a very soft gradient.
direction with This cansoft
a large be done
brushinor a
either multiply
very soft or color
gradient. This mode,
can bedepending on the
done in either multiply or
underlying
color mode,photo tones. on the underlying photo tones.
depending
In
Inthe
thekey
keylight
light source
source area,
area, wewe can
can apply a light tone
tone of autumn
of autumn red color
red color (RGB(RGB 251/211/216)
251/211/216) with a large
with RGB
soft a largeor
brush soft brush
a very softorgradient.
a very soft gradient.
This can be done in
221 / 234 / 241
This can
either be done
multiply orin either
color multiply
mode, or color
depending onmode,
the
depending
underlyingon the underlying
photo tones. photo tones.
Note:
Note:Do
Donot
notapply
applythese
thesecolors
colors to
to skintones.
skintones.
Danske
DanskeBank
Bank Chapter
Manual 02
00
Digital design
CVI Design system
The design elements
2.05.13
02.04 Our photo
- Colour grading,
grading, examples
examples
The aim
The aim of
of colour
colour grading
grading photos
photos is
is to
to enhance
enhance natural
natural attributes
attributes and
and ensure
ensure the
the feeling
feeling
and ambiance
and ambiance isis aligned
aligned with
with our
our overall
overall identity.
identity. See
See below
below examples
examplesof
ofhow
howcolour
colourgrading
grading
can be
can be applied
applied to
to imagery.
imagery.
Danske
DanskeBank
Bank Chapter 02
Manual version 1.00 Back to table of contents 38
00
Digital design
CVI Design system
The design elements
2.05.14
02.04 Our photo
Photo style style
- Tech– specs
Tech specs
Briefing photographers When commissioning photographers, always provide a brief detailing what you wish to achieve. Provide as many
details as possible but also leave room for the photographer to interpret the brief and the overall photo concept.
Use this guidance as a central reference or refer directly to Creative Execution.
Local environments and local people Our photos always reflect the authentic settings for the context in which they are used. We always show
a realistic representation of the given market in which we communicate.
Quality of photography Our photos should always be in rich and vibrant colours. When selecting photos, always check the quality
is fit for reproduction. When digitally treating photos, always follow the guidance given in this document.
Treatment and special effects Retouching and treatment should only be done according to the guidance given and only to improve the quality
of a photo. Treatment is not an opportunity for trickery.
Cropping Always crop photos with respect for the content. This means never cropping people’s heads, faces or bodies
in awkward ways. Try not to use crops of people or settings that become too abstract.
02.04 Photo style - Tech specs.

2.05.15 Our photo style – Tech specs
Print
When working with digital photos, always keep sizing and quality in mind. Always work with a minimum raw
File sizes size of A3 format photos in minimum 300dpi. Also always try to obtain high-res raw format photo files for
subsequent treatment and editing.
File sizes When working with digital photos, always keep sizing and quality in mind. Always work with a minimum raw
Digital uploads
size of A3 format photos in minimum 300dpi. Also always try to obtain high-res raw format photo files for
To maximize treatment
subsequent performances and a smooth loading experience ensure your images are around 100 Kb size.
and editing.
Photos used as fillers Photos should never be used to merely fill a space without intent or idea. White space can often aid a layout
or design and is preferred to awkward or irrelevant photos.
Overuse Be careful not to use the same photo twice in a document or repeatedly in a series of documents
unless specifically relevant to a certain communication or campaign.
Angles/horizons If a photo is too small to fit within the intended photo box, never angle or stretch the photo to fill the picture box.
Backgrounds Only certain photos work as backgrounds for text. Always consider potential use with headlines or body copy
and try to see the photo in a layout-use when shooting and selecting photos.
Copyright Always ensure that rights or permission from both photographers and photo subjects is secured before using
any photo in designs or communications. Also ensure that photo usage is in line with IP laws in relevant markets.
Danske
DanskeBank
Bank Chapter 02
Manual version 1.00 Back to table of contents 40
00
Digital design
CVI Design system
The design elements
2.05.16
02.04 Our photo
Photo style style – Cropping
- Cropping
Wealways
We always carefully
carefully consider
consider cropping
cropping of
of our
our photos.
photos. A
A photo
photo can
can contain
contain several
several stories
stories and
and
through clever
through clever cropping
cropping we
we can
can change
change the
the focus,
focus, story
story and
and feeling
feeling of
of an
an image.
image. In
In the
thesame
sameway,
way,
we're able
we’re able to
to create
create space
space for
for other
other graphic
graphic elements.
elements.
01 - Vertical Cropping
Through cropping, we have changed the photo
from an abstract moment to a more focused
portrait. Consideration
01 - Vertical Cropping has been given to the
backgrounds as well,
Through cropping, wecropping out messy
have changed and from
the photo
uneven sections
an abstract and leaving
moment us focused
to a more with clear, functi-
portrait.
onal space on which
Consideration other
has been elements
given to the like logos and
backgrounds
typography can beout
as well, cropping placed.
messy and uneven sections
and leaving us with clear, functional space on
which other elements like logos and typography
can be placed. Example 2
Narrow wideformat
Adverets / banners
_
02 - Horizontal Cropping
Narrow formats Cropping
02 - Horizontal can prove more challenging to
achieve
Narrowaformats
pleasingcan
crop, butmore
prove the same conventions
challenging to
apply.
achieveWea can create
pleasing focus
crop, buton
thethe people,
same whilst
conventions
considering
apply. We can thecreate
background to leave
focus on clean whilst
the people, space
for other elements,
considering or simplyto
the background toleave
leaveclean
emptyspace
and
give a sense
for other of placeortosimply
elements, the image.
to leave empty and
Example 1
give a sense of place to the image. Long wideformat
Adverets / banners
Example 3
Tall format
Adverts / Posters
02.05 Iconography
- Current available icons

- Navigational UI
02.05 Iconography
For more information about how to develop new icons - please refer to Danske Bank Corporate
Visual Identity design guidelines
You can download Danske

Bank digital icons here:

02.05 Iconography - Working with colour

2.06.10 Our
Using colours withiconography
icons can be a simple–and
Working
effective waywith colour
to add variety and expression.
However, when using colours, as with texts and photos, always ensure there is sufficient
contrast so the colours
Using icons remain legible.
with icons can be a simple and effective way to add variety and expression. However, when using
colours, as with texts and photos, always ensure there is sufficient contrast so the icons remain legible.
Colours to useColours to use Adjust credit Advisory service Adjust your loan ATM
To the right is an overview of how

To the right is an overview
light andofdark
howicons can work with our
light and dark iconscolour
can work withPlease
palette. our note that some
colour palette. Please note allow
colours that some
both light and dark icons
colours allow both light
to beand dark
used, icons
while some don’t.
to be used, while some don’t.
Balance service Change in ownership Business direct Complex finance
Establish mobile Daily economy Environment Establish pension
Financing your business No cash Loss of earnings Private banking
6
3 0
Security telle Time lock Stockholder Trade finance

02.06 Layout
- Introduction
- Grid logic
- Breakpoint overview
- Background grid on large formats
- Foreground grid on large formats
- Grid on medium and small formats
02.06 Layout - Introduction

We created a new structure to support the new visual language. To eliminate con-
fusion about devices, we created three new formats, Small, Medium, and Large,
with two main breakpoints.
02.06 Grid logic
To create an engaging experience that generates

interest and dialogue it’s necessary to create a
balance between elements on the foreground and
background grids.
Too many cards will have the same effect as a noi-

sy conversation, and will lack the focus, clarity and
calmness necessary to convey our message.
Foreground grid
Designed to respond to card content and its flexi-
ble nature (image cut-out, background image and
combination cards)
B) Background
Background grid content
Contains the standard tone of voice, and generally
long-form content (used mostly in pre login sce-
narios)
A) Foreground
Foreground grid Background grid
content
02.06 Breakpoints overview
Breakpoint Breakpoint
480px 768px
Small Medium Large

Background grid Background grid Foreground grid Background grid
- Columns: 12 - Columns: 12
- Columns: 6 - Columns: 6 - Grid: max width 1434px - Grid: max width 1194px
- Gutter: 18px - Gutter: 18px - Gutter: 6px - Gutter: 24px
- Fixed margin: 26px from sides - Fixed margin: 52px from sides - Margin: 6px - Margin: 6px
- Cards outside gutter: 6px - Cards outside gutter: 6px - Cards outside gutter: 6px - Cards outside gutter: 6px
Pre / Post login Please note

Please note that the state of login does not Some phones with a very wide resolution
influence the design. The same grid works will display the medium instead of the
across every product. small view, and vice versa.
02.06 Background grid on large formats
Large - above 768px

Max width 1194 px
The background grid consists of a fluid 12 column grid that lies

within the inner 10 columns of the foreground grid.
Column width: (1/12 of the inner 10 columns of the foreground

grid) - (11*24px gutters)
Maximum width for the background grid: 1194px
Gutter: 24px
Outer gutter: 6px
Example for designers
Page width 1446px

Grid total width 1194px
Column width 80px left/right 77px
Gutters 24 px
Note.
For wide resolutions, the viewport will
expand, but the grid will stop at the
maximum width of 1194px
02.06 Foreground grid on large formats
Large - above 768px

Max width 1434 px
The foreground grid consists of a fluid 12 column grid.
Column width: (1/12 of the grid width) - (11*6px gutters)

Maximum width for the grid: 1434px
Gutter: always 6px
Cards outside gutter: always 6px each side
Page width 1446px

Grid total width 1434px
Column width 114px
Gutters 6 px
Cards outside gutter: 6px
Note.
For wide resolutions, the viewport will
expand, but the grid will stop at the
maximum width of 1434px
02.06 Background grid on medium formats
Medium - between 480px - 768px
In this range, we use a six column grid with the following features:
Columns: 6
Margin: 52px from both sides
Gutter: 18px
Cards outer gutter: 6px from both sides
Images: can be full width
Content inside/outside cards: align to the same grid
Page width 700px

Grid total width (700-52*2) = 596px
Gutters 18 px
Margin 52px from both sides
Cards outside gutter 6px
Medium - example (480px) Medium - example (700px)

02.06 Background grid on small formats
Small - 480 px and below
In this range, we use a six column grid with the following features:
Columns: 6
Margin: 26px from both sides
Gutter: 18px
Cards outside gutter: 6px from both sides
Images: can be full width
Content inside/outside cards: align to the same grid
Page width 375px

Margin 26px from both sides
Grid total width (375-26*2) = 323px
Gutters 18 px
Cards outside gutter 6px
Small - example (375px) Small - example (440px)

02.07 Cards & tools
- Introduction - Tool introduction

- Card concept creation - Colour recommendations for tools
- Cards vs tools - Colour combinations for tools
- Card types - Tool types
- Card proportions on foreground grid - Responsiveness for tools
- Allowed card layouts - Collapsed tools on S, M, L formats
- Card type 01 - Cut out image
- Card type 02 - Background image
- Card type 03 - Combined image card
- Card misusage
- Cards on background grid
02.07 Cards & tools - introduction

Cards are a powerful way to differentiate digital content. The logotype was used as inspi-
ration for layouts, and to create engaging content visualisations for pre login scenarios.
For post login scenarios, we used the same approach to highlight small, functional tools.
BETA Mit liv Produkter Værktøjer Find hjælp Bliv kunde
Integer posuere erat Integer posuere erat a

a ante venenatis ante venenatis
dapibus posuere velit Secondary link
Primary action
Integer posuere erat

Secondary link
Samlet afkast
48.962
År til dato
+100k
DANSKE:DC
You’re beating the market!
211.40 DKK
+50k Se mere
You OMXC20
+4.5% +0.8%
Aktivfordeling
74%
Aktier
14% 10%
Obl. 2% Andet
Kontant
02.07 Card concept creation

Given the various touch points we have with our customers, we developed a visual language for a
range of conversations, in a variety of styles. In conversations where we talk, we highlight some topics
and areas more than others, for these cases we use the card system.
6px
When streamlining the shape of our logo, we
realised our identity is not only defined by the
colours and typeface, but also the geometry of the
negative space.
We also created a playful and responsive way to

arrange the cards.
The cards are designed to adapt to different

screen sizes, and are not anchored to any element
on the page, as they move independently across
the different screen sizes. The cards are defined
not just by their shape, but by the way they are
positioned in relation to each other.
To ensure a strong card layout that reflects our

logo and brand identity, do not place too much di-
stance between cards. Our golden rule stipulates
that no more than 6px should be placed between
two cards.
02.07 Cards vs Tools

The way we use cards differs for pre login and post login states.
What is a card? What is a tool?
Cards are a visual expression of Danske Tools are used to create personalised digital
Bank communicating to its customers in a experiences for Danske Bank customers.
more direct tone of voice. Their shape and Presented on interactive cards, the tools are
adaptability enhance content and break not just summaries of customer data, but
the routine of a flat page. provide a perspective on the data, with the
intention of helping the customer understand
and engage with their money.
02.07 Card types

A fully adaptable system, cards are used to present images, charts, text, or interactive elements.
There are four types of cards that can be used.
Three types are used on the foreground grid; the cut out image, the background image, and combi-
ned cards. On the background grid, we only use the ”background grid cards”, which are for text, or
infographics where more white space is required.
The system is designed to provide flexibility to designers, and examples are included in this chapter.
1 Cut out image card
2 Background image card
4 Combined image card
4 Background grid card

02.07 Cards types
Foreground grid Background grid
1) Cut out image card
2) Background image card 4) Background grid card
We only use the back-

ground grid card to create
visual interest for long
reading experiences.
3) Combined image card

02.07 Card proportions on foreground grid
Cards that sit upon the foreground grid must al- Foreground grid Foreground grid
ways cover12 columns or, alternatively, the inner 12 column card 10 column card
10. For variety, create several card combinations.
See the examples.
See examples in Chapter 03
Do not use more than 2 rows of

cards at a time
02.07 Allowed card layouts on foreground grid
2 rows
1 row
*Flowbreaker
further explanation of this card is
provided below
02.07 Card type 01 - Cut out image card
- Paddings: 50px for large/medium, 35px for small Small Medium
- Grid inside card: nest a 12 column grid between

the paddings. 24px gutter for large and medium
formats. Single column for small formats
- Content: either left aligned, or centre aligned
Large
Use foreground grid

02.07 Card type 02 - Background image card
- Background image: adapt to card size Small Medium
- Content: follows the same rules listed above

in terms of grid
- Image crop: images have a focus area calibrated

via CSS. The code will always try to centre the
subject within the available card size.
- Small formats: when using small formats,

the predominant colour will overlay (90%
transparency) the card’s surface
Large
Use foreground grid

02.07 Card type 03 - Combined image card
- Card structure: a split divides the card in two Small: maximum image height 270px Medium: maximum image height 440px
parts
- a) Image: one half of this card is an image that

maintains its ratio across all formats
- b) Text: written content must placed in the co-

loured section, which follows exactly the same
spacing/grid rules explained above a
Large
Use foreground grid

02.07 Card type 03 - Combined image card
- Card structure: a split divides the card in Large

two parts
- a) Image: one half of this card is an image that

maintains its ratio across all formats
- b) Text: written content must placed in the co-

loured section, which follows exactly the same
spacing/grid rules explained above
a b
Use foreground grid

02.07 Cards misusage
Cards - what not to do

In order to maintain a clear visual content hierar-
chy and to enhance readability, we strongly recom-
mend not using cards to present all your content.
02.07 Cards on background grid
Cards that sit upon the foreground grid must al- Background grid Background grid
ways cover 12 columns or, alternatively, the inner Series of background grid cards Single background grid card breaks
10. For variety, create several card combinations.
the reading flow in an article
See the examples.
Do not place two background grid

cards next to each other. Always place
them over the background grid.
02.07 Cards on background grid, example 01
When to use these cards
Articles and long text might need to be enhan-

ced to keep the reading experience flowing.
Background grids can be a very effective way to
introduce images and infographics, but always
within the background grid alignment.
- How to position: always stand alone

- Where to postion: adapt to background grid
- Padding: 50px for M/L - 35px for S
- Links: can be contained
- Never: position one next to the other
- Minimum height: 330px
02.07 Cards on background grid, example 02
When to use these cards
If an article requires a larger image, it can be

centred. For sizing, check previous page.
Position rules for the background grid
Left aligned
Right aligned
Centred aligned
02.07 Tool types - introduction

One of the key advantages of tools or cards is the modular approach, where information is
broken into smaller parts. This enables users to have their own personalised app, containing
only the information, or tools that they need.
Primary tools
Tools created with primary Danske Bank colours

represent the users primary banking activities
(savings goal, currency, sales tracking tool).
Secondary tools
Tools created with secondary Danske Bank

colours represent the users secondary
banking activities.
02.07 Colour recommendations for tools
Allowed colours for primary tools
Use the following colours to design primary tools and

cards. We discourage the use of red colour variations in
#003755 #7F9BAA #D7E9F1 #E7F1F7
order to avoid any sort of negative reaction from users.
#406980 #BFCDD4 #E0EEF5 #F0F7FA
#E0E2E3 #DBE0DE #E7E3DD #DDDAD2 #F0EEEA
#E6E8E9 #E8EBEA #EBE8E4 #E7E5E0 #F3F2F0
Recommended colours for secondary tools
The following colours are recommended to design se-

condary tools and cards. We discourage the use of red #6DBACE #74489D #09B89D #FBB273 #FFE17F
colour variations in order to avoid any sort of negative
reaction from users.
#8BC5D7 #8865AC #5EC3AE #FCC18B #FFE698
#E0EEF4 #D9D0E7 #D6EDE7 #FEEEDC #FFF9E2
#E0E2E3 #DBE0DE #E7E3DD #DDDAD2 #F0EEEA
#E6E8E9 #E8EBEA #EBE8E4 #E7E5E0 #F3F2F0

02.07 Colour combinations for tools
Two colours
Use as few colours as possible for clarity and consi-

stency. Always use one colour from the primary
colour palette.
More than two colours
If more than two colours are needed, use secondary

colours for details, and light colours/greyscales for the
background colour. This will aid readability and help
avoid visual pollution.
02.07 Tool types
Collapsed and expanded tools Step 1 - tap Step 2 - animated expansion Step 3 - expanded tool
When the customer interacts with the tools, each

small card will transform into a larger, opened
version.
Collapsed tools should always be short, easy-

to-read pieces of information that the customer
can understand and learn from at a glance. The
information in collapsed tools must be updated re-
gularly to encourage the user to frequently return
to the tool overview. This is the nature of collapsed
tools: they are not just links to content areas, but
meaningful information in themselves.
02.07 Responsiveness for tools
How and why
On mobile devices, tools shift state between

collapsed and expanded based on user interaction.
On larger screens, tools can be presented in a
semi or fully expanded state as their default state,
because the larger screen size allows it. This
enables the user to get straight to the full tool con-
tent without extra interactions. The semi- or fully
expanded views must still comply with the general
guidelines for tools by providing user insights, or
enabling users to improve their finances.
Disclaimer
Tools for large screens are pending - we have not

created principles for scaling tools from small to
large screens. If you have any questions, please
contact Hello Group.
02.07 Collapsed tool sizing small format
Margin: 6px around and Size - example (320px)

between all tools.
Padding inside a tool: 35px of clear space must be

visible around content inside the tool.
Minimum height: 120px
Maximum height: 240px

02.07 Tool types, collapsed tool sizing medium format
Increase in size on medium Medium - example (700px)
On medium size screens, the content expands, but

retains the 6px margin. However, the tool padding
increases to 45px.
02.07 Tool types, collapsed tool sizing large format
Primary (account balance tool)
On large screens, the main tool, such as the ac- Full width tool
count tool, fills the full width of the 12 columns.
One third size
Other tools
All other tools fill 1/3 as specified in the cards secti-
on. The height of these tools should be 243px.
02.08 Pre & post login
- Introduction
- Pre login elements overview
- Branded areas
- Background areas
- Cards
- Soothing for the eyes
- Flowbreakers
- Interactive elements
- Footer
- Post login - elements overview
02.08 Pre & post login - Introduction

Our websites, email communications and online promotional banners communicate to
prospective, as well as existing customers. We have divided the remainder of the guideli-
nes into pre login (primarily prospective customers), and post login (existing customers).
Pre login states Post login states
Pre login states represent digital communication of a marketing nature. The Post login states represent digital banking products used by our
pre login guidelines apply to anyone who needs to produce digital communicati- customers. Apps for smartphones and tablets, ebanking solutions,
on for either a preospective, or existing customer in a non-logged in state. or investment tools are all detailed here.
02.08 Pre login elements overview
Privat Erhverv Private Banking Velkommen til det nye BETA danskebank.dk Giv feedback Gå til det oprinfelige site
BETA Mit liv Produkter Værktøjer Find hjælp Bliv kunde Log på
Below is an overview of the most important

elements Danske Bank uses within its pre login
Livet handler om
andet end penge
Få en bank, der forstår dig og giver dig overbik
Branded areas
screens. The pre login elements were developed Se hvad vi kan gøre for dig
to introduce new users to the bank, therefore the

structure is built to support storytelling and create
a strong visual impression and ensure the consi- Get all the help you need
stency of the brand identity. Personal help provided 24/7 by an advisor

from our dedicated team
Background areas
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit

amet, consectetur
consectetur adipiscing elit adipiscing elit
Cards
Read more Read more
Lorem ipsum dolor sit

amet, consectetur
adipiscing elit
Read more
Soothing for the eyes

Lorem ipsum dolor sit amet, Nemo enim ipsam Nam libero tempore, cum
consectetur ? voluptatem quia? soluta nobis?
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit Lorem ipsum dolor sit amet, Lorem ipsum dolor sit Lorem ipsum dolor sit amet, Lorem ipsum dolor sit
amet, consectetur adipiscing elit. amet, consectetur adipiscing elit. amet, consectetur adipiscing elit.
Lorem ipsum Lorem ipsum Lorem ipsum
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Flowbreakers
Lorem ipsum Dolor sit amen Nunquam aliguis
Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum Lorem ipsum Lorem ipsum
Subject number 1
Subject number 2 with an extremely long title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
Interactive elements
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Subject number 3 with a long title
Subject number 4 Hover
Subject number 5
Lorem ipsum dolor sit amet, consectetur About us News & insights
adipiscing elit, sed do eiusmod tempor
- Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet
incididunt ut labore et dolore magna aliqua. Ut
- Consectetur - Consectetur
enim ad minim veniam, quis nostrud
- Ut labore magna - Ut labore magna
exercitation ullamco laboris nisi ut aliquip ex ea
- Minim veniam - Minim veniam
commodo consequat.
Investors
- Lorem ipsum dolor sit amet
- Consectetur
- Ut labore magna
Careers
- Lorem ipsum dolor sit amet
- Consectetur
- Ut labore magna
Branded areas (footer)
- Minim veniam - Minim veniam
See more examples in Chapter 03

Copyright ©08 - 15 Danske Bank Group. Danske Bank A/S er under tilsyn af Finanstilsynet. Læs vores behandling af person-oplysninger
og cookies og vilkår for brug. Klageansvarlig afdeling: Danske Bank, Juridisk Afdeling, Holmens Kanal 2-12, 1092 KBH K
02.08 Pre login - Branded areas, header
Branded areas
These areas are designed to clearly communi-
cate to our users where they are and what kind of Privat Erhverv Private Banking Velkommen til det nye BETA danskebank.dk Giv feedback Gå til det oprinfelige site
environment they are about to interact with. The

top of each page must contain at least one element BETA Mit liv Produkter Værktøjer Find hjælp Bliv kunde Log på
consisting of Danske Bank dark blue, logos, and
branded images.
Use foreground grid

Livet handler om
andet end penge
Få en bank, der forstår dig og giver dig overbik
Se hvad vi kan gøre for dig

02.08 Pre login - Background areas
Background areas
White areas are designed to accommodate all
forms of copy; articles, lists, or any kind of text that
delivers simple and direct written communication,
and branded images.
Get all the help you need
Use background grid
Personal help provided 24/7 by an advisor

from our dedicated team
02.08 Pre login - Cards
Cards
Cards bring communication closer to the users.
The cards are designed to enhance communica-
tion, and help make Danske Bank content easily
accessible to users.
Use foreground grid

02.08 Pre login - Soothing for the eyes
Soothing for the eyes

If a card contains multiple messages, then
white space will bring an element of calm to
the page. It’s important to maintain a healthy
balance - too much noise will overwhelm, while
too little will bore the users.
Use background grid

02.08 Pre login - Flowbreakers
Flowbreakers
Some elements, like full width images, are desig-
ned to break the flow. These elements rest the
eyes, and are an effective way to introduce new
stories to the page.
- An overlay is used only when a coloured card is

on top of a full width image (1434px).
- The overlay card can be any colour from the
entire Danske Bank palette*.
- This card must not overlay other cards, and must
not be as long as the page itself.
- The flowbreaker is a special element created to
highlight headlines, or relevant marketing messa-
ges, particularly at the top of page.
*when used on white, the flowbreaker can

accommodate more complex elements than just
headlines
Use foreground grid to create the overlay
Use background grid to align content

02.08 Pre login - Interactive elements
Interactive elements
User Interface (UI) components such as tabs, input
fields, and graphs, generally sit on white areas
(reference 1.01.17), and help to make even the
Subject number 1
most complicated content feel accessible.
Subject number 2 with an extremely long title
Use background grid Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Subject number 3 with a long title
Subject number 4 Hover
Subject number 5

02.08 Pre login - Footer

Footers follow the same branding principle as the
first module. Always ensure Danske Bank dark
blue is used to ’sign off’ at the base of the page.
Always place the Danske Bank logo on white in
order to mirror the ’human’ feeling of the naviga-
tion bar.
As mentioned above, branded areas help to visual-

ly connect the page from top to bottom.
Use background grid
Find more examples in

Chapter03 - Design patterns
02.08 Post login - Elements overview

Post login elements are intended to be very simple to understand. They should stand out, but not
take attention away from the content and overview. The design should feel a part of the same
native platform design, but unique to Danske Bank. The Danske Bank font plays a large role in
establishing this connection.
Tools
The tools are simple, visual, and colourful. The simp-
Primary tools
le nature of the design gives the user a clear over- Each tool has a different colour scheme to differentiate it from the
view of the content. Each tool should not contain too others. Tools that are very basic and essential will be defined by pri-
many elements. Labels should be avoided. Graphics mary Danske Bank colour schemes (Account balance tool, Transacti-
and graphs should be obvious, and not require se- on tool, Contact the Bank).
veral titles or labels. Users will be able to customise
the overview by re-ordering, removing, and changing
settings for tools, and add new tools.
Secondary tools
Tools created with secondary Danske Bank colours represent the
users secondary banking activities (savings goal, currency, sales
tracking tool).
The dot
The dot is the future digital advisor that lives within the app. It doesn’t
intrude, but is present and listens, and learns from user behaviour. It
interacts via conversation and dialogue. It helps users make informed
decisions, and enables them to do increasingly more in the app. And
if users reach a level where they can’t make those decisions, it can
bring in experts to help.
Background
Empty spaces in post login scenarios are only used to define tools.
For post login elements, go to the
2.0 Interface design pattern section
02.09 Interaction
- Introduction - Sliders
- How to build a button - Double sliders
- Button states - Input fields
- Button main sizes - Dropdown menus
- Button specs - Tables
- Circular buttons - Notifications and messaging
- Buttons with iconography - Notification hierarchy
- Input fields, radio and multi-checkbox buttons - Notifications and messaging types
- Accordions - Example
- Tabs
- Step indicators
02.09 Interaction - Introduction
The way we envisage the interactions between Danske Bank customers and products are very
similar to human behaviours. We want customers to use products that listen to their needs,
understand the urgency of their tasks and feel intuitive.
During our research, we realised that these interactions are much like a conversation. A
pleasant conversation entails:
Users Products - Discussing one topic at a time
- A speaker and a listener
- No hierarchy between speaker and listener
- Very long or very short conversations, depending on the situation
After discussing the validity of these points and their relevance in relation to human behavi-
our, we came to realise that conversation is a strong metaphor to explain the Danske Bank
motion principles.
Emotions Tech
02.09 How to build a button
Button gradient principle Step 1.

Gradients on buttons facilitate the Select a colour from the colour
distinction between interactive parts, palette, for example
and static surfaces. CYAN (#009fda).
The process below illustrates how to

build a gradient from our basic colour
palette. To do so, values like saturati-
on (S), brightness (B) and opacity (A)
will be altered. Step 2.
The gradient starts from the top part
of the button, and ends at the bottom.
We will therefore refer to these two
areas as TOP value and BOTTOM
value.
Step 3.
The top and bottom values are the
same colour as the gradient.
Step 4.
Create the gradient:
- Top: add 4 points of brightness (B) to

the original values
- Bottom: subtract 2 points of satura-

tion (S) from the original values
How to build the hover effect

When hovering over a button, a
shadow will appear to provide a subt-
le feeling of interaction.
Shadow: #394344 20% transparent

X: 0 Y: 2
Blur: 4
How to build the pressed effect

When clicking or tapping, the user
will physically push against the but-
ton, flattening the gradient to a more
uniform visual.
- No gradient
- Cyan: add 2 points of brightness (B)

to the flat colour
- Other colours: add 10 points of

brightness (B) to the flat colour
How to build the inactive state

When a button is inactive, it has the
same colour as the background, but
with - 6 in brightness.
- Flat button colour:

same as background
- Subtract 6 points of brightness (B)

from the original colour values
- Text: white or dark blue

40% transparent
Strokes - only secondary action

colours
Every secondary button has a stroke
obtained by:
- Subtract 2 points of brightness (B)

from the original values
02.09 Button states
Particular cases
Button effects are created by altering
the values of the original colour they
sit on top of. Therefore colours like
white must have a custom treatment
to render the same gradient effect.
Top: original white colour
Bottom: subtract 2 points of saturati-

on (S) from the original values
Stroke: #EBEBEB
02.09 Button states
Colour codes
#003755
#D7E9F1
02.09 Button states
Colour codes
#09B89D
#E65A6D
02.09 Button states
Colour codes
#FFE17F
#FBB273
02.09 Button states
Colour codes
#6DBACE
#74489D
02.09 Button main sizes
Small resolutions Medium / large resolutions
XL XL
L L
M M
S S
XS XS
02.09 Button specs
Inner padding Minimun size for buttons
- 2/3 of the button’s height - XL / L / M: 3 times button’s height

- S / XS: 2 times button’s height
Outer margin Maximum size for buttons
- 2/3 of the button’s height - 30 characters maximum

02.09 Button specs
Distance between two buttons Distance between two links
- Horizontal: 1/3 of the button’s height - Horizontal: 2/3 of (L) button’s reference height
- Vertical: 1/3 of the button’s height - Vertical: 1/3 of (L) button’s reference height
Distance between a button and a link
- Horizontal: 1/2 of the button’s height

- Vertical: 1/2 of the button’s height
02.09 Circular buttons
XL The icon size is 1/3 of the circle diameter

60px
L
54px
M
48px
S
42px
XS
36px
02.09 Buttons with iconography
XL How to build it
60px
Button icons have 2pt line thickness
and should always be 1/3 of the but-
ton height on the widest side.
L
54px
M
48px
S
42px
XS
36px
These are the only icons to be used
in a button
02.09 Input field, radio and multi-checkbox buttons
Double primary action Radio buttons and multiple choice
- Outer padding: 2/3 of the button’s height

- Inner padding: 1/2 of the button’s height
Radio buttons Tick boxes
Call to action input field
- Follow building principles listed above

02.09 Accordions
Small: content fills the width of the Medium: same as small

open accordion
02.09 Accordions
Accordions in large viewports can extend Large

to the full width of the grid, but content
should alwaysbe readable and centred
inside the open accordion.
02.09 Tabs
Small: the tab system should always Medium: the tab system primarily remains as the horizontal
be shown as accordions system and breaks to an accordian system when necessary. It
should NOT be a left/right tab system.
The tab system should ONLY

be used to toggle through
content and NOT as a way to
visualise a process, or flow.
02.09 Tabs
Large: the titles of the tabs should have plenty of clear space
around them in order to reduce clutter, and to ensure they are not
read as a single line of text.
02.09 Tabs and body copy
Large: in cases where the tab titles are long, or too many to fit on a
horizontal line, the tab system should shift to a vertical tab system,
with the titles on the left, and content on the right.
02.09 Step indicator
Small Medium
A simple version of the step indicator, with Large

and without numbers, and interactive and
not interactive.
A more complex version with labels for Small Medium

each step, a visual indication (arrow) of the
step process, and an indication of what is
complete, and what is mandatory.
On smaller screens, it might not be pos-

sible to show all steps at once. Remove a
number of steps, and replace them with a
three-dot symbol that the user can click
to see the following three or four steps.
If there is a mandatory step at the end, it
should always be visible.
Large
02.09 Sliders
General styling and visual feedback Small: on smaller screens, the title and Medium: as long as there is room for titles and
amount sits above the slider bar. The amounts, the slider layout remains as shown
dividers are removed as the slider bars below.
themselves act as dividers.
02.09 Sliders
General styling and visual feedback Large: the slider layout in large viewports can extend the full width of the
grid. Titles, sliders with labels, and the amounts should always have plenty
of clear space around them to prevent visual cluttering.
02.09 Double sliders
Double sliders for from/to and mini- Small: Medium:

mum/maximum scenarios have the
same general rules as the basic sliders.
Medium and small: when titles and

amounts take up too much space, they
move above the slider bar. The slider bar
is centered below.
Large:
02.09 Single line input fields
The style and visual appearance of the single Small: on smaller screens, the label is above Large and medium: on large and medium size
line text input fields with labels and hint text the input field to make best use of the space screens, the label sits to the left of the input field.
is clean and uncluttered. A mandatory field available.
is simply marked with an asterisk after the
label.
Mobile apps:
In mobile apps, it makes good sense to use
more recognisable input types that the user
usually sees on their device when filling out
forms in an app. The general use of colours
should still be the same though.
Mobile app
02.09 Multi-line input fields
The same rules apply to multi-line and Small: Large and medium:
single-line text fields.
02.09 Contact form example
An example of a short form with the basic Small: Large and medium:
rules applied.
02.09 Dropdown menus
Small and mobile:

The button goes to full width. If it is pressed The dropdown menu button inherits the style
on a mobile device, it brings up the native of the secondary buttons for colour, gradient,
selector - here shown as an iOS 9 element. stroke, and pressed state.
Example on coloured background, with the

secondary button style.
02.09 Contact form example
Small: Medium:
02.09 Tables
Large
02.09 Tables
Small: Medium:
02.09 Tables
Large
02.09 Notifications and messaging

In the products we develop for our customers, we wish to communicate relevant and timely infor-
mation that they can act upon. These can be notifications that alert a customer about a task, or
notify them about an event that has occurred. It can also be an advisor conversing with a cust-
omer, or a tool predicting a likely scenario in the future.
The many different types of alerts, notifications, and messages are all forms of dialogue that the
Bank has with the customer and that are initiated by tools, or the dot. The most important aspect
to consider is that the message should always be within the context the customer refers to, and
that it relates to elements in the interface that the customer can take action on.
Notification types Warning

Icons are supposed to visually enforce the Something undesirable might occur
communication without any dependancy
on the background colour. Please follow the
scheme below:
Error
Something went wrong
Success
Action completed successfully
Info
Additional information is available
02.09 Notification hierarchy
Need in interrupting customers’ ﬂows

Messages and notifications High Low
To ensure a high level of bespoke interacti-

ons with your banking app, messages and
notifications sent to customers by artifici-
al intelligence systems like the ’dot’ must Message from the bank Advice/Recommendation
exist in a logical hierarchical information
architecture. This hierarchy must address Message from advisor New tool suited to customers situation
two of the most important issues for our Message from customer services Recommend transferring funds based on
customers:
Important general message interest rate
Additional features to beneﬁt the user
1) Timing - when should the app com-
municate with customers, and should it
interrupt their flow? Action from the bank Tool related status
2) Decision making - when is it appropriate
Need to be accessed
for the app to ask customers questions Sign agreement Savings goal reached
that they might find difficult to answer? Investment tool status
Contextual action
Remember User ID
Suggest currency monitoring if the same
currency is repeatedly viewed
Suggest a recurring payment if the same
System message
amount is repeatedly transferred to the
News/Marketing
same account
Server is slow
Server down
News about Danske Bank products
Planned maintenance
Updates to other services and products
*we discourage the usage of Marketing

messages within post login interfaces due to
their lack of relevancy for customers
Low
02.09 Notifications and messaging types
Toast notifications Small Medium

Use a toast when you have important, high-level
information to communicate about a recently
attempted or completed action.
A toast is a dismissable message used to com-

municate a successful process, an unsuccessful
process, or a warning.
If you have more than one toast appearing at the

same time, stack them, with the most recent
toast on top. The other toasts stack underneath in
chronological order at a distance of 6px.
Graphic features
- Full width
- Font: Danske Human for large / Danske Text
Regular for medium and small
- Stack distance: 6px
02.09 Notifications and messaging types
Toast notifications Large

02.09 Example
Form notifications Small Large and medium

02.10 Motion
- Introduction
- Motion principles
- Application of principles
- Top page loading experience
- Loading sequence
- Transition styles
- Loading states
- Loading data
- Loading imagery
- Loader design and timings
02.10 Motion - Introduction

In service design, delightfulness manifests itself when all the elements of a task are positively
exceeded. We know that Danske Bank will be able to fully satisfy customer needs in the ’basic’
and ’qualifier’ areas in the graph below. We identified the ’differentiator’ areas as that part of the
experience that delivers the highest degree of delightfulness; therefore we believe it represents
the best study environment for our motions and interactions.
d
d
te
rt
d
l
nt
ise
ro
ce
ia
po
de
nt
in
ec
gn
up
nfi
co
pr
nv
sy
co
fe
es
ap
sa
co
co
ea
in
re
av
I’m
I’m
I’m
I’m
I’m
I’m
s
Ih
It’
1 2 3 4 5 6 7 8
Basic Qualifier Differentiator
User with a need Job done Exceeded need

02.10 Motion principles
Motions & interactions should never be time consu-

ming or generate frustrations
Motions & interactions should always serve your purpose
Motions & interactions should provide a constructive way to

deliver a positively exceeded experience (superhero feeling)
Motions & interactions should be felt, not seen

02.10 Application of principles
What you look at, Different platforms, same welcome

is what animates
Building upon our concept of brand consistency on the
In a conversation, we discuss one topic at a time, which top pages of products, we want to add a consistent
is how we envisage users will interact with Danske Bank animation to enforce the welcome feeling Danske Bank
products. That means viewports will determine what delivers to all its users.
parameters within the animations can be performed.
Whatever sits on top of the viewport will be considered
past, and everything that sits below the fold will be consi-
dered ’still to be mentioned’.
Lazy loading, one object at the time Different layers, different behaviours
Hierarchical timing is key when loading content in a The content’s distribution does not only affect the way
page. It helps the user understand what comes first, and users experience the conversation, but also the way they
where to start reading. This technique allows us to have interact with it. We envisage cards that follow different
a prepared structure on the background that comes to behaviours due to their positioning within the product
life via the content loading within it. structure. They are physically closer to the user, therefo-
re the speed of the card is different from the background
objects.
02.10 Top page loading experience
Top page loading experience

To empower the way branded areas load at the top
of each page, we designed a specific loading moti-
on that occurs consistently across every product.
Mobile Tablet Desktop
This consists of a subtle movement towards the End state
top of the page of the first object displayed on the
product. Images, cards, and text all follow this
principle: Start state
- The journey of the object is equal to 4% of the

height of the object itself
02.10 Loading sequence
Hierarchical timing and consistent choreography

When building a transition, consider the order and
the timing of the movements. Ensure that motion
supports the information hierarchy, conveying
what content is most important by creating a path
for the eye to follow.
Loading sequence
The preloading state of every element exists on
the page, the content is then loaded following a
precise hierarchical order to guide the user’s
attention.
1) The web content follows a top left to bottom

right wave of visualisation.
2) Elements loading on apps follow a waterfall

order, from top to bottom.
(1) Web content (2) Mobile content

02.10 Transition styles
Visual continuity Card loading Card scrolling Card content

Motion design can effectively guide the user’s Cards load when you land on a screen. When you scroll down the page, cards When new content appears, it smoothly
attention in ways that both inform and delight. maintain the same distance between transitions from 0 to 100% transparency.
Use motion to smoothly transport users between each other, and they move smoothly up
navigational contexts, explain changes in the ar- and down.
rangement of elements on a screen, and reinforce
element hierarchy.
02.10 Transition styles
Visual continuity drives user attention. It is impor- Card Card scrolling Content appears
tant to design elements that help achieve that goal. Cards loading when landing on a screen When you scroll down the page cards When new content appears it will smoothly
Connect transitions visually, so that users can will keep the same distance between go from 0 % transparency to 100 %
understand where they’re going to, and especially each others and smoothly move up
how to return to where they were. and down
02.10 Loading states
Loading states
The loading transitions of the elements should
be clear, human and soft. A logical order will help
the users to understand where to focus their
attention.
a) Not loaded b) Loading state c) Loaded
The loading process of any object goes through
three states:
a) Not loaded
b) Loading state
c) Loaded content = final result
1. App’s previous 2. Card loaded on its physical 3. Ultimately content gets

screen layer loaded
1. Active loader 2. Elements loaded on their 3. Ultimately content gets

physical layer loaded
02.10 Loading data
Loading content a) Live data b) Static data

There are two kinds of content, some refers
to live data, some to static information.
Given the different nature of these two it
is necessary to distinguish the way users
perceive them.
a) Graphs, Infographics, schemes, anything

that represents a changing value in time
has to be dynamic.
b) Articles, images and any sort of com-

munication that does not display live data
follows a softer animation.
This card contains live updates about your monthly expenses, and can This card is a tool for the users, not a display of live data, and therefore
therefore be animated to enhance its dynamic nature. does not require animation.
How to prioritise content animations a) Live data b) Static data

Elements overall can be animated following
the principles of visual continuity and
hierarchical timing explained in the Transi-
tion Styles page. Live content needs to be
considered primary, therefore it will be the
first to animate, followed by the secondary
information.
Primary live data content: crescendo Secondary content: simple Static content is generated via a simple, soft fade in to 100%
movement from left to right. fade in 0% - 100%
02.10 Loading imagery
Images
To maximise performance, and for a smooth
loading experience, ensure that images are about Loading state Loaded state
100Kb. Check image size vs quality.
Reference: 2.02.09
Loading state image characteristics:

– Image with 80% transparency
– Background colour: #F0EEEA
Loaded state characteristics:

–Image with 100% transparency
02.10 Loader design and timings
Loader Danske Bank ideal loading speed

Loading speed can be affected by several factors Web and apps
such as slow connections, large updates, or
complex calculations. It is therefore necessary to
design a solution for loading times that exceed our
ideal speed of 0.7 seconds.
700ms
A loading screen or ’loader’ will then appear, infor-
ming the users an activity is being processed.
Loader concept creation

A simplified version of the Danske Bank logo
inspired us to create an easy-to-loop loader. The
circular form is both an introduction to the future
Desktop
“dot” logics that will be implemented on digital
6px stroke
banking, and provide a natural approach to the
6px gaps
loading idea.
60px diameter
+700ms
This loader will appear for loading
times longer than 0.7 seconds
01 140
Design patterns
Chapter 03 Design patterns

A repository of best practices within Danske Bank digital presence
Cards and branded areas

03.01
Article page
03.02
Newsletter
03.03
02 141
Design patterns
Chapter 03 Cards and branded areas
- Cards as branded top page areas

- Top page without image
- Footer alternative
Digital design system Design patterns
03.01 Cards as branded top page areas
Branded areas - template 2
Use foreground grid

Use foreground grid

Use foreground grid

Use foreground grid

Use foreground grid

Cards - example 2
Use foreground grid

Cards - example 3
Use foreground grid

Cards - example 4
Use foreground grid

03.01 Top page without image

If there is no image, we recommend using the light
version of the Danske Bank primary colour
Use foreground grid

03.01 Footer alternative
Use background grid

02 152
Design patterns
Chapter 03 Article page
- Headings and body copy across formats

- Dark backgrounds
- Article paddings
- Navigational modules
03.02 Headings and body copy across formats
Article examples
We recommend a text box width equal to six columns
of the content grid (around 500px). It helps reading
and facilitates integration with cards, images, and
responsive formats.
x = body copy font size (16 px)

Article examples Large - example (1440px)

If subtitles are not used, the spacing between ele-
ments shifts, compacting the text box and enforcing
the content hierarchy
x = body copy font size (16px)

Medium - example (700px) Small - example (375px)

03.02 Dark backgrounds
Recommended body copy Large - example (1440px)

Danske text 17px / 23.8 line height
Body copy colour

White 80% transparent
x = body copy font size (17px)

03.02 Article paddings
The content grid enables you to properly space

content. The content area softens the page with lots of
white space, in contrast to the cards.
- Min distance top/bottom: 100px

- Max distance top/bottom: 200px
- Multiples of 25px define the spacing of elements
03.02 Navigational modules
The content grid enables you to build tools containing

images and text.
02 159
Design patterns
Chapter 03 E-mail
- Introduction - Email modules

- Layer explanation - Email typography
- Colour overview - Call to action
- Building a colour palette - Examples
- Don’ts with colours
- Building blocks
- Responsiveness
- Page headers
- Page footers
03.03 E-mail guidelines - Introduction
Form notifications Desktop / Tablet (660px) Mobile (320px)

6 columns 6 columns
The digital universe offers many opportunities to
communicate a brand via multiple channels. In
order to create a clear, strong, unified online visual
language for all Danske Bank products, we created
a detailed framework to support the following
elements:
Header modules (branded areas)

Text modules
Card split modules
Card breaker modules
Card group modules
Footer modules (branded areas)
03.03 Layer explanation
Two ways to display content
There are two ways to display and treat content:
A) Cards: use white space for clarity of message

and simplicity
B) Background: use cards to emphasise content:

ideal for pushing important content, and to draw
attention
A) Cards B) Background
E-mail colours overview
Colour ratio in e-mails Primary colours
Our e-mail colour palette contains primary, secon-

dary and greyscale colours in one shade only. As
our brand primarily is associated with our primary
dark and light blue this should be the prominent
colours in our emails.
In general the footer is a fixed primary dark blue,

which represent our brand.
Secondary colours
There are more freedom in terms of using colours
for highlighting content.
Greyscale
How to build a colour palette
Step 1. Primary colour dark blue

Select the primary midnight blue
Step 2. Secondary colours

Secondary and greyscale colours - what not to do
Select a maximum of two secondary
colours to highlight content in
DO NOT pick more that two secondary colours and
the e-mail
one greyscale colour in an e-mail.
Mixing more colours within an e-mail will affect the Step 3. Greyscale colour
overall branding, carrying our product off the visual If having a calculator or any other
guidelines. extra tool in your email, select one of
the greyscale
Step 4. Primary colour light blue

Select the sky blue to complement the
colour balance of your palette
Don’ts with colours
DO NOT mix secondary colours or grayscales

together in the same card group
03.03 Building blocks
Creating your e-mail

Header module (branded area)
When creating an e-mail template, always remem- Always use one of the four headers
ber to use a branded element at the top, and at the to start your e-mail.
bottom of your e-mail.
Text module
In the examples below, you can see how to use text
modules to create a calm reading experience, or
card modules to emphasise content.
Card split module
Text module
Card breaker module
Text module
Card group module
Card split module
Footer module (branded area)

Always use the footer module at the
base of your e-mail.
03.03 Responsiveness
From desktop to mobile Desktop Mobile
Content on the e-mail template transforms depen-

ding on the viewport.The following example shows
how the cards ’stack’ to form a new composition to
fit mobile devices.
03.03 Page headers
Select a suitable header for maximum impact
There are four e-mail header options available.

Designed to ensure a clear, strong, and unified
visual language across all Danske Bank products,
choose the header that best suits your content.
Image header
With the image header, you have two call-to-action

options, depending on the message to be delivered.
The header image should reflect the e-mail con-

tent. We recommend using the imagery created by
Bold for the Danske Bank CVI.
03.03 Page headers
Split image header
With the split image header, you have the option

of using a call-to-action button, depending on the
message to be delivered.
The header image should reflect the e-mail con-

tent. We recommend using the imagery created by
Bold for the Danske Bank CVI.
03.03 Page headers
Blue text header
With the blue text header, you have the option of

using a call-to-action button, depending on the
message to be delivered.
03.03 Page headers
Text header
With the text header, you have the option of using

a call-to-action button, depending on the message
to be delivered.
03.03 Page footer
The final say!
Always use a page footer at the base of your

e-mail, together with modules containing the
Danske Bank blue colour, if possible, as shown be-
low. This is to ensure that the template is branded
by Danske Bank at the top and bottom.
Card breaker module
Use this module to create attention.

A link can be added if necessary.
Three column module
Use this module to display contact information.

Place it above the footer.
03.03 Page footer
The final say!
Always use a page footer at the base of your

e-mail, together with modules containing the
Danske Bank blue colour, if possible, as shown be-
low. This is to ensure that the template is branded
by Danske Bank at the top and bottom.
Footer
The footer is used to finish the email, and always

appears at the base of the page. Share icons are
optional.
03.03 E-mail modules
Full module overview for creating e-mail templates
Below is the complete list of all the modules we

use to create engaging e-mail templates. The
modules are listed by name, and with examples of
content.
Card group module
This module is used to emphasise mul-

tiple content. Keep your message short
and direct.
This module contains an image. Please

follow the Danske Bank CVI imagery
guidelines.
Card split image
This module is used to empha-

sise a single message. Keep the
heading short, and direct.
This module contains an image.

Please follow the Danske Bank
CVI imagery guidelines.
Two column module
This module is used to display

two messages. The module
consists of a fixed headline, as
well as an optional label, and a
body copy link.
This module contains two ima-

ges. Please follow the Danske
Bank CVI imagery guidelines.
Text breaker module
Use this module for a calm

reading experience. A link can
be added, if necessary.
Card breaker module
Use this module to draw

attention. A link can be added if
necessary.
Text list module
Use this module to display

lists. Keep the content short
and precise for quick and easy
reading.
Card left split module
Use this module to display

a single message. Keep the
heading short and direct. The
module contains a fixed head-
line, as well as an optional label
and body copy link.
The module contains an image.

Video module
Use this module for video

content. The module consists of
a fixed headline, body copy, and
an image.
Card right split module
Use this module to emphasise

a single message. Keep the
heading short and direct. The
module contains a fixed headli-
ne, as well as an optional label
and body copy link.
The module contains an image.

Three column module
Use this module to display con-

tact information. Place above
the e-mail footer at the bottom
of the page.
Footer
Always use the footer at the

bottom of your e-mail. Share
icons are optional.
03.03 E-mail typography
H1
Georgia italic 40px
leading 46px
Kerning 0.2
40px Georgia Italic
H2
28px Georgia Italic

Georgia italic 28px
leading 37px
Kerning 0.2
H3
Georgia italic 21px
Leading 27px
28px Georgia Italic
Kerning 0.2
H4
Verdana 15px This is a tag style
Leading 24px
H5
Verdana 15px
Leading 24px
This is a subheading
Body copy
Verdana 15px Body copy
Leading 24px
03.03 Call-to-action
Creating the right call-to-action
Two types of links are used in the e-mail

template to display different layers of
content. A primary link is always used in
the top part of the template to display and
activate the primary content. A smaller
link is used to display secondary content.
Primary
Secondary
03.03 E-mail examples
Examples Example 1 Example 2 Example 3

Danske Bank Appendix 185
Contact informations
Danske Bank
Group Marketing & Communications, Creative Execution
r3855sup@danskebank.dk
Danske Bank Appendix 186

Digital Guidelines vs. 1.60

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Digital Guidelines vs. 1.60

Uploaded by

Copyright:

Available Formats

Danske Bank Chapter 01 1

Digital design system Introduction

Chapter03 - Design patterns

Danske Bank Chapter 01 4

Our customer promise

Our communication platform

Our communication principles

Four main principles for our design

01.01 Our customer promise

Our promise to our customers:

We help customers be financially confident and achieve their ambiti-

01.01 Our communication platform

We provide state-of-the-art-tools that make banking easy and effortless

01.01 Our communication principles

Seven communication principles help us maintain this focus:

We have a truly customer centric approach: Build on customer needs

We have a helpful and friendly attitude: Welcome everybody - never exclude

We are genuinely interested: Demonstrate understanding and engagement

We create meaningful interactions: Ensure coherence between product benefits

01.01 Our tonality - a clear voice

In other words, our tonality is:

Understanding and warm

01.01 Four main principles for our design

We are human and warm

We are approachable and authentic

We are simple, modern and clean

We are responsive and in motion

Pre & post login

02.01 Design principles

Simplicty in all tasks

Priority and urgencty

Supporting active and passive use

Personalisation with minimum effort

Trust and security

- Primary, secondary and greyscale

02.02 Primary, secondary and greyscale

02.02 Colour codes

#D7E9F1 #E0EEF5 #E7F1F7 #F0F7FA #F7FAFC

Action colour: #009FDA Background: #FBFDFE White: #FFFFFF

#8BC5D7 #EB7C83 #8865AC #5EC3AE #FCC18B #FFE698

#A8D2E0 #EF9A9C #9F84BD #8AD0BF #FDCFA5 #FFECB0

#C3E0EB #F4BAB8 #BAA7D1 #B2DFD3 #FEDDBF #FFF3CA

#E0EEF4 #F9DAD8 #D9D0E7 #D6EDE7 #FEEEDC #FFF9E2

#EFF6F9 #FCECEA #EBE6F2 #EAF6F3 #FEF6ED #FFFBF0

#5E676A #7B8185 #D2D7D5 #EBE8E4 #D2CFC5

#7F898B #ABAFB2 #DBE0DE #F0EEEA #DDDAD2

#A6ADB0 #C5C8CB #E8EBEA #F6F4F2 #E7E5E0

#D0D4D6 #E0E2E3 #F3F5F4 #FAFAF8 #F3F2F0

#E6E8E9 #EFF0F1 #F9FAFA #FCFBFB #F8F8F6

02.02 Colour Hierarchy

02.02 Action colour usage

Primary colour combinations - Dark Blue (A) White / Background (B)

02.02 Action colour usage

02.02 Colours - Action colour usage

Primary colour combinations -

02.02 Colours - Action colour usage

Double primary action colour - example Correct: Incorrect:

02.03 Typography - Introduction

123:; /©™ Informative

02.03 Featured digital fonts

Danske Human Medium Italic AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789*#@+<=

Danske Text V2 Regular

Danske Text V2 Semibold

Danske Text V2 Italic AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789*#@+