welcome to
your handy guide to our brand 26.09.2017 / version 1.0
hello! Welcome to your handy guide to building Moonpig’s brand. It’s a bit about the big ideas inside Moonpig, a bit about design and a bit about tone. All added together, it’s how every one of us can make Moonpig awesome for our customers. These short guidelines are here to give you an overview of our universe, plus we’ve got longer ones that dive deeper into some areas too. So all you’ve got to do is read on, get thinking, and keep building our brand Enjoy!
Our purpose
to make 20m days a year brilliant by 2020 Our brand positioning
To show them you know them:
The simple:
Trust Moonpig:
Antidote to booorrring:
• Getting something from Moonpig means someone’s really thought of you
• Simplest product experience
• Never forget an occasion with our Reminders service
• Famous brand licences and our own designs
• Add your own touch with handwriting and ‘send to me first’
• Convenience - we’re better than shops as you can use us anytime and anywhere
• Our products are great quality
• Wide range to make sure you find something for everyone
• We get the emotional value of personalised gifts and a personal feel
• More than cards, we’re here for your whole occasion
• Reliable product experience
• Letterbox range - no waiting in!
• Great customer service
Our personality
cheeky humour with heart
• Whatever ever you go for, we make you feel that it’s a great choice
our vision for the brand identity It reflects our new positioning, spirit and the personality of all of us working here, the products we sell, and the places we work in. This is the whole new world of Moonpig, where we revolve around our customers and their loved ones. It’s an escape to life on the moon, where the normal rules – like gravity – don’t apply. Boring is banished, obvious is avoided and we all live a bit lighter.
1: Hello logotype This is our new logotype. (That’s right, there’s no pig… there’s no moon... and there’s no dot com). It’s been custom-drawn for us, with our own unique characters. It’s all about a world not affected by gravity... we love it. Please only ever use the logotype file, and don’t recreate it by typing out text.
2: Our logotype and how to use it
Positive – Positive versions of our logotype should only be used in Moonpink pink and Eclipse grey
Negative – The logotype appears white on all brand colour backgrounds, except for the yellows
So, now that we have our lovely new logotype, here’s some guidance on how we like to use it. Stick with these simple rules and we can make sure that we're consistently, recognisably and awesomely Moonpig wherever we appear. Clear space – Use the size of the ‘o’ to determine the exclusion zone around the logotype
Sizing – Logotype size should either be 1/3 or 1/4 the width of the format in which it appears
Positioning – Mostly centrally aligned, either in the centre or at the top or bottom of a format
Logotype variants – For specific or exceptional uses
moonpig – brand identity
Snout icon The two ‘o’s from our logotype form the ‘snout’ icon, which is used as our app icon, favicon and social media avatars. Oink!
Extended logotype – Our logotype has been created to be dynamic to live in the digital world. It can be stretched and manipulated
to have fun with the format it’s placed on. When the logotype is stretched out we add extra ‘o’s in to fit the format.
3: Colour splash!
Colour palette – Here’s our range of vibrant and expressive brand colours
Say hello to our colour palette...
Primary – Moonpink – Aurora – Dawn
Moonpig pink – Moonpink – is our primary colour - which sits alongside a set of fresh, vibrant colours that we can use across all our communications. They’ve all got spacey names too, because surely ‘Lunar’ is better than Pale Grey? For online uses we've got a special, specific set of colours too - and they've been created to pass screen readability and accessibility standards. Then we have the lovely, gradiated 'atmospheres' - we use these as backgrounds instead of just a flat block of colour. Atmospheres help to make objects and type feel like they're floating in our zero-gravity world.
moonpig – brand identity
Secondary – Solar – Dusk – Horizon – Crescent
Tertiary – Lunar – Eclipse
Digital colours – We’ve got replacements for our key colours specifically for use online. Moonpink Digital
Background Grey
Mid Grey
Form Text Grey
RGB: 237/94/157 # ed5e9d
RGB: 250/250/250 # fafafa
RGB: 235/236/237 # ebeced
RGB: 185/185/185 # b9b9b9
Disabled Button
Hover Button
Success Green
Error Red
RGB: 249/190/216 # f9bed8
RGB: 243/125/177 # f37db1
RGB: 8/186/85 # 08C455
RGB: 255/15/0 # FF0F00
Atmospheres – Some colours from our palette have been used to create gradiated ‘atmospheres’. They add depth and sophistication to our visual compositions. Oooh!
4: Our typography
Headlines – Created in our custom typeface, Moonpig Lift-off. Keep them short please, and take care not to get any clashing characters
Moonpig Lift-off – Has a few different headline styles. But we use ‘shake’ the most
lift
Characters lift up Along with our logotype, and our colour palette, we’ve got our very own bespoke typeface (get a load of us!). It’s been designed for us by the British type foundry F37; and it’s based on their ‘Ginger’ typeface. But our family is called ‘Moonpig’ and it does some pretty great things. As well as coming in the usual weights of Light, and Bold - we have our own special weight between those two, called Demi. But the really clever part is Moonpig Lift-off - this is the special weight that we use for our headlines. It automatically makes the characters lift, wobble and shake. This unique style of typography is another great way that we can express ourselves, and help people recognise Moonpig.
moonpig lift-off Headline alignment, leading & kerning – Some simple rules for setting out headlines. Take care that characters do not clash
1. centre the type 2. kerning at -25 3. leading at 95%
moonpig – brand identity
Characters rotate plus or minus 5º Characters lift up, sink down and rotate all at once
wobble shake
Headline type combinations – We can combine Moonpig Light with Moonpig Lift-Off, using the light weight at a smaller size
flowers and gifts
through the letterbox
5: Our font stack
1
Primary / Headlines Moonpig Lift-off is our brand font, use it for headlines and hero images on all creative design work.
2
Secondary Then our body copy typeface is Moonpig Light. It’s used on our digital platforms, and in print.
3
Poppins Google font - for our presentations So, we can’t use our custom Moonpig font on Google docs (boo!) - but don’t worry, because there’s a font called Poppins that we can use for our shared docs, and presentations. Yay!
OK, here's a quick guide to what typeface is best for what use. Everywhere possible, we use our Moonpig font family. Online, in-app and in print it should always be possible to use. But when we can’t use it - on the Google presentations that we create for example - we have a substitute typeface called ‘Poppins’ that we use. It's similar to our Moonpig typeface so that's great for keeping all of our communications looking consistent and cool. And on our digital platforms - the website and our apps - we use Open Sans as our supporting typeface. It's for body copy, product descriptions and all forms of secondary style information.
4
moonpig – brand identity
Body copy web font And last, but not least, good old Open Sans is our body copy web font; used for product descriptions and so on.
moonpig lift-off moonpig light Headlines:
Poppins Bold
Subheads:
Poppins Semi Bold
Body copy:
Poppins Regular
Open Sans
6: Our layouts Do’s and don’ts In order to keep things looking brilliant, we’ve got a few tips for working on creating layouts for our physical and digital world. - Headlines should be centred please. - Moonpig Lift-off can be paired with our secondary typeface, Moonpig Light. For example on the pink poster, where we want to put the focus on one word. - On website hero images, try not to overlap type onto the products. Give it some space and don’t let things become too cluttered. - On website layouts, when our cut-out products are sat over a coloured circle, then that product can move or float. But be careful not to have too many things floating and moving around one page - as that can look a little gimmicky. Any questions? Just pop over to see the creative team.
moonpig – brand identity
7: Our photography Bold and vibrant colours really make our products zing and surprising cut-outs and floating hands add a quirky touch. Floating elements show that Moonpig is always in zero-gravity.
moonpig – brand identity
Brand and campaign – Remember we live on the moon and we can play with zero-gravity. Enjoy using the colours drawn from our palette
8: Our icons
Icons – We have a brand new set of custom icons for use across all touchpoints. Woohoo!
Here’s our set of custom icons to use for our apps and online. They've been drawn to a consistent style and size, on a master grid, using soft, geometric shapes to be one happy family. They come to life when we animate them as well. Using subtle little touches of motion.
2dp Icon construction – Details to come
2dp
2dp moonpig – brand identity
our tone of voice “Cheeky humour with heart” This is how we want to sound. It’s a sweet spot between too slushy and too jokey. Here are some quick examples of our tone in action, and there’s plenty more in our long guidelines. Think of these handy tips when you’re writing for us - be it a marketing email, an error message or your out-of-office.
1. Write like you speak
2. Grab the reader’s attention
3. Enjoy simple wordplay
4. Build the love triangle
we love abbreviations
- it’s fave, in a mo’, we’ll, they’re
references our audience will get
- we know you want to get this done before Love Island starts
s how you know their world
- we know you’ve put loads of effort into this order
use questions
- got someone in mind?
have fun with sounds but nothing pretentious
between us, our customers and the people they’re giving stuff to
- more than moreish - i t’s art-tastic
- what would they like? Where ‘they’ means the recipient
10: Our tone of voice Example tweets
too safe al complaint Copy: A gener ar this. re sorry to he @jessica5 we’ registered er er numb or rd o ur yo us this. Please DM we’ll look into nd a ss re d d a email t work for us: Why it doesn’ the job, g. Yes it does rin o b o to st It’s ju ter than that. but we’re bet — laining a tweet comp to ly p re A y: someone Cop lopes tipping ve en ed nd ra ig card about b ting a Moonp off they’re get out that really sorry ab re e’ w s ot yl rr @Be team. to our design k ea sp ill w and ur card still enjoyed yo e sh e p ho e W : Why it’s not us ar situation. ul ic r this part fo ot fo ck a b , we might Too of complaints s d re nd hu et can’t please If we g ck on, but we a b ed fe is th rong and pass need to stay st nd a y d o yb de and ever n brand attitu ow ur o in ve ie bel lopes. rand the enve b to ns io is ec d
moonpig – brand identity
best practice moonpig
Copy: Annou Hey Cinderel ncing an offe la, there’s 20% r off everything strikes 12 tonig at Moonpig un ht! Swing by, til the clock we’re having a ball. http://b it. ly /2wP2iuD Why it works for us: It pushe s the joke just really well. Li far enough ght in tone but it all works also gets the message acr oss. — Copy: Apolog ising and ask [More serious ing them to D situation] @Je M ssica5 Hey Je happened. D ssica, that sh M us your ord ouldn’t have er number and we’ll take a lo [Less serious ok. situation] @Je ssica5 Hey Je Pop us your o ssica, we’re so rder number rry to hear tha in a DM and t. we’ll take a lo ok. Why it works for us: We open with ‘Hey’ as an in response. We formal, huma acknowledge n their issue and a clear action. feeling, then In th e se give them co nd one, ‘pop’ so we’d want underplays th to make sure ings, this is definite ly a less serio us situation. — Copy: Pure b rand content showing us a Dear customer s antidote to s. We’d love to booorrring. comment on our employees allegations ride to work o n space hopp Unfortunately ers. , however, w e gotta boun ce. Why it works for us: It’s daft and it’ s well-written, it sets us up fo r the gag.
too gimmicky
r: ncing an offe Copy: Annou the ff yo ne o m to #get Final chance W& way starts NO 20% off #givea W & RT! Simply FOLLO closes 00:00! #Offers eaway #11Aug #MoonpigGiv
t work for us: Why it doesn’ list, Too sensationa ment brand. se a argain b b a t no re e’ w s. And there ly use all cap re ra ry ve d e’ W e than poorly nothing, wors ut b , g in th s. no is se of hashtag judged over-u
11: Our tone of voice Product descriptions
best practice Moonpig too safe Copy: llection hocolatier Co C er st a M t d Lin at’s sure to cs are a gift th o ch y m m yu down the These lovers up and te la co o ch se work hard plea experts who ve a h t d n Li . land . Made for a sting flavours re te in g tin nge of crea you’ll find a ra e, tt le a p h tis ri B , raspberry ding caramel u cl in rs u vo fla azlenut, my orange h ea cr e, ch a n a g Mmm. lmond truffle. praline and a ’t work for us Why it doesn pt at a generic. Attem Too soft, too ut really with ‘Mmm’ b ch u to n a m u h o late. it’s too little to
moonpig – brand identity
Copy: Lindt Master C h ocolatier Colle Warning. Lin ction dt’s master ch ocolatiers ha their Master C ve made hocolatier Co llection more moreish... so than enticingly tast y that not one stylish lids ha o f these s ever made it back on the Created spec box. ifically for the British palette that stiff upp to soften er lip, this co llection of tant tastes and te alising xtures has ma de temptatio conclusion. So n a forgone , let whoever you’ve got in lid on some fa mind lift the bulous flavou rs - like caram raspberry ga el praline, nache, cream almond truffl y orange haze e and white ch lnut, ocolate swirls expect them b u t don’t to last very lo ng... Why it works for us Brilliant refere nces to the q uality of the b and its backg rand round such a s being for th Teasing refere e British. nce to ‘stiff up per lips’ is go We work hard od. to evoke the re and feelings a l human mom that come with ent popping open chocs. Snippet a box of s like ‘don’t ex pect them to help the read last long’ er imagine th eir gift in actio exciting and n in an positive way. Dramatic sta excited - even rt gets you if you’ve seen the product b efore.
too gimmicky Copy: ocolatier Collection Ch r Lindt Maste m. Nom nom nom nom no ily get their Let your friends and fam -so-mouth-watering chops around these oh ooling over before chocs that they’ll be dr one will be the lid is even off. No rty. Top flight cultural choco-late for this pa each and cooks have formulated it the British every chocolate to su r top hats to that palette - let’s raise ou b! and jump in a black ca us Why it doesn’t work for rase ph t itgeis Crass overuse of a ze iro the ny at the start. This lacks . This pun is too which might make it ok thrown in without laboured. Superlatives p flight’ actually any real link such as ‘to Raising top hats undermine our writing. t that funny, is kind of ok, but just no erence is too and the black cab ref sh for us. London-centric and po
12: Come into the gallery Best practice examples and inspiration Here we’ve got examples of what things should look like when we bring all our brand elements together online and in the physical world. This is the good stuff, and the fun stuff our best practice in bringing it all together. We can go way beyond just plonking a logo on everything, and think about how our words, typography, colours and photography can all be expressions of the new world of Moonpig.
moonpig – brand identity
t to update screen sho
13: Gallery Best practice examples and inspiration ‘Branded elements’ don’t mean simply plonking a logo on a range of items. Here we can have fun and maximise each touch point to bring our Moonpig personality to life.
moonpig – brand identity
14: Gallery Best practice examples and inspiration
moonpig – brand identity
15: Gallery Best practice examples and inspiration Another blinding example...
moonpig – brand identity
go forth and make
!
Questions? Drop by and ask the brand team, or email us on brand@moonpig.com
All content and IP Š Moonpig 2017 / moonpig.com