1. health and fitness
2. disease
3. cancer

Macmillan Cancer Support – Brand identity guidelines: January 2014
2 Our logo
3Colour
4 Secondary colour examples
5Typography
6Painted panels
7 How to create painted panels
9 Paint and photos
10 Paint, silhouette and headline
11 Layout – dos and don’ts
12Photography
13 Lead photography and storytelling
14Silhouettes
15 How to create object silhouettes
16 Graphic Panels
17Icons
18 How to make icons
19Infographics
20 How to make infographics
21 How to make web banners
Macmillan Cancer Support – Brand identity guidelines: January 2014
2
Our logo
It’s so much more than just how our name is written, Macmillan Headline font is a statement about who we
are and what we stand for. It’s everything we are: for and by real people, straightforward and inspirational.
Size
• Use it big and bold
•M
inimum size 22mm or
100px across its width.
Positioning
• Use
it on its side (rotated 90° in
either direction), but not upside down.
•T
here is no clear space or padding
needed.
•U
se it close to other type, photos
and silhouettes.
• For
services materials have it horizontal.
Other
•N
ever ever cut anything off (‘we are’,
‘cancer support’ or the full stop).
•N
ever recreate it out of Macmillan
Headline from scratch.
•A
vailable as JPEG./EPS/PSD
(in English and Welsh).
We are:
…all Macmillan. We are the nurses helping you
through treatment. The experts on the end of the
phone. The advisors telling you which benefits you’re
entitled to. The volunteers giving you a hand with the
everyday things. The campaigners fighting for better
cancer care. The fundraisers who make it all possible.
Cancer support
It’s the simplest way
to describe what we do.
The full stop.
Please don’t delete this. It adds punch to our
bold statement. We are Macmillan (the team),
we provide cancer support (every one of us).
Use it on its side
At least 22mm or
70px across
Download our logo from
be.macmillan.org.uk
Macmillan Cancer Support – Brand identity guidelines: January 2014
3
Colour
Macmillan is known to be ‘green’. It’s crucial in helping us stand out, boosts our brand recognition and is associated with
trust by our supporters. So it’s important that it remains the dominant colour. However, our secondary colours allow us to
create different tones within our work.
Secondary
Tertiary
Using the others
•P
op colours should be used
on fundraising products
highlighting key words and
main call to actions.
•S
ensitive colours should be
used on service products
highlighting key words and
main call to actions.
•U
se all colours for wayfinding
ie tabs, infographics and
buttons.
Primary
Using the greens
•G
reen should always be
the first choice of colour
for any design.
•D
on’t feel the need to use all
three greens in one layout.
•U
se them randomly.
•U
se lots of white space.
•W
hen using the secondary
palette, the overall impression
should still be ‘green’.
•D
on’t use light green for
body copy.
Dark
green
Uncoated
Pantone = 341U
CMYK = 100/0/75/32
Mid
green
Uncoated
Pantone = 354U
CMYK = 85/0/100/0
Light
green
Uncoated
Pantone = 382U
CMYK = 43/0/100/0
Coated
Pantone = 342C
CMYK = 100/0/75/45
Coated
Pantone = 355C
CMYK = 94/0/100/0
Coated
Pantone = 376C
CMYK = 50/0/100/0
Screen
RGB = 0/92/70
HEX = #005C46
Screen
RGB = 0/162/70
HEX = #00A246
Screen
RGB = 140/198/63
HEX = #8CC63F
Pop purple
Pop orange
Pop red
Uncoated
Pantone =
CMYK = 45/95/0/0
Uncoated
Pantone = 151U
CMYK = 0/70/100/0
Uncoated
Pantone = 185U
CMYK = 0/100/80/0
Coated
Pantone = 2582C
CMYK = 45/90/0/0
Coated
Pantone = 151C
CMYK = 0/60/100/0
Coated
Pantone = 185C
CMYK = 0/100/80/0
Screen
RGB = 104/44/136
HEX = #682c88
Screen
RGB = 241/131/21
HEX = #f18315
Screen
RGB = 227/35/51
HEX = #e32333
Mid grey
Uncoated
Pantone = XXU
CMYK = XX/XX/XX/XX
Sensitive
turquioise
Uncoated
Pantone =564U
CMYK = 55/0/35/0
Coated
Pantone = 564C
CMYK = 55/0/35/0
Screen
RGB = 154/204/201
HEX = #98ccc9
Sensitive lilac
Uncoated
Pantone = 535U
CMYK = 50/30/20/0
Coated
Pantone = 535C
CMYK = 45/30/20/0
Screen
RGB = 140/157/184
HEX = #8c9db8
Sensitive
brown
Uncoated
Pantone = 7619U
CMYK = 10/70/60/0
Coated
Pantone = XXXX
CMYK = 10/70/60/0
Screen
RGB = 192/97/91
HEX = #c0615b
Dark grey
Coated
Pantone = XXC
CMYK = XX/XX/XX/XX
Screen
RGB = XXX/XXX/XXX
HEX = #a19f91
Uncoated
Pantone = XXU
CMYK = XX/XX/XX/XX
Coated
Pantone = XXC
CMYK = XX/XX/XX/XX
Screen
RGB = XXX/XXX/XXX
HEX = #7b7a6d
Macmillan Cancer Support – Brand identity guidelines: January 2014
4
Secondary colour examples
Our secondary colours always have a function. Either to emphase key words, help the user navigate
the page or show data in an engaging and clear way.
1
2
Highlight calls to action on
end frames on web banners.
Pull out key words.
3
Use them for sectioning,
navigation and wayfinding
eg tabs.
4
Use any colours for
inforgraphics to make
them engaging.
5
Grey is used for graph
structure so the data is the
main focus.
6
Use grey on websites
for subtle sections to
support content.
1
4
3
2
5
Daniela, Paul’s wife
From a 10k to a bake
sale, if you’d like to do
something special in
memory of a loved one,
set up a tribute page
today. It’s a place to
celebrate their life.
Visit macmillan.org.uk/
tribute to find out more
macnews_testing_engaged.indd 20
26/11/2013 11:17
6
Macmillan Cancer Support – Brand identity guidelines: January 2014
5
Typography
We have three fonts: Macmillan Headline, Futura BT and Avenir. Headline is always used for the single most important
message – the headline. It always sits in a green panel for lead messages (see p6). Futura BT is used for all other copy
for print. Avenir is used online for body copy.
Futura BT
2
2
1
Using Macmillan Headline
•U
se up to three or four different sizes.
•P
ull out key words in a larger font,
another green or secondary colour.
•N
ever use more than two colours.
•U
se all three versions per letter (there
are 3 A’s using uppercase, lowercase
and small caps. This is automatic via
OpenType.
•D
on’t use too much Headline
(it loses its impact and isn’t readable
at smaller sizes).
•O
utline headline so it prints well.
3
• Used for all other copy.
• Use Extra black, Bold, Heavy,
Medium, Book.
•O
nly use italics for published works
(books, films, etc).
•W
hen reversing out (eg white copy on
green), you may need to go up a weight.
•B
ody copy on average is 11pt/13pt.
•U
se 7pt for our charity details.
•H
eaders and page intros online,
size 1.375em.
3
1
Using Futura BT
Using Avenir
•B
ody copy for the Macmillan website
for better accessability, size 1.467em.
Macmillan Cancer Support – Brand identity guidelines: January 2014
6
Painted panels
They are what they say on the tin – painted panels. The four key things to remember with these panels are:
1
Headline font always sits within it for lead headlines (eg covers).
2
There are three styles – roller, acrylic and watercolour.
3
The panels interact with other key assets – people photography, object photography and object silhouettes to give us flexibility and impact.
4
For call to actions you can use a secondary colour.
Typographic only
Great for communicating
in a straightforward way.
Object silhouettes
Great for making complex
content more engaging.
Object photography
Great for illustrating stories.
People photography
Our main style. Great for
reaching a broad audience.
Macmillan Cancer Support – Brand identity guidelines: January 2014
7
How to create painted panels 1 of 2
Creating the painted panels can be time consuming so we have created a ‘how-to guide’ to help.
1
First, decide which software package
you’ll be creating your artwork in.
Keeping your elements organised
in layers, create your composition
using a rough shape to act as a
placeholder for your painted panel
(making sure the shape of the panel
interacts dynamically with both the
background and the headline).
2
Import
the comp into Photoshop
at the correct size and resolution
for final use (again, keeping the
elements on separate layers) and
reduce the opacity of your panel
placeholder so you can work over
the top of it.
3
Create
a Solid Colour adjustment
layer and fill the mask black. Building
your panel using this non-destructive
method allows great flexibility as you
can use multiple layers to build and
erase parts of the panel using the
same brush.
1
Macmillan Cancer Support – Brand identity guidelines: January 2014
8
How to create painted panels 2 of 2
4
Decide
on your chosen brush type
(roller, acrylic or watercolour) and
load the relevant set of brushes. Pick
a good brush to start with and, using
white as your foreground colour,
paint a single mark/stroke on the
mask to reveal the colour.
5
Continue
to build the panel using a
combination of brushes, sizes and
angles (the canvas can be rotated to
help give extra flexibility). You may
need to use multiple layers to build
and refine your shape.
6
Once you have created the shape
you require and you’re happy with it
(you may need to build and rebuild
the panel), either:
• s ave the whole comp as artwork;
• export the painted panel in colour
as a PSD or TIFF with a transparent
background to insert into your
Illustrator or InDesign artwork; or
• change the colour of the Solid
Colour layer to black and export
the painted panel as a greyscale
PSD or TIFF to allow flexible
recolouring in Illustrator
or InDesign.
4
5
Macmillan Cancer Support – Brand identity guidelines: January 2014
9
Paint and photos
Whether we’re using a typographic, photographic or silhouette route, we always follow our basic layout
principles to make the design feel uniquely Macmillan.
1
Keep the elements together –
headline, logo and panel.
2
Keep a ¼ of the layout free – an area
of empty space stops the layouts
feeling static and conventional.
3
3
You can add a slight angle to the
Headline type (no more than 4°).
Do not angle type for cancer service
messaging.
4
Make sure the panels are always
bespoke. This means it should
follow the shape of the headline
font and the form of the image
(where we use one).
5
Always make the call to action clear.
2
4
1
5
What we mean by negative space
When using a photograph position the
image with lots of negative space around
it (usually almost half the image). So that
when you paint the panel in, you will be
left with a quarter of negative space on the
page and a quarter taken up by the panel.
Macmillan Cancer Support – Brand identity guidelines: January 2014
10
Paint, silhouette and headline
The silhouette and headline-only routes follows the same principles as the photographic layout but use
white space and the painted panels to create loose, energetic and free layouts.
1
Headline and panel are
the largest asset.
2
Silhouettes are secondary.
They complement and interact
with the headline and panel.
3
Our logo can either be inside
or outside the panel.
4
Always give the assets plenty
of white space so the design
can breathe.
wE
dr e Ss
up
2
1
3
4
3
Macmillan Cancer Support – Brand identity guidelines: January 2014
11
Layout – dos and don’ts
Dos
By the time
train
yo uR
aRives At The
Nex T
ation
sT
meone
sO wilL have beEn Told they have
Cancer
Every 2 minutes someone is hit by
the news they have cancer
With your support, they won’t have
to face it alone.
Text XXXX to donate £5 today
• T hese examples all follow our layout principles
Don’ts
By the time
train
yo uR
aRives At The
Financial guidance for your life
Nex T
sTation
sO meone
wilL have beEn Told they have
Cancer
Every 2 minutes someone is hit by
the news they have cancer
With your support, they won’t have
to face it alone.
Text XXXX to donate £5 today
• T he painted panels should always interact
with the image.
• T he painted panels never go over a person’s face.
• T he texture in the painted panel should never
look like it’s been ‘stepped and repeated’.
•D
o not fill the page with
a painted panel. Always
keep a quarter of the page
as negative space.
• T he painted panels
should always be in one
of our colours.
•D
o not separate the logo
from the panels. Keep
the elements together.
•D
o not angle the type too
much beyond 4º.
•T
he logo should never be at
an angle or upside down.
•T
he logo should always
be in one our greens or
reversed out.
• T he headline should always
feature at least three sizes
and be staggered.
•D
on’t use too many painted
panels.
•D
on’t use Futura for
headline.
Macmillan Cancer Support – Brand identity guidelines: January 2014
12
Photography
The best way to describe our photography is documentary – people or still life. It must capture the sense of for and
by real people. We always use real people, never models in studios. It’s kind of like photojournalism. We capture
the detail and ‘that’ moment.
1
They tell a story.
2
They show natural emotion.
3
Photos for lead images need
extra negative space for paint.
4
Looking at the camera in ‘that
split second’ is great, but don’t
over do it – it’ll be unauthentic.
5
Non-lead photos (ones with out
headline) don’t need negative
space so go for tight crops.
6
ven in hospitals there are little
E
moments that catch the eye.
Remember
Think about where and how the
photos are going to be used
eg landscape for leaderboards.
1
3
5
2
4
6
People
Still life
Macmillan Cancer Support – Brand identity guidelines: January 2014
13
Lead photography and storytelling
A photo tells a thousand words, as they say and the lead photo should clearly and powerfully tell the story of what
you’re communicating – capturing a moment and showing real people in real situations. With case studies the quote
and photo should work together to make sure the key message is clear.
1
1
Name the people featured.
It’s their story and this
makes it easier for people
to connect with.
The descriptions of the people
should be personal to the
particular moment and quote.
3
Where possible we should allow
readers to find out more about
the case study.
3
4
The picture and quote should
work together to capture
the moment.
4
6
The message needs to jump off
the page like in this example.
If it doesn’t find another image.
Sometimes it doesn’t matter if
the quality of the image isn’t
the highest as long as you
capture that moment.
5
Gary, talking about his
chemotherapy treatment
2
5
‘You know you’re going
to feel awful, but nothing
prepares you for it.’
2
Click here to
watch a video
of Gary’s story
Sophie, Emma’s mum
6
‘I ran
the RACE
for
DAd’
Julie, Edinburgh
marathon runner
Dramatic photofinish
at Macmillan’s sports day
Macmillan Cancer Support – Brand identity guidelines: January 2014
14
Silhouettes
All our silhouettes come from photos of real objects. This can include animals, but not people. They help
us tell stories, explain complex information or give warmth when the subject matter is challenging. The best
silhouettes have lovely detail on them so you can see the shine of a diamond.
Selecting an object
• Always start with a photograph.
•O
bjects should be instantly
recognisable/iconic.
•T
hey should be around 60% solid
black and 40% detail.
•S
elect images with plain or light
backgrounds (this makes it easier
to silhouette).
• L ook for areas of detail that will stand
out and add interest.
•A
void lens distortion or exaggerated
perspectives.
Macmillan Cancer Support, registered charity in England and Wales
(261017), Scotland (SC039907) and the Isle of Man (604).
l Us
entErTaiN
Event title/description
Download our silhouettes from
the Library – but please make
new ones.
20 Month 2014
11am to 4pm
Name of venue/location
Street address, town, county
call Contact Name on 01234 567890
or email cname@macmillan.org.uk
Macmillan Cancer Support – Brand identity guidelines: January 2014
15
How to make object silhouettes
1
Open your image in Photoshop. Add
a ‘Hue/Saturation’ adjustment layer,
desaturate the image (make it greyscale).
2
Add a ‘Levels…’ adjustment layer. Increase
the contrast from the image by moving the
shadow/highlight sliders together. Focus
on getting the outline of the silhouette.
We want to end up with no midtones so
no grey in the image, just black and white.
3
If you’ve lost detail specific areas of the
silhouette, repeat the process. Creating
masks to pull out the different areas of
interest like the mask and the feathers.
4
At this point you might like to create
two layers (paint in white and black)
to tidy up the image.
5
Select all layers and convert to a Smart
object (this preserves all the layers).
6
Convert this to greyscale and save
as a TIFF so colour can be applied in
layout applications.
You can watch the ‘how to
make silhouettes’ video on
be.macmillan.org.uk
Here’s a breakdown of what the
Layers palette might look like.
1
3
6
Macmillan Cancer Support – Brand identity guidelines: January 2014
16
Graphic panels
Our graphic panels and rules are created from Macmillan Headline. They are used as navigation in layouts
online and in print. They make information stand out and focus the eye to keep points and signposting.
1
2
Used
for call to actions
as buttons online.
Forms
and tables for sections.
4
Use
lines sparingly to break
up sections. We still use basic
straightlines to keep things
straightforward.
In these circumstances
I wish to refuse the following
specific treatments
3
*If you wish to refuse a treatment that is or
may be life-sustaining, you must state in the
box: ‘I am refusing this treatment even if my
life is at risk as a result.’
Break
up sections or
pull out information.
3
Section 4: Person to be contacted to discuss my wishes (optional)
Section 2: My Advance Decision to Refuse Treatment
Name
Relationship to you
Address
Telephone number
Making a will
2
Section 5: Details of healthcare professionals
Making a will
I have discussed this Advance Decision to Refuse Treatment with
(eg name of healthcare professional)
What is important to me now, and how I want
to be supported
Profession/Job title
5
Why make a will?
Whatever your age, having an up-to-date and valid
will is important. Dying without a will means that your
wishes for who you would like to leave your estate
(property, personal possessions and money) to can’t
be guaranteed.
Contact
detailsis
What
4
5
complicated. There are strict rules known as intestacy
rules,3:which
set out who
should deal with the deceased’s
Section
My signature
and witnesses
affairs
and who should inherit their estate. This may
My
signature
Date of
(or
nominated
signature
mean
thatperson
the people who inherit the estate aren’t
the
directed by me to sign)
people you would have chosen.
Witness name
of
I found it difficult to make a will, Date
I now
know that when I do die the people who Isignature
love
and care for will be able to benefit from my
Witness telephone number
material possessions.’
Michael
23
Download our graphic
panels from the Library.
1
Address
Telephone
Section 6: Optional review dates – this Advance Decision to
Refuse Treatment was reviewed and confirmed by me
Signed
Date
Signed
Date
Signed
Date
Signed
Date
Witness signature
Witness
address
‘Although
2
I give permission for this document to be discussed with my relatives/carers
My general practitioner (GP) is
If you die without a will, this is known as dying
Use
the secondary colours
for call to actions and
navigation around the page.
Date me...
How best to support
(please circle one and specify if you only wish for it to be discussed with specific people)
intestate.
When refusing
someone
dies intestate,
it often
takes
An
Advance Decision
life-sustaining
treatment
must be
signed by you (or by
another
your
presence
and estate
by your and
direction)
andalso
witnessed
much person
longerinto
deal
with the
it can
be by someone else.
1
important to me...
yes
no
Macmillan Cancer Support – Brand identity guidelines: January 2014
17
Icons
Our icons play a key role in all our communications. They are created out of Macmillan Headline, and are instantly
recognisable. Whether you need something for navigation, making dense copy more digestible or as a part
of an infographic, they bring an idea or call to action to life.
3
1
They
are only used small within
text (but can be larger for
infographics).
2
When
used in body text they
are only as high as 2 lines
of 11pt.
3
Use
the secondary colours
to navigate and pull out.
4
They
can be used with our
infographic style (can be used
larger in this instance).
Download our icons from
the Library.
1
Whatever’s on your mind, we can help.
Finding out that you or someone close
to you has cancer can be a difficult and
confusing time. There’s bound to be a lot
on your mind, and you may find it helpful
to talk with someone who understands
what you’re going through. That’s where
Macmillan’s team of experts comes in.
We believe that no one should face cancer
alone and we’ve put together this leaflet to take
you through all the ways we can help, whoever
you are, whatever your condition, and wherever
you live.
2
If, after reading this leaflet, you’d like to know
more about our services or would simply like
to talk to someone about how you’re feeling,
please call us free on 0808 808 00 00
or visit macmillan.org.uk
Where can I find information
I can trust?
Macmillan’s free booklets are written by our
experts and cover a wide range of subject
matter. From detailed information on the
different cancer types to guides on how to get
financial and practical support, it’s all available
online, in an information centre or delivered
direct to your door.
What if I want to talk to someone
face-to-face?
You can get face-to-face support by popping
into a Macmillan information and support
centre near you and speaking to our team
in person. They offer free and completely
confidential support and advice to anyone
affected by cancer, including family members
and carers.
Who can I talk to?
Our cancer specialists are available
to answer any questions you might have, over
the phone on our support line. We can also
provide a range of other specialist support, such
as dietitians, physiotherapists or social workers.
And if you’d like to get in touch with regular
people who understand what you’re going
through, visit our Online Community to chat with
someone who’s also been affected by cancer.
I’m worried about money,
what can I do?
We know that living with cancer can bring
extra expenses, so our specialists are here to
help you manage your finances and claim the
benefits you might be entitled to. We also give
one-off Macmillan grants for practical things,
like travel expenses or household items.
4
Can I get help with the other
ways cancer has affected my life?
From useful information on how to get back
to work to the courses we run to help you
manage your health and wellbeing, we’re here
to help with the practical side of things. And
our volunteers are here for you in so many
ways too, whether you need a lift to hospital
or a hand with the shopping.
‘Talking to people online, talking to the
Macmillan nurses and the Macmillan
benefits adviser, all of these things
take such a weight off your mind.’
Venus – diagnosed with
uterine cancer
Venus chats to her nurse about
how she’s doing after surgery.
Macmillan Cancer Support – Brand identity guidelines: January 2014
18
How to make icons
Icons are simple to make, below are two examples of how to create them depending on the complexity.
1
Pick the letters from Macmillan
Headline that work best for the icon.
2
Tweak or customise the letters (if
needed) to create the shapes of the
object. Make sure that it still looks
like our Headline font.
3
Put all the elements together
and the icon is ready.
1
Another, more complex example
to show how to make them.
2
3
Macmillan Cancer Support – Brand identity guidelines: January 2014
19
Infographics
Infographics help people digest data, whether that’s comparing statics in the form of bar charts or telling a story using
icons and illustration. We’ve developed a unique, expressive and ownable style of infographics, using the paint brush
strokes and a paper ‘cut out’ effect.
Table of elevation
15000
3000
Proportion per 100,000 older people
• Sharp, clean edges keep the
infomation precise.
• The
edges are skewed to stick to the
handmade look.
•R
ough brush strokes are inside the
‘cut out’ paper effect.
• In
a bar chart, the top of bar should
remain fully painted and the base
can have more brush marks.
• The
axis is in grey so the main focus
is towards the information.
• Use
all the colours in the Macmillan
palette.
• Illustrative infographics can be of
anything to explain the information.
The teapot is created out of
Macmillan Headline.
12000
2000
1000
9000
6000
200
300
Distance (km)
3000
4m
0
2010
The rough brush strokes can
be downloaded search ‘brush
sheets’ on the library.
100
0
2020
1.2m
2
m
2030
2040
n
£12 millio n
£14 millio
n
£18 millio
Macmillan Cancer Support – Brand identity guidelines: January 2014
20
How to make infographics
Our infographics feel handmade but also informative. It’s important to find the right balance.
Follow the three simple steps to create them.
1
Create the infographic in InDesign
using the shape tools.
2
Place one of the six brush sheets into
the shapes, scaling to what looks
good. There are two brush sheets of
each paint effect watercolour, acrylic
and roller to choose from.
3
1
2
4m
3
1.2m
4m
2m
Using the Macmillan colour palette
choose any colours that bring the
information to life.
1.2m
2m
4m
1.2m
2m
n
£12 millio n
illio
n
4m
£18 millio
£1
or illustrative infographics like the teapot
F
the same principles apply. Please use the icon
guide to create illustrations like the teapot.
Pull down one of the corners so the tops aren’t
straight, it creates a handmade look and feel.
Macmillan Cancer Support – Brand identity guidelines: January 2014
21
How to make web banners
It’s very important that we drive in traffic onto our website. So keeping our messaging simple and straight
to the point is essential – so we only use three frames per banner. Here are some key rules to mantain consistency.
1 3 to 8 words per frame on text only.
And 3 to 6 on photographic banners.
2
P
op colours in fonts should only be
used upon final frame on the call to
action.
3 No need for padding on the text. This
allows the Macmillan headline to be
large and have a strong presence.
4 Where possible have some headline
font in white where it merges into the
web page itself.
5 On photos slightly skew the corners
where painted panels are, to give
the illusion that the paint is on the
web page.