07A Online Style Guide 1.2

7A Desktop
Style Guide
Online
Tablet
Smartphone
i c a t i o n so nly
Web a p p l
o r n o n - o n e
F
Release 1.0 – Version 1.2, 2015

Style Guide
Contents
03 Page types 42 Design elements for online media

42 Basic structure
06 Basic design elements 44 Header
48 Main navigation
06 Logo 52 Meta bar
08 Color & color harmonies 56 Content navigation
11 Typography 63 Stage
16 Adaptive grid 68 Teaser & container
20 Icons, arrows & bullets 81 Form elements
27 Buttons 93 Tables
32 Links 101 Footer
34 Notepads 105 Partnerships
108 Template List
109 Contact
Allianz Style Guide 7A: Online 2

Overview of page types
Page types
Home Index Content

Overview of page types
Home – Responsive behavior
Desktop / Tablet (Landscape) Smartphone (Portrait)
With image Without image Page continues
Page continues Page continues
Images may be hidden on

smartphones in order to
improve loading time for
websites.
This may be considered in
special market areas with
less developed internet
connections.
Page ends here

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Basic design elements Logo
Logo
The logo is always positioned in the top Logo sizes Logo position in header
left corner on websites as opposed to
native apps, where it‘s center aligned.
The logo has a fixed size for desktop and
tablet in landscape mode and is reduced 80px
to a reduced fixed size for smartphones
in portrait mode.
180px
Desktop / Tablet (Landscape)
59px
133px
Smartphone (Portrait)
Native App example

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Basic design elements Color & color harmonies
Color & color harmonies
Color is used to guide the user and to Primary colors

visualize information. Similar content
or interaction elements should always
use the same color consistently throug- Rgb 65 65 65 Rgb 0 119 200 Hex Rgb 25 157 215 Hex Rgb 169 199 118 Rgb 225 52 62
hout the website. The colors on the right Hex #414141 #0077c8 #199dd7 Hex #a9c776 Hex #e1343e
should be seen as recommendations.
Text Call-to-action Highlight Success Error

Headlines Links Hover state Validation Validation
Copy text Buttons Active state messages messages

Please remember:
→ Try to use just one secondary color for
Basic design elements Color & color harmonies each website. Always keep the overall
look in mind.
→ To avoid creating homepages that are
Color & color harmonies too colorful, please consider using the
defined shades of Allianz Blue and white
instead of secondary colors.
The main colors can be combined with Secondary colors #7d55c7 #658d1b #a50034
Allianz secondary colors. These colors
Secondary color palette
are mainly used for notepads. Use
RGB: 160 116 0 RGB: 96 61 32 RGB: 134 38 51 RGB: 101 49 101 RGB: 51 0 114 RGB: 0 47 108 RGB: 0 59 92 RGB: 0 76 69 RGB: 84 98 35 RGB: 104 92 32 RGB: 84 88 90
secondary colors carefully to ensure HEX: #a07400 HEX: #603d20 HEX: #862633 HEX: #653165 HEX: #330072 HEX: #002f6c HEX: #003b5c HEX: #004c45 HEX: #546223 HEX: #685c20 HEX: #54585a
a harmonious result.
HEX: #cc8a00 HEX: #8b4720 HEX: #a50034 HEX: #87189d HEX: #5f259f HEX: #003da5 HEX: #00677f HEX: #007a53 HEX: #658d1b HEX: #949300 HEX: #707372
HEX: #f2a900 HEX: #e35205 HEX: #ce0037 HEX: #a51890 HEX: #685bc7 HEX: #0077c8 HEX: #009ca6 HEX: #009a44 HEX: #64a70b HEX: #b5bd00 HEX: #898d8d
HEX: #ffcd00 HEX: #ff8200 HEX: #e4002b HEX: #df1995 HEX: #7d55c7 HEX: #00a9e0 HEX: #00aec7 HEX: #00b74f HEX: #97d700 HEX: #d0df00 HEX: #9ea2a2
HEX: #fae053 HEX: #ffa300 HEX: #f9423a HEX: #f57eb6 HEX: #9678d3 HEX: #5bc2e7 HEX: #6ad1e3 HEX: #6eceb2 HEX: #a4d65e HEX: #e2e868 HEX: #c7c9c7
Color harmonies – Examples
← Back to Contents
Cold colors Warm colors

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Basic design elements Typography
Typography
Our primary typeface is the corporate Allianz Sans Web (Primary) Arial (Fallback)
font Allianz Sans Web. We use three
font weights of Allianz Sans Web:
Allianz Sans Web Light

