22seven CI styleguide (2015)

The Brand Identity
Style Guide to 22seven.
v1.0

22seven - Logo and Brand Guidelines 3
Human
Simple
Honest
Playful
22Seven Brand Values

other ﬁnancial institutions
22seven
Brand Insight: Us and Them
Our values also set 22seven apart from other ﬁnancial institutions.

Our goggles are a visual metaphor for what 22seven
helps our customers do.

It’s a lens that helps them see things differently – and better.
It brings their money into focus. It makes things clearer.

Providing ‘a-ha!’ moments, as if seeing properly for the ﬁrst time.

The goggles bring honesty and simplicity to money.
They eliminate noise and fuzz.
They’re transparent and revealing.
And they’re personal – every customer has a different prescription.

These round-spectacled wearing mavericks changed the way we
see the world. The same way we hope 22seven will change the
way our customers see theirs.

Wordmark: Construction
The 22seven wordmark is not a typeface, but custom designed
typography specifically for the brand. The rounded edges and lower case
lettering gives it a friendly and approachable appearance. The lettering,
along with letterspacing / kerning and character appearance may under no
circumstances be tampered with.

Wordmark: B&W & Full Colour
The B&W 22seven logo makes use of 100% black
throughout the wordmark - not tints.
The full colour 22seven logo appears in a very spe-
cific order and cannot be altered under any circum-
stance. The exact colour breakdowns are discussed
on page 44.
22: black s: orange e: yellow v: green e: blue n: purple

Wordmark: Full colour wordmark - indicating "clear" zone and co-branding with Old Mutual

Wordmark: Full and one colour logo usage on black & white - horizontal lock-up
Note that grey "22" to be used in print only as silver ink Note that grey "22" to be used in print only as silver ink

Wordmark: Full and one colour logo usage on black & white - vertical lock-up TO BE USED ONLY IN EXTREME SPACE CONTRAINTS / EXCEPTIONS
Note that grey "22" to be used in print only as silver ink

Wordmark: Monocrhomatic 22seven logo in combination with Old Mutual

Wordmark: Minimum sizes
The 22seven logo has been designed to
reproduce at a minimum height of 3.5mm by itself.
In combination with the Old Mutual endorsement
the minimum height is 8mm. There is no maximum
reproduction size of the logo.
8 mm minimum height
3.5 mm minimum height

Goggles Icon: New Simplified Goggles Icon
The 22seven glasses icon has been designed on the same
principles as the typography, with rounded corners and it's
symmetrical nature giving it a friendly and approachable
appearance. The icon's construction and appearance may
under no circumstances be tampered with.

Goggles Icon: Full Colour and B&W
The B&W icon makes use of 100% black throughout it's
appearance - no tints.
The full colour icon appears in a very specific order (different
from the wordmark order - because of visual weight of specific
colours) and cannot be altered under any circumstance. The
exact colour breakdowns are discussed on page 45.
1: orange 2: blue 3: green 4: purple 5: yellow

When the icon and wordmark is used together,
our goggles icon is never used smaller than the
width of the "eve" in "22seven". The goggles
can however be used at larger scale than the
wordmark.
The goggles can however be used at larger
scale than the wordmark in all commication.
The goggles is very much our Nike swoosh,
our apple icon.
Full Logo: Wordmark meets Goggles - ratios

Full Logo: Wordmark combined with goggles - one full colour, one in B&W
The wordmark and glasses icon never appear in
colour together UNLESS they are on opposites
ends of the communciation / not on the visual plane
or a fair distance apart from each other.

