This Brand

This Brand
Code and Send(TM) rectangular, large, on-white logo

Fig 1. Large, rectangular, on-white version of the logo.

If you are seeing a tiny spot below letter "S", don't start cleaning your display. It's part of the logo and it comes from the real cartridge paper's particle I scanned.

A logo for a brand is like a flag for an army. Both are your most valuable assets. So let’s talk about our logo.

What properties do we want the Code and Send brand to convey? The Code and Send is: bold, clear, modern, technical, happy and with a bit of a creative flair. Also, precise and exact.

Which font is bold, clear, modern (and the most popular among the tech companies)? Definitely Proxima Nova. So give me a thick juicy cut of it, please. As for the creative flair, I’m going to underline it with my favourite blue highlighter, scan it and trace it in Illustrator. Done.

The precision is conveyed with 1px lines on our web pages, and the exactness is expressed with SVG's which are always sharp, no matter the screen size.

Code and Send(TM) rectangular, large, on-white logo

Fig 1. Large, rectangular, on-white version of the logo.

If you are seeing a tiny spot below letter "S", don't start cleaning your display. It's part of the logo and it comes from the real cartridge paper's particle I scanned.

Code and Send(TM) square, white logo

Fig 2. Square, on-white version of the logo.

Code and Send(TM) square, white logo

Fig 2. Square, on-white version of the logo.

Sometimes the space requires a square logo. For example, compare Fig. 1 and Fig. 2 — notice how square version, Fig. 2 is way bigger in twice as small space. That's why I use it in the website's sidebar, on the icons and stationery.

Just like in the logo's horizontal version, I manually kerned all the letters. The gap between the lines is equal to the stem of the letter N. Every line is exactly where I want it to be.

Each underline has a spot. They serve two purposes: 1. they make logo more paper-based (because each spot is a real, scanned and vectorised particle of the A4 cartridge paper sheet); 2. they make the logo more organic and natural (and contribute to the brand's creative flair).

By the way, I treat blue underlines as a decorative elements. I prefer to use them whenever possible, but if they stand in a way, I'm happy to remove them too. Let's take the bag on the bottom of this page, for example (). That bag's purpose is to put the words "Code and Send" into peoples' brain cortices at a medium-to-long distances, in the street. To achieve that you need a maximum contrast, and the most contrasting combination is yellow-black. The yellow text wouldn't go well with blue underlines, so I put the underlines out to pastures and keep the letters only. Same with a blue highlighter () — it's all blue around the logo already — no need for a blue underline.

Code and Send fleet

Fig 3. Fits all — from planes to invoices.

Small Bits

There are few approaches to squeeze your logo into very small spaces, let’s say, 16×16px icons:

  1. just to downscale the logo image and use it as it is;
  2. to downscale and edit the pixels or even completely recreate the letters from pixels;
  3. to create an alternative logo in a lighter font-weight.

The choice depends on your strategy. Lighter font-weight-one is sound. However, I'm not a big fan of it. You see, when you reduce the font-weight, my logo becomes less bold. But bold is one of the brand features! And we want bold! I can't make the icon less bold — that would be like asking Metallica to turn down the volume on a smaller gig… No — they're always loud. Like we're bold.

Code and Send Plane

Fig 4. Few examples from 22 favicon set.

Dark Side

Sometimes it’s dark around. We prepared for that too.

The main challenge was to maintain the contrast between letters and underline.

Code and Send(TM) rectangular, large, black logo

Fig 5. Rectangular large black version.

You see, white letters and blue underline don't contrast well. I decided to add a shadow to the letters to fix this.

Conceptually, this logo turns from being on one plane to being on two planes. This breaks up this website's flat-everywhere design. But that's fine — the black logo is not meant to be used on this website anyway — it's for partner websites or other (dark) things.

Code and Send(TM) rectangular, large, black logo

Fig 5. Rectangular, large black version.

Code and Send tweet
Unofficial Code and Send bag
Code and Send T-Shirt
Q&A & FAQ
question 1
question 2
question 3