OuttaCode Brand Identity

BRAND IDENTITY

Brand Identity Our sunset colors evoke Outtacode’s bold and luxurious brand. A sunset color palette resembles an opportunity to start fresh. That all begins with finding your personal style.

Sunset is nature’s beauty so we want to inspire our audience to learn how to find their own unique style. Fashion sparks conversation and unfolds anyone’s authentic personalities.

Beauty is unique to everyone and can come naturally just like a sunset.

Contents Brand Personality

01

Logo

02

Typography

06

Color

12

Imagery

15

Brand Personality

Authentic

Vibrant

Honesty Original Inclusivity

Eclectic Genuine Positive

Luxe

Trailblazing

Consistent / clean Sophisticated Expensive

Fresh Modern Groundbreaking

BRAND PERSONALITY

01

Logo

OUR LOGO OuttaCode logo is composed of our two fonts Proxima Nova Medium and Editor’s Note Italic. The horizontal logo is the primary logo and should be used in most cases.

The stacked logo is the secondary logo and should be used for smaller spaces like the Instagram icon. Always use the logo files. Do not re-create.

Primary Logo

LOGO

Secondary Logo

02

LOGO SPACING Exclusion zone is logo spacing and it ensure legibility and recognition of the logo. This ensures proper spacing so that text and graphics don’t overlap it or placed to close to it.

There should be enough breathing room around the logo. A good practice is using the size of the “O” or the height of the lettering as a guide for the spacing around the logo.

Primary Logo

LOGO

Secondary Logo

03

USAGE ON BACKGROUNDS Colored logos should only be used on white backgrounds and white logos should be used on colored or gradient backgrounds.

LOGO

04

LOGO MISUSE What not to do for logo usage

x

Do not use drop shadow

x

Do not use two different colors for each word

x

Do not use gradient

x

Do not use an outline

x

Do not rotate the logo

x

Do not misalign the logo

LOGO

05

Typography

TYPEFACES Primary typeface is Editor’s Note best used for logo and headlines. Secondary typeface is Proxima Nova and it is best used for body copy and sub-copy.

Primary Typeface

Editor’s Note Regular Editor’s Note Italic

Secondary Typeface

Proxima Nova Bold Proxima Nova Semibold Proxima Nova Medium Proxima Nova Regular Proxima Nova Light

COLOR

06

TYPOGRAPHY HEIRARCHY Fonts can be paired together to create visual hierarchy and emphasize headings. This can be achieved using various fonts, weights, sizes, and color. Hierarchy is one of the most important considerations in design.

EYEBROW

Your Heading Goes Here Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is an example to use for the website. Editor’s Note should always be used as a heading so that it stands out from body text. for the website. Eyebrow text is used is as a keyword and should be a smaller font in bold weight.

COLOR

Your Heading Goes Here Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

In some occasions, Proxima Nova with a bold weight can be used distinguish heading and body text. Body text should used be used with a light or regular weight Proxima Nova font.

Fashion is an art form dedicated for anyone to express themselves freely and openly Italics can be used to emphasize important words in a body of text for Instagram posts and website.

07

TYPOGRAPHY DONT’S Not all font combinations work well to emphasize information and for clean readability.

Take font decorations, font size, and accessibility into consideration when pairing fonts.

EYEBROW

EYEBROW

EYEBROW

Your Heading Goes Here

Your Heading Goes Here

Your Heading Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

x COLOR

Do not use Editor’s Note as an eyebrow text. Eyebrow texts are often small and lighter in color so an easier font to read, Proxima Nova, is a better choice.

x

Do not use more than two of the primary colors together. Mix in neutrals otherwise the layout will be too busy.

x

Do not use all of one type of weight (except if it’s all regular) for all the different font types. This is an example to not use italics for every type of text.

08

WEBSITE These are the fonts to use for the website. Apply the same suggestions for typography heirarchy to the website.

Heading

Body

Editor’s Note Regular Editor’s Note Italic

Proxima Nova Bold Proxima Nova Semibold Proxima Nova Medium Proxima Nova Regular Proxima Nova Light

Subheading

Example H1

How to style outfits for concerts

H2

Look your best and feel comfortable all summer long with our best concert fashion picks.

P

Proxima Nova Medium BUTTON

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

BUTTON

Button BUTTON

COLOR

09

INSTAGRAM POSTS Font pairing suggestions and how to use fonts with images

NYC Meet Up Shanyah’s Summer Favorites

Time: 4:00-6:00 PM Where: Central Park RSVP By: April 24 2024

What you wear is how you present yourself to the world, especially today, when human contacts are so quick. Fashion is instant language.

Travel Essentials Guide

How to start your summer in style

with Outta Code

Mix and match fonts and refer to typography heirarchy

COLOR

If background images are very busy, add a background color to the text so that text is readable

Break up text with right-aligned and leftaligned paragraph styles

Use text over a plain background to communicate quotes

10

INSTAGRAM STORIES Font pairing suggestions and how to use fonts with images

Styled by

Shanyah

Nail Art Inspo OUTFIT INSPO

Best Street Style Pieces for Summer Gradients

Best Boots for Fall Sales, promos and shoe links

COLOR

DATE: 1/1/25

LINK IN BIO

11

Color

BRAND COLORS Dark Denim

Burgundy Wine

Royal Purple

Fiery Red

Sunset Orange

Peach Passion

HEX: #21304A RGB: 33,48,74 CYMK: 55,35,0,71

HEX: #671C32 RGB: 103,28,50 CMYK: 0,73,51,60

HEX: #67356f RGB: 103,53,111 CMYK: 7,52,0,56

HEX: #D41E3F RGB: 212,30,63 CMYK: 0,86,70,17

HEX: #FF8745 RGB: 255,135,69 CMYK: 0,47,73,0

HEX: #FCCEBF RGB: 252,206,191 CMYK: 0,18,24,1

Neutrals

Black

White

HEX: #000000 RGB: 0,0,0 CMYK: 80,70,70,100

HEX: #FFFFFF RGB: 255,255,255 CMYK: 0,0,0,0

COLOR

Outta code’s colors resemble a warm sunset. Dark Denim is a rich relaxing color. Burgundy Wine and Royal Purple resemble sophisication. Fiery Red, Sunset Orange and Peach Passion blend into a powerful warm palette.

12

GRADIENTS Gradients resemble a sunset. They are created in a mesh gradient style and 3-6 of the brand’s 6 colors should be used at a time.

Best Boots for Fall COLOR

13

ACCESSIBILITY Color contrast should pass accessibility for web design. This also applies to graphic design because accessibility checks ensure clean readability. Darker backgrounds should be paired with a light colored foreground (commonly the font).

Dark Denim

Burgundy Wine

Royal Purple

Fiery Red

Sunset Orange

Peach Passion

Light weight font with dark background

A

A

A

A

A

A

Bold weight font with dark background

A

A

A

A

A

A

Light weight font with light background

A A

A A

A A

A A

A A

A A

Bold weight font with light background

A COLOR

A

A

A 14

Imagery

COLOR BLOCKING THEMES Themes for Instagram feed will be pre-planned and coordinated in threes.

9 posts for 1 color

IMAGERY

6 posts for 1 color

3 posts for 1 color

15

PHOTOGRAPHY Photography for our brand are original images. Stock images should be avoided but only used when really have to. Create variety by using various camera angles, photos of people vs. objects, and experiment with lighting. Most of the images should also stick to a specific color palette according to the themes. Coloring for the themes don’t have to be the same as the brand’s 6 colors.

IMAGERY

16