Full Logo: Wordmark combined with goggles - both in full colour
When both wordmark and icon are used together,
please note the order of the colour sequence for
both - they are different (see pages 10 & 19 for more
information. Never alter theses sequences under any
circumstance.

Full Logo: Proximity of icon to wordmark
The goggles icon is not allowed closer to the 22seven
wordmark than the exclusion zone. The icon can
however be used further away and at a bigger size
than the wordmark in infinite iterations.

Full Logo: Wordmark using spectrum colour palette, while the goggles icon is using it's original colour order - on white
The wordmark and glasses icon never appear in
colour together UNLESS they are on opposites
ends of the communciation / not on the visual plane
or a fair distance apart from each other.
Enough distance = both wordmark and icon in colour Oodles of spaceToo close together = B&W icon

Full Logo: Different iterations of the logo in full colour

Full Logo: Monochromatic logo with full colour Old Mutual endorsement

Full Logo: Monochromatic logo with B&W Old Mutual endorsement

Full Logo: Monochromatic logo on coloured background

Full Logo: Minimum sizes
As the icon and workmark as slightly different heights (determined
by ratios outlined on page 21), they each have unique minimum
size as outlined below.
8mm minimum height 4.5mm minimum height
3.5mm minimum height 4mm minimum height

Full Logo: Usage on photographic backgrounds.
If the background is calm and muted enough, a full colour icon or
wordmark can be used on it ONLY if legibility is not compormised.
Alternatively all white logos to be used.

Full Logo: Don'ts = It's obvious. If you're not sure, consult the preceding pages or ask an adult ; )

Iconography: The iconography follows the same principles as our wordmark and goggles icon
The iconography is custom designed, combining the same
aesthetics as our wordmark and icon. Iconography should be
simple and smart and communicate with a "smile in the mind"

The iconography is always bound by a circular holding shape.
The strokewidth is always consistent and the icons are centred
inside the circle - as visualised bu overlay of all our icons above.
Unless it cannot be helped (as in the example of the strong arm
to the right). Our iconography is simple, smart and not fussy.
Iconography: Contruction and design

Clear Easy Clever Searchable Customisable
Tax return friendly Accessible
Affordable Flexible Rewarding Convenient
Well recorded Enlightening Exportable
Iconography: Homepage iconography and what they represent: B&W

Well recorded Enlightening Exportable Tax return friendly Accessible
Iconography: Homepage iconography and what they represent: colour combined

Well recorded Enlightening Exportable Tax return friendly Accessible
Iconography: Homepage iconography and what they represent: single colour

Enlightening Exportable Tax return friendly Accessible
Well recorded
Iconography: Homepage iconography and what they represent: single colour plus black

To that end, we developed a palette
that allows for expressive ﬂexibility,
while maintaining boundaries in aid of
a consistent look and feel across all
applications. Our palette consists of a
selection of 72 colours covering the en-
tire visible spectrum. However, it steers
away from the garish primary and sec-
ondary colours found in a typical colour
wheel by favouring colours that are
In general, this lends a slightly warmer
tone to most of the colours, but also
lends a distinctive feel, characterised by
the combination of muted tones, which
As a symbolic, visual representation of our lives, we
believe that the 22seven brand lives and should
be expressed in full colour while retaining a clear
and conﬁdent sense of identity.

Colour Palette: Primary colour palette
GoalsExceptions Recurring Income Day-to-Day
HEX: #FEC548
RGB: 254, 197, 72
CMYK: 0%, 20%, 85%, 0%
HEX: #26B1C9
RGB: 38, 177, 201
CMYK: 80%, 5%, 20%, 0%
HEX: #95B93F
RGB: 149, 185, 63
CMYK: 0%, 23%, 83%, 0%
HEX: #F2692E
RGB: 242, 105, 46
CMYK: 0%, 70%, 90%, 0%
HEX: #BD4D9C
RGB: 189, 77, 156
CMYK: 25%, 85%, 0%, 0%
The 5 different 22seven primary colours are used in-app to
associate with different functions. They are bound by those
functions in-app only and can be used liberally across other
communciation without being bound to those categories.

Colour Palette: Primary colour palette
Black is an intergral part of the primary colour
palette. Either at 100% of the colour value or
as tints.

HEX: #FEC548
RGB: 254, 197, 72
CMYK: 0%, 20%, 85%, 0%
HEX: #808080
RGB: 128, 128, 128
CMYK: 0%, 0%, 0%, 50%
HEX: #6ab90d
RGB: 110, 171, 36
CMYK: 50%, 100%, 0%, 0%
HEX: #027864
RGB: 0, 97, 80
CMYK: 100%, 30%, 70%, 0%
HEX: #26B1C9
RGB: 38, 177, 201
CMYK: 80%, 5%, 20%, 0%
HEX: #95B93F
RGB: 149, 185, 63
CMYK: 0%, 23%, 83%, 0%
HEX: #F2692E
RGB: 242, 105, 46
CMYK: 0%, 70%, 90%, 0%
HEX: #BD4D9C
RGB: 189, 77, 156
CMYK: 25%, 85%, 0%, 0%
HEX: #000000
RGB: 0, 0, 0
CMYK: 0%, 0%, 0%, 100%
Colour Palette: Wordmark with full colour breakdown
The colour order and
breakdowns may under no
circumstances be altered.

HEX: #F2692E
RGB: 242, 105, 46
CMYK: 0%, 70%, 90%, 0%
HEX: #FEC548
RGB: 254, 197, 72
CMYK: 0%, 20%, 85%, 0%
HEX: #95B93F
RGB: 149, 185, 63
CMYK: 0%, 23%, 83%, 0%
HEX: #26B1C9
RGB: 38, 177, 201
CMYK: 80%, 5%, 20%, 0%
HEX: #BD4D9C
RGB: 189, 77, 156
CMYK: 25%, 85%, 0%, 0%
Colour Palette: Goggles icon with full colour breakdown
The colour order and
breakdowns may under no
circumstances be altered.

Primary Typeface: Proxima Nova
AaBbCc
PROXIMA NOVA
Light, Regular, Semibold, Bold
& All Italics
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@£$%^&*()
1234567890!@£$%^&*()
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore
te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam
liber tempor cum soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum. Typi non habent
claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt
saepius. Lorem ipsum dolor sit amet, consectetuer adipiscing.

Secondary Typeface: Proxima Nova Condensed
AaBbCc
PROXIMA NOVA CONDENSED
LIGHT, REGULAR, SEMIBOLD
& ALL ITALICS
1234567890!@£$%^&*()
1234567890!@£$%^&*()
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer
possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui
facit eorum claritatem. Investigationes demonstraverunt lectores legere me
lius quod ii legunt saepius.
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
Proxima Nova Condensed is only to be used
in exceptional cases where lots of information
needs to be communicated and space is limited.

Proxima Nova Light
abcdefghijklmnopqrstuvwxyzßæœ••
ABCDEFGHIJKLMNOPQRSTUVWXYZÆŒ&
0123456789*#@+<=>'"÷±%‰⁄µ£$€ƒ¥¢,.:;…
“”‘’«»‹›·‚„!?¿¡(/)[]{|}®©™ÄÅÂÁÃÀÇÉÊËÈÍÎÏÌÑ
ØÓÔÒÖÕÜÚÛÙŸáàâäãåçéèêëíìîïñøóòôöõ
úùûüÿ†‡§ªº¬•¶ı°`~^ˆ˜¯˘˙ •-–—_
Proxima Nova Semibold
abcdefghijklmnopqrstuvwxyzßæœ••
ABCDEFGHIJKLMNOPQRSTUVWXYZÆŒ&
0123456789*#@+<=>'"÷±%‰⁄µ£$€ƒ¥¢,.:;…
“”‘’«»‹›·‚„!?¿¡(/)[]{|}®©™ÄÅÂÁÃÀÇÉÊËÈÍÎÏÌÑ
ØÓÔÒÖÕÜÚÛÙŸáàâäãåçéèêëíìîïñøóòôöõ
úùûüÿ†‡§ªº¬•¶ı°`~^ˆ˜¯˘˙ •-–—_
For all our communication, we almost exclusively use
Proxima Nova Light and Semibold in sentence case.
There are exeptions to the rule of course. See page 49
for type in use.
Primary Typeface: Proxima Nova

Playfulness.
Playfulness and delight disarm us and drop our de-
fences, and the jester embraces this in his modus
operandi. We know he’s present when 22seven is
engaging enough to make customers feel like they
want to, not have to.
He also embraces playfulness as a great way to
learn. To get better, we must fail (every hero does);
and when we play, we don’t mind failing. We may
fall off the bike, but we love riding it so much we
can’t wait to get back on.
Some of the principles that will keep us
and our service playful:
Life’s too short to be taken too seriously. Have fun, be
irreverent, be surprising, be interesting.
How it feels is at least as important as how it works: if we
open hearts, we’ll open minds. (“Reason leads to conclusions;
emotion leads to action.” - Donald Calne, neurologist.)
Evoke happiness. Better yet, evoke “usable happiness”:
“a product that is simple to use, and makes you smile every
time you use it. Focus on making it easy to be happy, and
usability, user experience and greatness will come all by
itself.” (baekdal.com)
It’s okay to fail because that’s how we get better. This is as
true for us as it is for our customers.
Make it too good not to pass on. We can do what others
have done. Or we can do what others will wish they had
done.
It’s okay to tease. Mystery – what’s unspoken – intrigues and
makes people want to come back for more.
Type should never appear below 5pt. There is no maximum limit to type size. Type is kerned
to -20 with an leading 2 point higher than the point size. Proxima Nova Light and Semibold
and different point sizes are used to create visual interest without being tricksy. We stick to
sentence case, because we don't shout.
Primary Typeface: Proxima Nova in use

Writing Style
(if you’re a designer, you should also read this)

Accessibility.
Lose the jargon. Don’t get technical or
use words only we understand.
There’s lots to be said for economy.
But there’s also something to be said
for humanity. Writing more than “nec-
essary” may be good if you’re adding
emotion and delight to the experience.
Observe the ﬁne line between playful-
ness and gimmickry..
Real emotion doesn’t need to get
dressed up. Facts are usually more
emotive than adjectives.
No one can tell a story more sincerely
than its protagonists. Their words are
better than ours.
No one likes the reek of spin or manip-
ulation. Read it back – does it smell of
sell or half-truth?
Write how people speak. Even if it’s
grammatically “wrong”. It’s more import-
ant that readers identify with 22seven
than with what’s “correct”.
When you combine honesty, simplicity and playfulness, you can in-
fer certain other qualities. If all three of those principles are at work,
you will generally end up with writing that is likeable, that people
can relate to, that isn’t alienating. Those qualities are apparent in
some of the feelings we have about how we write:

Consistency.
Because we value accessibility above correctness, we know how
important consistency is. Inconsistency is messy, and messiness is
not accessible. Nor does it inspire conﬁdence. It sounds weird to
say, but if we deliberately decide to do things wrong, we should do
them wrong consistently. Here are some conventions to follow to
ensure consistency:
Grammar:
For names: use title case.
For example: “Money Month”.
For headlines, sub-headlines and
body copy: use sentence case, and
end with a punctuation mark.
Examples: “Welcome to 22seven.” or
“This is your Money Month”.
For menu items and buttons: use sen-
tence case unless it contains a name,
but end with a punctuation mark only
if it is a question mark or if punctuation
marks appear earlier in the sentence.
(In very, very rare cases, an exclamation
mark or ellipses may be used.)
Examples: “Go to Money Hub” or “Do
you want to delete?” or “Yes, continue.”
Pronouns:
It’s more human (and honest) to talk
with our customers as if we were hav-
ing a conversation with them.
So, refer to:
• customers* as “you” (2nd person),
• 22seven (the service or brand) as “it”
(3rd person), and
• the business or its people as “we” or
“us” (1st person).
Example: “How it helps you do more
with your money” (not “How do I do
more with my money?”)
Our customers are exactly that – cus-
tomers” (or, occasionally, possibly,
“users”). We don’t call them “consum-
ers”, which reeks of all that is distasteful
about marketing and seducing people
to buy things they don’t really need.

Naming:
We need to know when to be simple
and when to be playful. For simplici-
ty’s sake, we should adhere to general
web conventions for things like navi-
gation names (e.g. “Home”, “Support”,
“Search”). We can be more imaginative
when it comes to things that are ours,
like features or tools (e.g. “Money Hub”).
Occasionally, there may be exceptions
to some of these conventions. For ex-
ample, when using a full stop compro-
mises or detracts from design; or when
the sentence ends with an email or web
address that is not underlined or hy-
perlinked. Discretion should be guided
by the question “what is most human,
honest, simple and playful?”

The Brand Identity
Style Guide to 22seven.

22seven CI styleguide (2015)

Recommended

Recommended

More Related Content

Similar to 22seven CI styleguide (2015)

Similar to 22seven CI styleguide (2015) (20)

More from Clint Bryce

More from Clint Bryce (8)

Recently uploaded

Recently uploaded (20)

22seven CI styleguide (2015)