| layout | title | permalink | colour | hero-title | hero-subtitle | hero-btn | hero-btn-url |
|---|---|---|---|---|---|---|---|
page |
Brand Guidelines |
/brand/ |
pink |
This company is more than a collection of individuals. It represents an ethic that is larger than any one individual. We all contribute to it by working here. Where this ethic is presented to the outside world, we call this our brand. |
The purpose of brand is to strongly identify things that are consistent with the company ethic. A lot of this is visual, but text, audio, and physical artefacts can all contribute to the brand.
By taking every opportunity to reinforce the brand, we strengthen ourselves as a team. This contributes directly to the success of the company, and by association you as an individual.
The brand assets are kept here. Do not keep a local copy of branded elements such as templates or logos as these are liable to be updated.
If in doubt about the use of these assets, ask a member of the design team.
There are two logos, the square logo and the rectangle logo. The pebble {code} logo is set in FF Meta Bold.
This is the default logo. It is used on the company website, and any paper document such as wireframes, statements of work or credentials. There are four versions:
- Pink on white (for print documents).
- White on Pink (for digital documents not intended for print, and the company website).
- Pink on Transparent (for use on top of any other brand colour where appropriate).
- White on Transparent (for emergency use where another background is required. There needs to be a very good reason to use this over the other options).
There should be a single space between pebble and {code}. Where possible the curly braces ({}) should be included. In the past there have been incorrect versions of the logo that have crept in. If you see any of the following incorrect uses, you should let the owner of the document know that they need to correct this.
-
pebble {code} ✔
-
Pebble {Code} ✘
-
pebble{code} ✘
-
pebble code ✘
This logo is primarily for avatar situations, where a square branded element is required. For example in listings sites, or for Github. It should not be used in place of the rectangle logo (e.g. on a print document).
pebble pink
RGB: 237, 079, 126
HEX: #ED4F7E
HSL: 342, 81, 62
pebble ink
RGB: 107, 116, 130
HEX: #6B7482
HSL: 216, 17, 50
pebble blue
RGB: 014, 162, 220
HEX: #0EA2DC
HSL: 197, 88, 46
pebble aqua
RGB: 055, 190, 192
HEX: #37BEC0
HSL: 181, 55, 48
pebble green
RGB: 164, 206, 078
HEX: #A4CE4E
HSL: 080, 57, 56
pebble purple
RGB: 155, 092, 164
HEX: #9B5CA4
HSL: 293, 28, 50
pebble orange
RGB: 250, 173, 064
HEX: #FAAD40
HSL: 035, 95, 62
pebble blue-grey
RGB: 59, 82, 114
HEX: #3B5272
HSB: 214, 48, 44
The pebble {code} fonts are:
- Brandon Grotesque (for headings on pebblecode.com)
- Brandon Text (for headings everywhere else)
- Meta (for body text)
The fonts can be accessed here.
Notice that headings are always capitalised. Drop Shadows can be used optionally. The drop shadow values are:
text-shadow: 3px 4px 0 rgba(0,0,0,0.2);
This document is set in the correct body copy style, i.e. Meta, pebble ink. Blockquotes may be highlighted in pebble pink:
Big Yellow Taxi there by Joni Mitchell, a song in which she complains that they 'paved paradise to put up a parking lot' - a measure which actually would have alleviated traffic congestion on the outskirts of paradise. Something which Joni singularly fails to point out, perhaps because it doesn't quite fit in with her blinkered view of the world. Nevertheless, nice song.
This branding element is used in places where visual interest is needed to make the branded artefact stand out. Sometimes the pebble pink can become too slab-like and overwhelming. The white-on-pink banner breaks up that effect somewhat. The pink-on-white banner is useful for title pages of documents.
It is easier to specify visual guidelines for a brand than written ones. But the brand should have a specific 'voice'. In particular, the brand voice should be:
- Not overly formal. This means that we should avoid overly wordy formulations. We should avoid words like 'formulations' - here it would be better to say something like 'phrases'. There is enough jargon in the technology world for anyone - adding a stuffy feeling to our writing does not help to clarify matters.
- Not too informal. In general we should not use shortened forms that are common in speech, for example "you're", "they're", "don't". The voice does not employ slang unless absolutely necessary.