Allianz Sans Web Regular AaBbCc Handgloves AaBbCc Handgloves
ABC abc ( { @ & ? # + } ) 123456789
Allianz Sans Web Bold ABC abc ( { @ & ? # + } ) 123456789
Allianz Sans Web Light Arial Regular
However, Arial should be used as the
system‘s fallback font. In that case the
Light and Regular font weights of Allianz
Sans Web are replaced by Arial Regular.
AaBbCc Handgloves
ABC abc ( { @ & ? # + } ) 123456789
AaBbCcHandgloves
ABC abc ( { @ & ? # + } )123456789
Allianz Sans Web Regular Arial Bold
AaBbCc Handgloves
ABC abc ( { @ & ? # + } ) 123456789
Allianz Sans Web Bold

Sizes
Allianz Sans Web Light, Allianz Sans Web Regular & Bold, 22px, LH 26px
S
Regular & Bold, 60px, LH 68px

Allianz Sans Web Regular & Bold, 18px, LH 24px
XS - S
XXL Allianz Sans Web Bold, 16px, LH 22px

XS
Allianz Sans Web Light & Regular, 38px, LH 42px

XL
Not all content is equally important to users. When users
choose a larger text size, they want to make the content they
care about easier to read; they don’t always want every word
on the screen to be larger. For example, when users choose a
Allianz Sans Web Light & Regular, 34px, LH 38px large accessibility text size, Mail displays the subject and body
XL - M of the message in the large size but leaves the less important
text—such as the date and the sender—in a smaller size.
Allianz Sans Web Light & Regular, 30px, LH 36px Copytext: Allianz Sans Web Regular, 16px, LH 22px
L
Not all content is equally important to users. When users choose a
larger text size, they want to make the content they care about easier to
Allianz Sans Web Light & Regular, 26px, LH 30px read; they don’t always want every word on the screen to be larger. For
L-M example, when users choose a large accessibility text size, Mail displays
the subject and body of the message in the large size but leaves the less
important text—such as the date and the sender—in a smaller size.
Allianz Sans Web Light, Regular & Bold 24px, LH 28px Copy for small sized notepads: Allianz Sans Web Regular, 14px, LH 20px
M

Flexibility
The Responsive Web design frame- Sizing examples

work allows great flexibility while en-
suring consistency. The type sizes and
measurements within a content mo- 30px 30px 25px 25px 20px 20px
dule may be adjusted according to the
amount of content.
The three examples on the right show 30px

25px
possible variations in headline and 20px
copytext type sizes as well as different
paddings and spacings.
Width = Module width Width = Module width Width = Module width
Example 1 Example 2 Example 3

Headline: 38px (XL) Headline: 30px (L) Headline: 24px (M)
Copytext: 22px (S) Copytext: 18px (S-XS) Copytext: 16px (XS)

Guide to web typography
Today‘s web browsers widely support Considerations on which font to choose Tips for implementing web fonts
the use of custom web typography.
Nevertheless some aspects should be
considered. Use Allianz Sans Web font ... Minimize web font file size:
- to ensure optimal Allianz brand design for your site/app - Keeping the file size below or around 100kB is a good
general recommendation
- for prominent text elements like headlines and navigation
- Only implement font families, weights and glyphs that
It is recommended to use Allianz Sans Web for all digital are in actual use
platforms if possible
- Serve font files compressed for faster download
Use Arial ... - Use a tool like Font Squirrel generator to optimize web
font size
- as a fallback font for systems that cannot display the
Using our web font ensures Allianz Sans Web font
consistent and state-of-the-art - for very small text sizes to ensure legibility
Allianz brand experience for your
digital product. - if you need to maximize font performance for your site
Hint: Stick to one font family to

guarantee a clean and harmonious
design.

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Basic design elements Adaptive grid
Adaptive grid
The 12-column grid is the basis for

Allianz screen design - it is 950 pixels
wide. Each column is 70 pixels wide
with 10 pixels spacing in between and
5px margin on each side.
70px 70px 70px 70px 70px 70px 70px 70px 70px 70px 70px 70px
5px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 5px
950px

Adaptive grid
A responsive framework allows for your Desktop / Tablet (Landscape) Tablet (Portrait) Smartphone (Portrait)
designs to nicely nest on smaller devices
and expand fully on larger ones. By
designing responsively you ensure your
designs are working across all devices.
We recommend to set your breakpoints

at the following screen widths:
Big screens: 1200px and up

Desktop / Tablet (Landscape):
960px and up
Tablet (Portrait): 640px and up 310px
Smartphone (Portrait): 320px and up 5px 5px
310px 310px
5px 10px 5px
310px 310px 310px

5px 10px 10px 5px
950px

Adaptive grid for big screens
Breakpoint for big screens Desktop (Breakpoint 1200px)

A responsive framework allows for
your designs to expand fully on larger
screens.
We recommend to set a breakpoint at

1200px for bigger screen formats. The
12 columns grid adapts in proportion
to the width of the screen, i.e. all cont-
ent modules grow in proportion to the
width.
We recommend to adapt the size of

typographical elements proportionally
to the content modules. Keep in mind
to provide bigger picture formats i.e.
for stage elements.
Note this: Don‘t overload the site by

adding e.g. a fourth column to the
content. Keep it simple and readable
for the user. Breakpoint 1200px
310px 310px 310px

10px 10px
Breakpoint 960px
950px
5px 5px

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Basic design elements Icons, arrows & bullets
Illustrative icons
Icons play a central role in the Allianz Overview

design language and are used every-
where from interface elements to
notepads to product pages.
Illustrative icons can be used for icono-

graphic “narratives“ and to illustrate
certain products. Altogether there are
more than 180 icons available and they
are all downloadable from the GMMP at
www.marketing.allianz.com

Illustrative icons
Illustrative icons have different shapes, Icon sizes

however their longer side should not
exceed a square base of 4 different sizes:
small, medium, large and x-large.
26px
80px 90px
26px
Variable
80px
90px
Variable
Small on content Medium centered on a Large centered on a X-large adapts to content

navigation, tab colored background colored back-ground in on notepads, 2/3 and 1/3
stage in notepad groups 1/3 content teasers content teasers

Navigation icons
Navigation icons are used in two diffe- Icon sizes

rent styles and various sizes. Circle icons
are stand-alone navigation elements.
whereas freestanding icons are placed
on other navigation elements, such as
26px 26px
buttons and expanders.
20px
Social media icons in Indicators for additional Button icons on square Accordion icons to ex-
footer or social media information in forms (top) buttons (e.g. calendar, pand and collapse accor-
containers and tables (bottom) search) dion expanders

Information icons
Information icons are used in different Types of information icons

styles and various sizes.
26px 21px
Live validation icons Download icons next to Features table icons

next to input fields in links to indicate the type of in table cells to indicate
forms file available for download whether a feature is included

Arrows
Arrows are used in two different styles Icon sizes

and various sizes. Freestanding icons are
placed on other navigation elements,
such as buttons, slider handles and drop-
downs or are used as link indicators. 10px
26px 7px 20px
Whereas circle icons are only used as
hero link indicators.
96px
Carousel stage Content navigation Form elements Link indicators

to navigate through the when there are more than on sliders (top) or ahead of links (top) and
different teasers 7 elements to switch dropdowns (bottom) hero links (bottom)

Bullets
Bullets are used in two different styles. Icon sizes

Checkmark bullets are mainly used to list
benefits or features of a certain product,
whereas the dot bullet may be used for
any other or less important list element. 7px
20px
Checkmark bullet Dot bullet

to list benefits or features for any other or less
of a product important list element

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Basic design elements Buttons
Hero buttons
The hero button should only be used for Button sizes

primary actions. Hero buttons with link
indicators should not be used in combi-
nation with other buttons.
Default Hover/Pressed Disabled
Large
(with link 20px
indicator)
22px 10px 32px Text label: 22px Allianz Sans Web Regular
Large
Corner radius Icons and text labels
All buttons have a are always centered
corner radius of 3px vertically 32px 32px Text label: 22px Allianz Sans Web Regular
Medium
You have chosen another color
than blue as main interaction
color? Simply add a black gradient 28px 28px Text label: 18px Allianz Sans Web Regular
overlay and black stroke of 10%
opacity.
Small
22px 22px Text label: 16px Allianz Sans Web Regular

Standard buttons
Standard buttons should only be Button sizes

used for secondary actions.
Large
Medium
Small
Corner radius Text labels

corner radius of 3px vertically

Standard buttons with icons
Standard buttons can also be equipped Button sizes

with an icon to increase it‘s visibility. The
icons have a certain height depending
on the button size.
Large
20px
Medium
16px
Small
14px


Social media buttons
Social media buttons are equipped with Button sizes

the appropriate social media icon (e.g.
twitter) and use the corporate color.
The gradient and darker outline stroke Default Hover/Pressed Disabled

are created with a black gradient overlay
and black stroke of 10% opacity. Large
20px
Medium
16px
Small
14px


Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Basic design elements Links
Links
Default state Hover state Visited state Example
Hero links should only be used on 20px Background

colored teaser elements and Variable color from
9px
notepads. They have no hover or secondary color palette
visited state.
Rgb 255 255 255

Hex #FFFFFF
6px
Free links are intended for all 7px

free standing links on white or 20px
10px
gray background including link
lists. Download links should be 21px
equipped with a document icon,

illustrating the downloadable file Rgb 0 119 200 Rgb 25 157 215 Rgb 0 55 129
Hex #0077c8 Hex #199dd7 Hex #003781
format.
Text links are placed within a text

paragraph and don‘t use a link
indicator.
Rgb 0 119 200 Rgb 25 157 215 Rgb 0 55 129

Hex #0077c8 Hex #199dd7 Hex #003781

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Basic design elements Notepads
Notepads
Notepads have a square or rectangu- In-content use Use on image

lar (half-size) shape with an angled
bottom right corner and are available
in five sizes: large, large half-size, me-
dium, medium half-size and small.
They can be placed either on an

image or used directly as a container
in the content area. When placed on
an image, the notepad background
should be transparent (85% opacity).
Angled corner proportions:
Solid notepad Transparent notepad (85% opacity) Half-size notepad

Should be placed on a smooth part of the image
to avoid background noise and ensure legibility
88 % 12 %

Notepad colors
Notepad colors can be chosen from

the secondary colors palette, the re-
commended colors are marked with
a white dot on the right. Always use
a white font color to ensure legibility.
You can find guidance for the right
color contrast ratio on the following
page.
Secondary colors palette with the recommended colors marked with a white dot
Additionally notepads can also be
colored in white and use Allianz gray Notepad color
(#414141) font color. #ce0037
(in this example)
Font color
#414141
Font color
#ffffff
Notepad color
#ffffff
White notepad example

Colored notepad example

Guide to colors & accessibility
For people with visual disabilities, Opaque notepads Transparent notepads

ensure a sufficient contrast ratio
when using text on colored or trans-
parent backgrounds to meet WCAG
2.0 AA criteria (Web content accessi-
bility guidelines).
In order to make your content use-

ful and accessible to all users, you
should also take people with im-
pairments into consideration.
Use online verification tools to en-

sure a sufficient contrast ratio for
your text information.
Copytext Transparent Notepad
For normal text sizes use Place it on a smooth area of
minimum contrast ratio of 3:1 the image to avoid background
noise and ensure legibility
Headlines
For headline text sizes (18px+) use
minimum contrast ratio of 4.5:1

Notepad sizes
Large notepads can be placed either Large notepads

on an image or used directly as a cont-
ainer in the content area. When placed 310px
on an image, the notepad background
Category headline (optional)
They contain an optional category
headline, a headline, copytext or icon
and a hero link or hero button positi- Headline
Key message or product title
oned in the bottom left corner.
in one or two lines
310px
Copytext
Summarizes the key
features of the product
Large hero button
Example with copytext and hero button Example with icon and hero link
Hero link X-large icon

Size should be
adapted to content

Notepad sizes
Medium notepads can be placed either Medium notepads

on an image or used directly as a cont-
ainer in the content area. When placed 250px
on an image, the notepad background
Headline
They contain a headline, copytext and Key message or product title
a hero link or hero button positioned in in one or two lines
the bottom left corner.
Copytext
250px
Summarizes the key
features of the product
Hero Link
Example with hero link Example with hero button
Medium hero button

Notepad sizes
Half-size notepads are half the size Large half-size notepads Medium half-size notepads
of either a large or a medium note-
pad and can be placed either on an 310px 250px
image or used directly as a container
in the content area. When placed on
an image, the notepad background
should be transparent (85% opacity). Headline
150px 125px
in one or two lines
They contain a headline, optional co-
pytext and a hero link or hero button
Large hero button
positioned in the bottom left corner.
Example with headline only and hero button
Example with headline only and hero button
Medium hero button
Notepad proportions:
Headline
50 % Key message or product title
in one or two lines
Hero link
Example with headline, copytext and hero link
50 %
Example with headline only and hero link
Hero link
88 % 12 %

Notepad sizes
Small notepads can only be used in Small notepads

the content area and should not be
placed on images. They need to be
Headline
combined with either a square image
or an icon in order to form a teaser in one or two lines
group. There is no half-size version of
this notepad size.
Copytext
Summarizes the key
Furthermore small notepads can be features of the product
used as content navigation elements
for native apps. Hero link
150px
Teaser group with images Teaser group with icons

150px

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Design elements for online media Basic structure
Basic structure
Header Header
40px
40px
3 column 40px
Grid
Content area
Content area
10px
10px
110px
40px
Footer
Footer

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Creatingelements
Design responsive online media Header
for websites
Header
The header consists of the following Desktop / Tablet (Landscape)

elements: the Allianz logo, main navi-
gation, meta bar, page or site title and
the search bar.
It is recommended to use 16px as a

minimum typesize. If there are 4 or
less navigation points available, the
type can be enlarged to 20px.
Allianz logo Main navigation Search bar Meta bar Page/site title
Due to limited screen real estate on Holds the elements of the first or
smaller devices, the main navigation top navigation level
and search bar can only be accessed
by clicking on the appropriate menu
icon. Active states can be found on the
following pages.
Meta bar
Allianz logo
Menu icon
Access to the main navigation
Search icon
Access to the search function
Page/site title
Not displayed on smartphones

Design elements for online media Header
Header variations
For landing pages and related page Desktop / Tablet (Landscape)

types, certain elements like the page
title or the main navigation may be re-
moved (or reduced). In turn trust ele-
ments or contact information might be
added and placed prominently within
the header area.
Due to limited screen real estate on

smaller devices, the main navigation
and contact information can only be Main navigation Trust Contact Language
accessed by clicking on the appropriate Holds the elements of the first or elements information settings /
menu icon. Active states can be found top navigation level Meta bar
on the following pages.
Please note: Depending on the

Language settings / Meta bar
target audience, the header con-
tent of landing pages can vary Allianz logo
and contain different elements in Menu icon
order to better address the user. Access to the main navigation
Contact icon

Design elements for online media Header
Header variations
On the right are some examples, where Desktop / Tablet (Landscape)

even more elements are removed from
the header. The Allianz logo is the only
mandatory header element, which must
not be removed.
Main navigation Contact Language

Holds the elements of the first or information settings /
top navigation level Meta bar

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Creatingelements
Design responsive online media Main navigation
for websites
Main navigation
The main navigation holds the Desktop / Tablet (Landscape)

elements of the first or top
navigation level.
The flyout menu is used for the

second level navigation, which can be
structured into categories and may be
enhanced with icons. The menu will
push down all page contents below
the navigation.
Please note: The main navi-

gation may contain up to seven
main content sections of your site.
Place the most relevant items on the
left. The labels should match page
titles and contents and should not
exceed two words.
Also limit the categories in the

flyout menu to six and the items
per category to seven. Use mea-
ningful labels with two lines max.
Main navigation Second level navigation

Active and hover state Active and hover state

Design elements for online media Main navigation
Main navigation
On smartphones and tablets in por- Smartphone (Portrait)

trait mode, the main navigation can
be accessed via the typical menu
(hamburger) icon.
The second level navigation can be Menu icon (active)

expanded in the smartphone version Access to the main navigation
by tapping on the main navigation
Main navigation (collapsed)
elements. Access to the second level navigation
The menu will push down all page Main navigation (expanded)
contents below the navigation. Access to the second level navigation
Second level item

Default state
Second level item

Active and hover state
Category headline
Main navigation collapsed
Main navigation expanded

Design elements for online media Main navigation
Search active
On smartphones the search function Smartphone (Portrait)

can be accessed via the search icon.
Search icon (active)

Access to the main navigation
Search submit button
Default state Search bar
Clear search icon (active)
Auto-suggest pulldown
Active state

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Creatingelements
Design responsive online media Meta bar
for websites
Meta bar
The meta bar can be used to include Desktop / Tablet (Landscape)

meta navigation elements such as
language settings and login or sign up
links. For more than 4 navigation ele-
ments, the meta should be extended
to full browser width and can contain
up to two topical groups (left and
right aligned).
Login state
Pulldown (active)
Please note: Use the metabar to

implement gate features for diffe- Logout state
rent target groups, websites
or languages.
Don‘t use more than four items per
topical group to not overwhelm the
user metabar and the user.
Expanded state with more than 4 elements

Design elements for online media Meta bar
Meta bar
There is also a light version of the Desktop / Tablet (Landscape)

metabar available.
Login state
Pulldown (active)
Logout state
Expanded state with more than 4 elements

Design elements for online media Meta bar
Meta bar
On smaller devices the meta bar is Smartphone (Portrait)

always full width. Due to the limited
screen real estate, navigation ele-
ments may be combined into topical
groups and accessed within a sub-
menu.
Default state (dark version) Default state (light version)
Submenu item
Active state
Submenu item
Default state
Submenu active (dark version) Submenu active (light version)

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Creatingelements
Design responsive online media Content navigation
for websites
Content navigation
The content navigation enables users Desktop / Tablet (Landscape)

to jump directly to different sections
of the current page via anchor links. It
can be used as a sticky element and is
thus visible at the top of the page at all Page title
times. This helps the user to
orientate while scrolling. The content 26px
navigation will not be displayed on

smaller screen sizes. Users are
accustomed to scrolling and scanning
subheadings on their smartphones
and need their screen real estate for Begin of content page
displaying content. Active and hover state Default state Icon and title
are left aligned
Please note: If more than seven

navigation elements are needed,
the content navigation bar can
be equipped with arrow buttons
on either side to access the other
navigation elements.
Arrow button Arrow button

Disabled state Default state

Design elements for online media Content navigation
Breadcrumb
The breadcrumb navigation gives the Desktop / Tablet (Landscape)

user another way to keep track of his/
her current position on a complex
website.
Breadcrumbs provide a trail for the

user to follow back to the starting or
entry point of a website. An arrow icon
serves as a hierarchy separator.
30px End of header bar
40px 10px 10px
Begin of content navigation
Please note: Use consistent labels

that match your main and se-
condary navigation levels.
End of header bar
30px
40px 10px 10px

Begin of content area

Tab bar
A tab bar can be used to switch Desktop / Tablet (Landscape)

between different content views on
a single page.
Steps spaced evenly
Active state Hover state Default state Tab labels are centered
vertically and horizonzally
Steps spaced evenly
Active state Default state Tab labels are centered

vertically and horizonzally

Accordion
An accordion list can be used to Desktop / Tablet (Landscape)

structure a list of contents and offer
in-depth information to users
depending on their needs and
interests. 30px
Accordion title
20px 22px
Expander headline 22px

22px
20px
22px
20px
20px
Expander Icon
Expanded state
30px
2px Dividerline Expander Icon

Collapsed state

Accordion
An accordion list can be used to Smartphone (Portrait)

structure a list of contents and offer
in-depth information to users
30px
depending on their needs and
Accordion title
interests. 20px
20px
Expander Icon
Collapsed state
20px
Expander Icon
Expanded state
20px
30px
2px Dividerline

Progress bar
For complex interaction processes Desktop / Tablet (Landscape)

with multiple steps a progress bar can
be integrated to offer orientation for
the user.
Page title
Steps spaced evenly
On small screens the progress bar is
100px 100px
reduced to a symbolic highlight of the
current step. The step’s label should
also display the number of the current
step in relation to the total number of
steps (this information will be hidden
on devices with a bigger screen, Step already done Active step Inactive / upcoming step
where the normal progress bar can be
displayed).
Page title
40px
Active step
center aligned
Step label including current step number

40px in relation to the total number of steps in brackets

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Creatingelements
Design responsive online media Stage
for websites
Carousel stage
The carousel stage should primarily be Desktop / Tablet (Landscape)

used for displaying news articles and
stories. Each story teaser consists of a
large, authentic picture and a descrip-
tive notepad with a hero link or but-
ton. There are arrow buttons on each
side to navigate through the teasers as
well as a bullet navigation on the bot-
tom, which indicates the active page
of the carousel. Centrally
aligned
Please note: With carousel stages

only the first item will usually be
noticed by users, whereas the sub-
sequent, hidden stories are hardly
ever seen or clicked.
Variable Variable
20px 10px
Wide stage example
Medium notepad with head- Active bullet Inactive bullet Authentic imagery Navigation arrow
line, copytext and hero link

Design elements for online media Stage
Carousel stage
Carousel stage teasers can either use Desktop / Tablet (Landscape)

the full width or be split into two ele-
ments using a 1:3 width ratio.
Centrally
aligned
10px
Variable
Split stage example
Authentic imagery Active bullet Inactive bullet Small notepad with head- Navigation arrow
line, copytext and hero link

Feature stage
The feature stage should mainly be Desktop / Tablet (Landscape)

used to present products or product
categories. Each product teaser
consists of a large, authentic picture
and a descriptive notepad with a hero
link. A tab navigation on the left allows
users to browse through the different
product teasers.
Please note: The feature stage has

the advantage that all stage items
can be previewed to the user by
showing the product title and pro-
duct icon.
Inactive tab with free- Active tab with freestanding icon and Authentic imagery Large notepad with cate-
standing icon and title on a title. Highlight color should be the same gory headline, headline,
white box with 85% opacity color as the notepad with 85% opacity copytext and hero link

Carousel & feature stage
On smaller screens, stage sizes and Smartphone (Portrait)

proportions change to meet the de-
vice‘s reduced screen estate.
Carousel stage: Only the small no-

tepad should be used and centered
within the stage area. We recommend
implementing swipe detection for
touch-based devices to allow users Centrally
to navigate through the carousel‘s aligned
contents in addition to using arrows.
Feature stage: Only the small or me-

dium notepad size should be used.
The tab navigation displays icons only.
Carousel stage Feature stage
Navigation arrow Active bullet Authentic imagery Active tab Inactive tab Medium notepad
without title, without title, with category headline, head-
icon only icon only line, copytext and hero link
Active bullet

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Design elements for online media Teaser & container
Service (Contact) box
The client service box is the main Across all devices

interaction platform between users
and Allianz agents. It can be placed
on any page or platform type and 20px
encourages the user to get in touch
20px
with Allianz.
It is recommended to use either dark

gray or Allianz blue as a background 30px
color. But any color of the secondary
color palette can be used as long as it
ensures a harmonious color guidance 20px
on the website and a good color con-
trast.
30px
30px
Service box Allianz blue Service box dark gray

Big image teaser
20px
20px
20px
20px
30px
Medium Notepad with headline, Authentic imagery Benefits overview with headline,
copytext and hero link copytext, bullet points and hero button

Image teaser
Use content teaser elements to link to Across all devices

content articles from a homepage or
index page.
30px
20px
30px
30px
30px
Containers are aligned
Text link Medium hero button Download link

Image teaser

index page.
30px 30px
20px 20px
20px
30px
30px
30px

Breakpoint for smartphones, where the
image is cropped and the text breaks to fit
the smaller screen size.

Icon teaser

index page.
Large Icon
(90 x 90px)
center
aligned
30px
20px
30px
30px

Link list

index page.
30px
20px
20px
30px
30px Buttons are aligned


Related teaser
20px
15px
20px
30px
Medium icon (80 x 80px)

center aligned 30px

Container (3 columns)
20px
20px
20px
Variable
20px
30px
Features overview with subheadline, Medium notepad with headline,

copytext and bullet points copytext and hero link

20px
30px
20px
Features overview with headline, Medium notepad with headline,

copytext and bullet points copytext and hero link


Variable
10px
M Standard button M Hero button
L Standard button
15px
L Hero button

Togglebox
Active toggle Accordion

The togglebox is replaced by an
accordion on smartphones
30px
Variable
10px
30px
20px
Continues on the next page

Togglebox
10px
30px
20px
30px
10px
30px
30px
30px
30px

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Creatingelements
Design responsive online media Form elements
for websites
Form elements
Forms are an important and primary Desktop / Tablet (Landscape)

feature for customers to get in contact
with Allianz. Therefore, forms shall be
as clear as possible, easy to use, and
well structured. The purpose of the Label Default state Active state
form should be clearly recognizable.
20px
30px
20px
30px
10px

Design elements for online media Form elements
Form elements
We recommend to only include the Smartphone (Portrait)

most relevant fields when creating a
form. Users should not be bothered
with too many fields – the goal is to
get users to complete the process.
20px
10px
Default state Active state
20px
40px
40px
10px

Live validation
Mandatory form fields are generally Desktop / Tablet (Landscape)

not marked as such – consider
removing all fields that are not
mandatory as they might not be
relevant.
However, mandatory fields which are

not filled in will be highlighted in red.
When using live validation, each field
is validated directly after user input
using the elements and messages Loading animation
displayed on the right.
Success icon
Error icon
Variable
Width = Form width

Headline optional Error message is always positioned
below the respective form element

Live validation
Loading animation
Success icon
Error icon
Error message is always positioned

Variable below the respective form element
Width = Form width

Alerts & notifications
Variable
Variable
Variable
Width = Form width
Headline optional

Alerts & notifications
Variable
Headline optional
Variable
Variable
Width = Form width

Indicators
Indicators are used to provide helpful Desktop / Tablet (Landscape)

information within complex forms in
a discrete, on-demand way.
Info icon (default)
Indicators can be activated by clicking
the information icon or can be inser-
ted on field focus. Info icon (active)
Variable
Width = Column width
Info icon (active)
Variable
Close icon (active)
Indicator for use in a table Info icon (default)

Indicators
Info icon (default)
Info icon (active)
Variable
Variable
Close icon (active)
Scrollbar
Indicator for use in a table

Calendar
Use the calendar input pattern to Desktop / Tablet (Landscape)

provide a quick and convenient way
for picking a calendar date.
Calendar icon (default)
Calendar icon (active)
Close icon (active)
Selected date

Calendar
Calendar icon (default)
Calendar icon (active)
Close icon (active)
Selected date

Sliders
Sliders offer users a haptic and easy Across all devices

way for data input. This input type
feels especially “native“ on touch-
based devices.
Left label is left aligned
with the marker
Spaced evenly
Right label is right aligned

with the marker
Labels in between
are center aligned with the markers
14px min
Selected range
Slider handle

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Creatingelements
Design responsive online media Tables
for websites
Basic table
Tables are used to display information Desktop / Tablet (Landscape)

in a structured way. Tables usually
consist of a header and a body.
While the body may be scrollable,
the header must remain visible. Table title
Header consists of labels

for each column and
remains visible during
scrolling
Scrollbar (optional)
Active row
Body consists of columns

and rows of table cells

Design elements for online media Tables
Basic table
Read more about optimized table- Smartphone (Portrait)

design for smartphones on page 99ff.
Table title
Header consists of labels
for each column and
remains visible during
scrolling
Aligned with first title line

Active row
Scrollbar (optional)

Feature table
A feature table can be used to com- Desktop / Tablet (Landscape)

pare different products and offer an
overview. Feature tables also consist
of a header and a body, however the
body may include category headlines Table title Column title
to structure the content.
Row title
Optional category headline

Feature table
On small screens, the table design has Smartphone (Portrait)

to be adjusted to deal with the limited
space. As a result the body is equipped
with a scrollbar to allow a horizontal
browsing of the different products, Table title
while the row titles remain visible.
Read more about optimized table de-
sign for smartphones on pages 99ff.
Column title
Row title consists of labels

for each row and remains
visible during scrolling
Aligned with first title line

Scrollbar

Guide to responsive table design
1. Hide less important columns

in order to fit a table‘s content onto a smartphone screen and list all cells without using a scrollbar

2. Flip table orientation

and make the columns scrollable horizontally in order to have limitless screen estate to display all table columns

3. Keep table structure

for feature tables and just make the columns horizontally scrollable, while the labels stay visible (sticky behaviour)

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Creatingelements
Design responsive online media Footer
for websites
Footer
The footer can be used to display the Desktop / Tablet (Landscape)

top level navigation or a selection of
important links. These links are
grouped into categories, which in Meta links
turn are divided into rows of three
categories max. The top bar is holding
Social media
meta links and social media icons. The Category title icons
bottom bar is reserved for copyright
information.
Links
On the right is an example with six
categories divided into two rows of
three.
Please note: Use meaningful group

labels to ensure a quick understan-
ding of each section. Try not to use
more than seven items per section.
Copyright information
End of page

Design elements for online media Footer
Footer
The footer can also be displayed in a Desktop / Tablet (Landscape)

darker color. On the right is an example
with three categories divided into one
row of three. Meta links
Social media
Category title icons
Links
End of page

Design elements for online media Footer
Footer
On smartphones, due to the limited Smartphone (Portrait)

screen estate, the top level navigation
is dropped entirely. Meta links are
displayed in its place and the top bar
contains language options and a back-
to-top anchor link. The bottom bar
remains the same and is reserved for
copyright information. Active link
Back-to-top anchor link
Meta bar
10px min
44px
Meta links
44px
End of page End of page

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Creatingelements
Design responsive online media Partnerships
for websites Header
Partnerships – hosted by Allianz
Partnerships in digital media hosted by Examples: All images are illustrations and theoretical examples
Allianz follow the standard website
specifications, but with the addition of the
partner’s logo.
Some rules:
1. The partner logo is always positioned
at the top right corner of the header. The
partner logo might be used in a reduced Desktop Mobile Native app
form to fit on a small screen size (i.e. smart-
phone portrait view).
2. The size of the partner logo is flexible

and depends on its proportions and layout.
Generally the partner logo must appear
smaller than the Allianz logo.
3. For native apps the partner logo is

prominently placed within the content
area.

Creatingelements
Design responsive online media Partnerships
for websites Header
Partnerships – hosted by partner
Partnerships in digital media hosted by Examples: All images are illustrations and theoretical examples
partner follow these specifications:
Option 1:
Use this branding option for a low amount
of copy.
Some rules:
1. Please always use the master artwork Desktop Mobile Native app
for the Allianz partnership logo – provided
for download on GMMP.
Option 2:
2. The positioning and size of the Allianz In case more copy is needed, please use this option with notepad.
partnership logo is flexible and can be
determined together with the partner.
3. “Powered by“ within the partnership logo

can be translated into the local language
and respectively adapted to the nature of
the relationship (i.e. “In cooperation with“).
4. For individual adaptation of the Allianz

partnership logo please contact GMMP. Desktop Mobile Native app

Contents

42 Basic structure
48 Main navigation
06 Logo 52 Meta bar
32 Links 101 Footer
108 Template List
109 Contact

Online Styleguide Template list
List of design templates
Basic design elements

1. Logo 3. Content navigation & tabs Form_Elements.psd
Logo.psd Accordion.psd Form_Elements_Mobile.psd
Logo_Mobile.psd Accordion_Mobile.psd Sliders.psd
2. Icons, arrows and bullets Breadcrumb.psd 9. Progress bar
Bullets.psd Breadcrumb_Mobile.psd Progress_Bar.psd
Icons.psd Tab_Bar.psd Progress_Bar_Mobile.psd
3. Buttons Tab_Bar_Mobile.psd 10. Validation & indication
Buttons.psd Content_Navigation.psd Alerts.psd
4. Links 4. Content stage Alerts_Mobile.psd
Links.psd Content_Stage_Carousel.psd Error_Messages.psd
5. Notepads Content_Stage_Carousel_Mobile.psd Error_Messages_Mobile.psd
Notepad_Teaser.psd Content_Stage_Tabs.psd Indicators.psd
Content_Stage_Tabs_Mobile.psd Indicators_Mobile.psd
All measurements within this guide Design elements for online media 5. Footer Live_Validation.psd
refer to containers, which include
Footer.psd Live_Validation_Mobile.psd
variable content like icons, headlines, 1. Main navigation
copytext, lists, labels, images and so Footer_Mobile.psd 11. Tables
Header.psd
on. Every other dimension can be 6. Container Basic_Table.psd
found within pixel-perfect Photoshop Header_Mobile.psd
Container.psd Basic_Table_Mobile.psd
templates listed here. 2. Content teaser
Container_Mobile.psd Feature_Table.psd
Content_Teaser.psd
7. Servicebox Feature_Table_Mobile.psd
Content_Teaser_Mobile.psd
Servicebox.psd 12. Partnerships
8. Form elements Logo_Partnerships.psd
Calendar.psd Logo_Notepad_Partnerships.psd
Calendar_Mobile.psd
Contact
Any questions?
Do you have specific questions relating to our

design? We are always happy to help. Please
contact Allianz SE Group Market Management.

07A Online Style Guide 1.2

Uploaded by

Document Information

Original Title

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

07A Online Style Guide 1.2

Uploaded by

Copyright:

Available Formats

7A Desktop

Release 1.0 – Version 1.2, 2015

03 Page types 42 Design elements for online media

Allianz Style Guide 7A: Online 2

Home Index Content

Allianz Style Guide 7A: Online 3

Home – Responsive behavior

Desktop / Tablet (Landscape) Smartphone (Portrait)

With image Without image Page continues

Page continues Page continues

Images may be hidden on

Allianz Style Guide 7A: Online 4

03 Page types 42 Design elements for online media

Allianz Style Guide 7A: Online 5

Desktop / Tablet (Landscape)

Desktop / Tablet (Landscape)

Native App example

Allianz Style Guide 7A: Online 6

03 Page types 42 Design elements for online media

Allianz Style Guide 7A: Online 7

Color & color harmonies

Color is used to guide the user and to Primary colors

Text Call-to-action Highlight Success Error

Allianz Style Guide 7A: Online 8

Color harmonies – Examples

Cold colors Warm colors

Allianz Style Guide 7A: Online 9

03 Page types 42 Design elements for online media

Allianz Style Guide 7A: Online 10

Allianz Sans Web Light

Allianz Sans Web Regular Arial Bold

Allianz Style Guide 7A: Online 11

Regular & Bold, 60px, LH 68px

XXL Allianz Sans Web Bold, 16px, LH 22px

Allianz Sans Web Light & Regular, 38px, LH 42px

Allianz Style Guide 7A: Online 12

The Responsive Web design frame- Sizing examples

The three examples on the right show 30px

Width = Module width Width = Module width Width = Module width

Example 1 Example 2 Example 3

Allianz Style Guide 7A: Online 13

Guide to web typography

Hint: Stick to one font family to

Allianz Style Guide 7A: Online 14

03 Page types 42 Design elements for online media

Allianz Style Guide 7A: Online 15

The 12-column grid is the basis for

Allianz Style Guide 7A: Online 16

We recommend to set your breakpoints

Big screens: 1200px and up

310px 310px 310px

Allianz Style Guide 7A: Online 17

Adaptive grid for big screens

Breakpoint for big screens Desktop (Breakpoint 1200px)

We recommend to set a breakpoint at

We recommend to adapt the size of

Note this: Don‘t overload the site by

310px 310px 310px

Allianz Style Guide 7A: Online 18

03 Page types 42 Design elements for online media

Allianz Style Guide 7A: Online 19

Icons play a central role in the Allianz Overview

Illustrative icons can be used for icono-