Brand Guidelines, 2009
02.
Who?
Halogy is... a number of things to a number of people. It’s a business tool, it’s a selling point, it’s a application, it’s a helping hand and it’s the guardian of your website. Above all, Halogy is friendly. It’s there for you when you need it, and unobtrusively in the background when you don’t. To the ‘professional user’, the logotype says:
“I’m all you’ll ever need. I’m professional, allencompassing, and importantly, I work” To the ‘home user’, the logotype says:
“Trust me. I’m easy to use, friendly and fun. I’m the tool to make your business thrive”
03.
Atomic Detail
Halogy is... everything you need a CMS to be; the central hub to your company’s online presence. Circles say this better than words ever could. The logotype is carefully constructed from a grid of 9 exact circles. End-to-end, the circles form the base to the word Halogy.
04.
Thinking Outside the Box
Halogy is... a bolt-on CMS. You can add a page, shop or even a blog - then remove them just as simply. The logotype is modeled around this unique idea.
05.
The Friendly Professional
Halogy is... rounded and friendly on the face of things, but it’s not to be mistaken for a push-over. The logotype has been carefully modelled to give a friendly first impression, whilst maintaining unique and professional undertones. We achieve this by meeting circular devices with a distinct grid. This uniform grid and the meeting point of angles is what keeps the logotype legible.
06.
Interwoven Simplicity
Halogy is... more than just a repository of information - it’s the entity that ties together all aspects of your online presence. The intersection of letters gives shows unity and relationship of modules. You know instinctively that Halogy will bring together all parts of your website to create a whole.
07.
Space to Breathe
Halogy is... open - it’s the central part of the puzzle... it’s anything but pushed aside. When represented online or in print - the logotype demands a little bit of space to breathe.
When placing the logo, the clear space around the entire logotype is 1/2 that of the ‘O’. This imaginary border begins at the vertical of the ‘h’ and ends at the vercial of the ‘m’ on TM. Nothing other than colour should breach this area.
08.
Trade Mark
Halogy is... a Trade Mark, a seal of excellence and professionalism. So where possible, we like to show off a little.
To determine the correct spacing of the TM we move the T to the same x-axis as the ‘Y’ decender. Drawing a line from the furthest most point of the ‘M’ we determine the midpoint of the ‘M’ in the final TM (right)
09.
Small is Mighty
Halogy is... beautiful regardless of size. However, when used below a certain size, the logotype must evolve to maintain legibility.
Several changes occur when re-sizing the logotype - these changes must be adhered to as soon as you can no-longer see the finesse at the bottom of the ‘a’. Firstly, the ‘a’ becomes sheared at the bottom. Secondly, the ‘a’ ‘l’ and ‘o’ move apart to create a visible white space (at the least, 1px). Thirdly, the ‘TM’ becomes a circle.
010.
Chameleon
Halogy is... a friendly house guest. It’s not fussy about where it sits, it doesn’t demand too much attention and it won’t cause a fuss. With that in mind, the logotype has been created to work in any environment.
Where possible, the Halogy blue must remain until legibility is questioned. It can therefore sit neatly on a black background without the need to revert to black and white.
11.
Chameleon...
Halogy is... the happy middleman between you and your website - but it’s got nothing to hide. This is what makes Halogy so brilliant, you can administer as much or as little as you want. We can reflect this in the application of the brand, naturally.
When used in conjunction with a photographic image or texture there are two ways we can treat the logotype. The technical approach: By masking an image with the logotype, we give the impression that there is more to Halogy than meets the eye. Note that the ‘TM’ is a colour shade of the photograph, not a masking element. The blocked approach: When presenting to an ‘average’ user, Halogy is the center of their online universe - therefore it should be confident in it’s application. A white-out (also acceptable in black) is the best way to convey this. Nothing less than 100% opacity is acceptable.
12.
Graphic Devices
Halogy is... appreciative of its environment. It knows it’s place - and sometimes a big logo just isn’t appropriate. This is why a unique graphical device has been created to use wherever and whenever a full logotype can’t be placed... in a footer, as a watermark or embossed on a business card, to name but a few places!
Only use on occasions where a full logotype cannot be used. Rules regarding colour, size, clear space and orientation still apply. The graphic device (bottom) should never appear in full colour - only the select greys (next).
13.
Halogy Blue
Halogy is... blue, but not corporate. Blue, but not cold. Blue and friendly, but not too friendly. Halogy is just the right amount of blue. Colour is important to convey the message of friendly, functional and approachable. The colour pallet is accompanied by a select few swatches of complimentary greys. Black should never be used - instead, an off-black grey.
Do not change these colours, but feel free to compliment with an additional secondary pallet.
# 29C4f0
# 2194CD
# CDD2D5
# AFB7BC
# 899094
# 171717
14.
The Halogy ‘Solar System’
Halogy is... your friendly middleman. It’s what separates you, and the intricate workings of your website. In that sense, Halogy is a window. The colour gradient that sits ‘behind’ the logotype is a careful mix of two colours to give a subtle depth... not glassy gradiet.
The dotted line shows the outside of the radial gradient, which originates from the lighter blue, and extends to the darker colour. The lighter blue, however, begins its decay at 40% (not default 0%). A circular radial mask should never be used. A traditional linear gradient should never be used. The Trade Mark should never comprise part of the overall mask - instead it should be coloured the same swatch as the originating (lighter) blue.
15.
Do’s and Don’ts
Halogy is... consistently well dressed. Change is bad for a brand, so consistency is key to brand recognition and development. A few simple rules can go a long way.
Clockwise from top left: Don’t use a new gradient, only the radial solar system as outlined previously. Don’t change the colour of the logotype Don’t introduce any new graphical elements, or encroach the clear space, as outlined previously. Don’t rotate the logotype - only ever flat. Do use common sense - and you’ll be fine!
halogy!
16.
Say Something!
Halogy is... unique. So unique, in fact, that the
VAG Rounded Black
type style used in the logotype shouldn’t be replicated anywhere else. Introducing a new friend, VAG. This typeface is the ‘ying’ to Halogy’s ‘yang’; a distinctive and complimentary element.
VAG should be used sparingly and ideally only as a primary heading (h1 and h2). Too much VAG makes the Halogy universe cluttered and bloated.
abcdefghijklmno qrstuvwxys,
ABCDEFGHIJ KLMNOPQRS TUVWXYZ. 1234567890™
17.
Write Something!
Halogy is... an application at it’s core, and having learned a thing of two from it’s surroundings (WordPress, Facebook, Basecamp and SquareBox) - it’s picked up a thing or two. One of those things is Lucida - the perfect typeface for anything that needs to be said in a Halogy tone of voice.
Lucida Grande is the primary font of choice, followed by Trebuchet MS, Arial or any sans-serif where none of these are available.
Lucida Grande, Regular
abcdefghijklmno qrstuvwxys,
ABCDEFGHIJ KLMNOPQRS TUVWXYZ. 1234567890™