Upload
others
View
14
Download
1
Embed Size (px)
Citation preview
Last Update 03/25/20
DigitalBrand Guideline
200 Q1 | Digital Marketing Team
Last Update 03/25/20
DigitalBrand Guideline
200 Q1 | Digital Marketing Team Table of Contents
The AMMEX Logo
Typography
Our Colors
UI Elements
Imagery
........3
........7
......13
.......xx
.......17
HEX Code: #007934
RGB: 4 122 64
CMYK: 97 0 48 52
HEX Code: #03528b
RGB: 3 82 139
CMYK: 98 41 0 45
The LogoWhen people hear the word “logo”, they usually just
think of one version of a logo - known as the primary
logo. The primary logo is what’s used in most
circumstances and is easily recognizable and
the most familiar. Therefore, you can think of the
primary logo as the official stamp of your brand.
This is the primary logo for AMMEX . Being that this
will be the most visible and most used version of the
brand, the design elements described in this guide
are to be adhered to at all times.
This is to ensure consistent branding across all
marketing collateral.
Primary logo
This is our primary logo colourway,
and it should only be used with white,
bright or light background colors or
photography. Never use this logo when
any of the two main colors are lost by
the background element.
Black Logo on Light BackgroundOn single color compositions with light
backgrounds, use the AMMEX logo in
one color black. Always exercise
prioritizing contrast and visibility when
choosing which version of AMMEX logo
to use for designs and compositions.
White Logo on Dark BackgroundUse this logo version on dark
backgrounds and when the main
theme of the composition or photography
is leaning towards dark tones to maintain
high contrast and branding visibility.
White Logo on AMMEX GradientUse the one-color pure white logo
when you have to place the logo
over the official and approved
AMMEX blue gradient. This version
provides the best contrast and
visibility for the brand.
Typography
Exclusion Zone
To determine the amount of space needed around the logo, the size of the letter “A” on the AMMEX logo is used as the guide to define the areas where no other elements from other text or other logos are allowed to cross over. This area is holy ground for the AMMEX logo.
Typography
Minimum Size
Minimum logo size is at
150px wide
125px
125px
125px
125px
125px
125px
125px
125px
Logo Proportions
Y
20° shear angle
X45° cut angle
Y x 2.2
X x 3
In order to protect the main visual cue for our brand which is the logo, and to be able to detect alterations or attempts at copying the logo, please use the illustration on the right as guide to following ratios and proportions of the elements of the AMMEX logo.
Never change these proportions.
Typography
Do not place the logo
on backgrounds with
low contrast and busy
patterns that cause
Do not put an outline
on the logo.
Do not alter the
official AMMEX logo
colors.
Do not modify or
recreate the provided
logo artwork.
Do not squash or
stretch the
proportions of the
AMMEX logo even on
Do not layer any
content on top of the
logo.
Lorem Ipsum Dolor
Do not change
AMMEX logo
orientation or rotation.
Do not use
transitioning or
gradient colors on any
part of the logo.
Do not in any way
alter or skew the
AMMEX logo.
Logo Don'ts
Typography
Typography
AAaa
Arial is our corporate typeface, along with the other
member of the Arial font family, it should be used in
all instances where typography is required. This
classic font is readily and freely available on all OS
and device platforms.
Typography should not be overlooked as a key
element whenever there is a need to create designs
for brand communication.
It is important to adhere to the leading, tracking and
text arrangement specified in this document to help
achieve brand consistency all throughout.
The Font Family
Arial Regular Lorem Ipsum 1234567890abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Arial Bold Lorem Ipsum 1234567890abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Arial Bold Italic Lorem Ipsum 1234567890abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Arial Black Lorem Ipsum 1234567890abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Typography
Header 3 styling can be applied on titles inside the body section of the page. 21pt | 1.75em | 28px 1pxRegular 25.6
font size kerningfont weight leadingH3
Lorem Ipsum Dolor Sit Amet Adipiscing Elit
Proin volutpat consequat tellus, porta convallis massa rutrum id. Proin volutpat consequat tellus, porta conva.
Class aptent taciti
font size @
14.4pt | 1.2em | 19.2px
kerning @ 1px
Web Typography Rules
Header 1 styling will be used for a page's main title. There can be only one H1 per page. 36.8pt | 2.3em | 49.06px 1pxRegular 50
font size kerningfont weight leadingH1
Lorem Ipsum Dolor Sit Amet Adipiscing Elit
Proin volutpat consequat tellus, porta convallis massa rutrum id. Proin volutpat consequat tellus, porta conva.
font size @ 36.8pt | 2.3em | 36.8px
leading @ 50pt
kerning @ 1px
Header 2 styling will be mostly every time the H1 has subtext or added description right after it. 14.4pt | 1.2em | 19.2px 1pxRegular 25.6
font size kerningfont weight leadingH2
Lorem Ipsum Dolor Sit Amet Adipiscing Elit
Proin volutpat consequat tellus, porta convallis massa rutrum id. Proin volutpat consequat tellus, porta conva.
font size @
14.4pt | 1.2em | 19.2px Leading @ 25.6pt
kerning @ 1px
General text style for body content. Paragraphs and other text contained in the body should default to this style.
12pt | 1em | 16px 1pxRegular 28font size kerningfont weight leadingBody
Sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ligula justo, ornare eu consequat ut, mattis sed nisi. In rutrum ipsum quam. Nunc ut pharetra lorem, sit amet suscipit elit. Suspendisse tempor suscipit eros. Vivamus nec leo quis odio pretium venenatis. Nunc tempor vel lacus at bibendum. Integer posuere consectetur nisl, eget interdum nulla tincidunt at.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. In eget massa lorem.
Suspendisse potenti. Cras luctus, nisi id tempus dapibus, metus
diam maximus nisl, ac efficitur sapien enim sit amet orci. Fusce
tristique tempus magna eu vestibulum. Aliquam pretium, dolor
consequat aliquet posuere, risus turpis ullamcorper justo, pretium
tincidunt turpis mi vel lectus. Phasellus in eros ac eros porta
aliquet eu at nibh.
Nullam interdum interdum mauris, eget euismod ligula vulputate
quis. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nunc vulputate dignissim augue
eget condimentum.
font size @ 12pt | 1em | 16px
Leading @ 28px
kerning @ 1px
Typography
Use this styling whenever there is a quote being highlighted or used as a stand alone or title. 14.4pt | 1.2em | 19.2px 1pxRegular 19.2
font size kerningfont weight leadingQuote
- Case Study #3 -
“Our glove sales have tripled since switching to AMMEX, and we expect
substantial growth.”
– Jeff Michaelson (Rainier Welding Supplies – Owner)
font size @
14.4pt | 1.2em | 19.2px Leading @ 19.2px
kerning @ 1px
General text style for body content. Paragraphs and other text contained in the body should default to this style.
12pt | 1em | 16px 1pxRegular 28font size kerningfont weight leadingBody
Sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ligula justo, ornare eu consequat ut, mattis sed nisi. In rutrum ipsum quam. Nunc ut pharetra lorem, sit amet suscipit elit. Suspendisse tempor suscipit eros. Vivamus nec leo quis odio pretium venenatis. Nunc tempor vel lacus at bibendum. Integer posuere consectetur nisl, eget interdum nulla tincidunt at.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. In eget massa lorem.
Suspendisse potenti. Cras luctus, nisi id tempus dapibus, metus
diam maximus nisl, ac efficitur sapien enim sit amet orci. Fusce
tristique tempus magna eu vestibulum. Aliquam pretium, dolor
consequat aliquet posuere, risus turpis ullamcorper justo, pretium
tincidunt turpis mi vel lectus. Phasellus in eros ac eros porta
aliquet eu at nibh.
Nullam interdum interdum mauris, eget euismod ligula vulputate
quis. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nunc vulputate dignissim augue
eget condimentum.
font size @ 12pt | 1em | 16px
Leading @ 28px
kerning @ 1px
Typography
Use this styling whenever there is a quote being highlighted or used as a stand alone or title. 14.4pt | 1.2em | 19.2px 1pxRegular 19.2
font size kerningfont weight leadingQuote
- Case Study #3 -
“Our glove sales have tripled since switching to AMMEX, and we expect
substantial growth.”
– Jeff Michaelson (Rainier Welding Supplies – Owner)
font size @
14.4pt | 1.2em | 19.2px Leading @ 19.2px
kerning @ 1px
Items to Watch Out for Typesetting
1
In typography, “rag” refers to the irregular or
uneven vertical margin of a block of type.
Usually it’s the right margin that’s ragged (as in
the flush left/rag right setting), but either or
both margins can be ragged.
When setting type with a ragged margin, pay
attention to the shape that the ragged line
endings make. A good rag goes in and out from
line to line in small increments. A poor rag
creates distracting shapes of white space in the
margin. Don’t rely on the line breaks generated
by your software application; get in the habit of
spotting and correcting poor rags by making
manual line breaks or by editing your copy.
RAGS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum pharetra neque, ut blandit libero vulputate ut. In ullamcorper posuere ipsum quis efficitur. Aliquam lobortis dui in erat venenatis eleifend. Nulla faucibus, neque sed tincidunt finibus, nunc odio efficitur sapien, vel malesuada tellus erat dapibus velit. Nullam erat nisl, facilisis nec finibus et, facilisis vitae enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum pharetra neque, ut blandit libero vulputate ut. In ullamcorper posuere ipsum quis efficitur. Aliquam lobortis dui in erat venenatis eleifend. Nulla faucibus, neque sed tincidunt finibus, nunc odio efficitur sapien, vel malesuada tellus erat dapibus velit. Nullam erat nisl, facilisis nec finibus et, facilisis vitae enim.
Nulla dapibus, ligula at rhoncus tempor, ante urna feugiat dui, condimentum tempus lacus lectus vel mi. Integer mollis iaculis laoreet. Integer feugiat elementum nunc, eget porttitor nisi faucibus vitae. Maecenas vehicula mi et efficitur egestas. Donec vulputate risus arcu, sodales eleifend tellus ultricies a.
Nulla dapibus, ligula at rhoncus tempor, ante urna feugiat dui, condimentum tempus lacus lectus vel mi. Integer mollis iaculis laoreet. Integer feugiat elementum nunc, eget porttitor nisi faucibus vitae. Maecenas vehicula mi et efficitur egestas. Donec vulputate risus arcu, sodales eleifend tellus ultricies a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent nulla
Having the right amount of characters on
each line is key to the readability of your
text. It shouldn’t merely be your design that
dictates the width of your text, it should also
be a matter of legibility.
The optimal line length for your body text is
considered to be 50-60 characters per line,
including spaces (“Typographie”, E. Ruder).
Other sources suggest that up to 75
characters is acceptable.
Morbi auctor, elit id consequat vehicula, velit lorem dictum
purus, consectetur venenatis eros neque vitae risus. Donec
ullamcorper, lectus a luctus scelerisque, lectus ligula interdum
augue, vitae elementum risus libero id metus. Aenean aliquet
quam augue, at bibendum ante accumsan consectetur.
Maecenas sit amet auctor metus.
In ut vestibulum eros. Mauris euismod dictum risus, sed lacinia odio tempor
eu. Sed luctus nulla non erat faucibus, sed accumsan libero erat faucibus
sollicitudin.
Donec venenatis magna sit amet egestas finibus. Integer nec quam venenatis, lacinia tellus in,
faucibus dui. Sed a tortor sollicitudin, aliquam libero eu, fermentum ligula. Fusce non sodales
est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac aliquam
libero eu, fermentum turpis egestas.
50 characters 60 chars 75 chars
Readability: Optimal Line Length
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA1
2
A widow is a very short line – usually one word,
or the end of a hyphenated word – at the end of
a paragraph or column. A widow is considered
poor typography because it leaves too much
white space between paragraphs or at the
bottom of a page. This interrupts the reader’s
Widows
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum pharetra neque, ut blandit libero vulputate ut. In ullamcorper posuere ipsum quis efficitur. Aliquam lobortis dui in erat venenatis eleifend. Nulla faucibus, neque sed tincidunt finibus, nunc odio efficitur sapien, vel malesuada tellus erat dapibus velit. Nullam erat nisl, facilisis nec finibus et, facilisis vitae enim.
Quisque sagittis feugiat arcu vitae venenatis. Praesent lacinia semper lacus. Vestibulum finibus sem vel ligula pellentesque, et scelerisque diam pharetra. Pellentesque tincidunt dui eu metus aliquet, in eleifend diam elementum. Praesent leo eros, vulputate eu arcu in, semper tincidunt orci. Duis faucibus lacus vitae massa interdum eleifend. Fusce vitae rutrum est. Praesent eleifend lacus.
3
Like a widow, an orphan is a single word, part
of a word or very short line, except it appears
at the beginning of a column or a page. This
results in poor horizontal alignment at the top
of the column or page. The term “orphan” is not
as commonly used as “widow,” but the concept
Orphans
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum pharetra neque, ut blandit libero vulputate ut. In ullamcorper posuere ipsum quis efficitur. Aliquam lobortis dui in erat venenatis eleifend. Nulla faucibus, neque sed tincidunt finibus, nunc odio efficitur sapien, vel malesuada tellus erat dapibus velit. Nullam erat nisl, facilisis nec finibus et, facilisis vitae enim.
Quisque sagittis feugiat arcu vitae venenatis. Praesent lacinia semper lacus. Vestibulum finibus sem vel ligula pellentesque, et scelerisque diam pharetra. Pellentesque tincidunt dui eu metus aliquet, in eleifend diam elementum. Praesent leo eros, vulputate eu arcu in, semper tincidunt orci. Duis faucibus lacus vitae massa interdum eleifend. Fusce vitae rutrum est. Praesent eleifend lacus.
Typography
Hex
#FF6000
Hex
#004A97
Hex
#636363
Hex
#C8C8C8
Hex
#EDEDED
Hex
#FFFFFF
R 0
G 74
B 151
R 255
G 96
B 0
R 125
G 125
B 125
R 200
G 200
B 200
R 234
G 234
B 234
R 255
G 255
B 255
AMMEX Blue
AMMEX Orange
AMMEX Dark Grey
AMMEX Light Grey
AMMEX Base GreyWhite
Our Colors
Hex
#004A98
Hex
#002E6D
Hex
#005CB9
R 0
G 74
B 151
R 0
G 59
B 113
R 0
G 74
B 151
AMMEX Gradient
40%
Secondary Colors*
P r i m a r y / B a s e B l u e ( # 0 0 4 A 9 8 )
# 0 0 5 C B 9 # 0 0 3 B 7 1 # 0 0 2 E 6 D # 0 1 2 7 4 F
P r i m a r y / B a s e O r a n g e ( # F F 6 0 0 0 )
# E C 8 E 3 1 # F F 5 F 0 0
P r i m a r y / B a s e G r e e n ( # 0 0 6 9 3 7 )
# 0 0 7 9 3 4
L i g h t G r a y ( # E 6 E 7 E 8 )
L i g h t G r a y ( # C 8 C 8 C 8 )
D a r k G r a y ( # 6 3 6 3 6 3 )
# 9 3 9 5 9 8 # 4 3 4 3 4 5
25%
horizontal gradient
* for alternative CMYK and RGB values and usage see next page “Color Themes”
Colors
Color Themes
#004a98 – Dark | Blue | Primary
#���
255 • 255 • 255
0 • 0 • 0 • 0
(print text)
#e6e7e8
230 • 230 • 231
8 • 6 • 6 • 0
(digital text)
#�5f00
255 • 95 • 0
0 • 77 • 100 • 0
(cta - call to action)
#01274f – Dark | Blue | Footer Use Only
#���
255 • 255 • 255
0 • 0 • 0 • 0
(print text)
#e6e7e8
230 • 230 • 231
8 • 6 • 6 • 0
(digital text | primary)
#939598
147 • 149 • 152
45 • 36 • 35 • 1
(digital text)
#�5f00
255 • 95 • 0
0 • 77 • 100 • 0
(cta - call to action)
#939598 – Medium | Secondary modules
#���
255 • 255 • 255
0 • 0 • 0 • 0
(print text)
#e6e7e8
230 • 230 • 231
8 • 6 • 6 • 0
(digital text | primary)
#434335
67 • 67 • 69
68 • 61 • 57 • 43
(digital text | secondary )
#�5f00
255 • 95 • 0
0 • 77 • 100 • 0
(cta - call to action)
#���
255 • 255 • 255
0 • 0 • 0 • 0
(print text)
#939598
147 • 149 • 152
45 • 36 • 35 • 1
(digital text)
#�5f00
255 • 95 • 0
0 • 77 • 100 • 0
(cta - call to action)
#004a98
255 • 95 • 0
0 • 77 • 100 • 0
(digital text | secondary)
#434345
67 • 67 • 69
68 • 61 • 57 • 43
(digital text | primary)
#e6e7e8 – Light | Secondary module 01
#���
255 • 255 • 255
0 • 0 • 0 • 0
(print text)
#939598
147 • 149 • 152
45 • 36 • 35 • 1
(digital text)
#�5f00
255 • 95 • 0
0 • 77 • 100 • 0
(cta - call to action)
#004a98
255 • 95 • 0
0 • 77 • 100 • 0
(digital text | secondary)
#434345
67 • 67 • 69
68 • 61 • 57 • 43
(digital text | primary)
#��� – Light | Secondary module 02
Colors
#939598 – Medium | Secondary modules
#���
255 • 255 • 255
0 • 0 • 0 • 0
(print text)
#e6e7e8
230 • 230 • 231
8 • 6 • 6 • 0
(digital text | primary)
#434335
67 • 67 • 69
68 • 61 • 57 • 43
(digital text | secondary )
#�5f00
255 • 95 • 0
0 • 77 • 100 • 0
(cta - call to action)
#���
255 • 255 • 255
0 • 0 • 0 • 0
(print text)
#939598
147 • 149 • 152
45 • 36 • 35 • 1
(digital text)
#�5f00
255 • 95 • 0
0 • 77 • 100 • 0
(cta - call to action)
#004a98
255 • 95 • 0
0 • 77 • 100 • 0
(digital text | secondary)
#434345
67 • 67 • 69
68 • 61 • 57 • 43
(digital text | primary)
#e6e7e8 – Light | Secondary module 01
#���
255 • 255 • 255
0 • 0 • 0 • 0
(print text)
#939598
147 • 149 • 152
45 • 36 • 35 • 1
(digital text)
#�5f00
255 • 95 • 0
0 • 77 • 100 • 0
(cta - call to action)
#004a98
255 • 95 • 0
0 • 77 • 100 • 0
(digital text | secondary)
#434345
67 • 67 • 69
68 • 61 • 57 • 43
(digital text | primary)
#��� – Light | Secondary module 02
Colors
L A B E L
L A B E L
L A B E L
L A B E L
E R R O R
E R R O R
Selected SelectedSelect
Other Option(s)Highlighted Option
Padding Top and Bottom:
14 px
Padding Left and Right:
35 px
Other Option(s)
Other Option(s)
Other Option(s)
Other Option(s)
Highlighted Option
Highlighted Option
Highlighted Option
Use these elements on dark backgrounds
D I S A B L E DN O R M A LN O R M A L
Highlighted Option
UI Elements
Other Option(s)Highlighted Option
Padding Top and Bottom:
14 px
Padding Left and Right:
35 px
Other Option(s)
Other Option(s)
Other Option(s)
Other Option(s)
Highlighted Option
Highlighted Option
Highlighted Option
Use these elements on dark backgrounds
D I S A B L E DN O R M A LN O R M A L
Highlighted Option
UI Elements
Icon Container:127px X 127px Circle maximum110px X 110px minimum2.5pt stroke circle#004a98
Icon Graphic:75% of inner containerThick stroke – 2.0pt strokeThin stroke – 1.5pt stroke#004a98
87px
127px
75%
Icon Dimensions
UI Elements
When it comes to building a memorable brand, it's all about consistency.
Last Update 03/25/20200 Q1 | Digital Marketing Team