View Static Version
Loading

NikkiJOs Logo Style Guide scroll down to get started

“Every journey begins with a single step.” — Maya Angelou

File Types

Here is the basic jpeg version.

JPEG

It will always have a white square around it like this. Most often, you will be using it on a white page and this won't be an issue as it will blend seamlessly with the background. However, it can also be an effective way to set the logo apart from a dark background.

Sometimes you may want the Logo to blend into or overlay the background, then use the PNG file type.

PNG

Logo PNG
White PNG

For instance on a mobile landing page,

this logo has no background but is also opaque

or lower the opacity and the background will show through the logo. This works best with the white PNG as it will make the color version light pink.

A PNG is like window signage.

Color

It is okay to use the lighter shades of red also ( the word color is a shade of the Logo color). Use these for variation and supporting materials only. The main brand will have color standards to reinforce a consistent identity.

Your Logo will need two standards one for web and one for print.

Web Color

The hexadecimal # is 921E30

r=148 g=32 b=48

Each hex # has an RBG equivalent. Your color is r=148 g=32 b=48

coffee beans

Print Color

I picked your color from a swatch book of Pantone Colors meant to be printed on coated paper. The Pantone number is 187c. This is a specific ink known as a spot color. If the print shop doesn't have that ink it can be made from mixing Cyan, Magenta, Yellow and Black inks, CMYK for short. Here are Adobe's CMYK equivalents.

c=23, m=100, y=88, k=15

You will notice Pantone suggests different RGB and hex numbers than I did. I tried them out and they looked too bright and pink. Everyone seems to have different color conversions and I thought Adobe did a better job matching the printed color from my book to what I'm seeing on screen, so I went with those conversions. Here is another example of the same swatch with different numbers. The only way to truly determine your print formula will be to get some stuff printed and check it out.

print examples

p.s. the mock-up carved sign has lots of options for customization check it out here. No need to buy the license I already have it.

Logo Usage

Your logo will need guides for placing it with other logos. One basic element, in this case, the most inner circle can be easily replicated and used to determine how far apart your logo is to placed from other elements on the page. This is called "Stand Off."

stand off and minimum sizes

What's if for?

"Stand Off" example

Word Mark and Logo

Wordmark and logomark files give you access to the different elements of the logo and break it apart. You also have an alternate use logo to use when you just want the logo written out flat.

Wordmark and Logomark

What's it for?

These elements will allow you to create simple animations and social media posts like these.

Credits:

Created with images by Neven Krcmarek - "untitled image" • Daria-Yakovleva - "coffee chocolate cinnamon" • kellykareline - "coffee coffe sugar" • Hannes Wolf - "Metal typesetting" • Bruno Martins - "untitled image" • Mike Marquez - "untitled image" • werner22brigitte - "print shop letters steinbach" • Squared.one - "Print and donate to Doctors Without Borders" • Clem Onojeghuo - "untitled image" • Charles Etoroma - "untitled image" • Marco Djallo - "Reality Shapers"

NextPrevious

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a copyright violation, please follow the DMCA section in the Terms of Use.