Design Standards

Moodboard

The moodboard was curated to express the “mood” of the brand and to inspire all visual decisions. We are shifting the visuals to include a lot more minimalist themes, more white space, and less of the deep colors for backgrounds. This has a higher end, unisex feel, and gives the symbolism of space for our client’s brands to take center stage.

Logos

Primary logo use on white/light backgrounds

Logo use on dark backgrounds

Logo on photo backgrounds

(Make sure it is readable.)

Primary

Colors

My primary brand color is a deep blue, which speaks to the depth of my magician archetype brand. The “blurple” and teal add design interest and variety. Keeping the color scheme on the cool side speaks to the information, knowledge, and wisdom I offer.

*It’s OK to use shades of these colors, but stay within the color palette.

The primary colors are used on kayeputnam.com and on the clarity code materials.

DARK

BLUE

#160a3b

C 99%

M 98%

Y 40%

K 53%

Use for: Backgrounds, text colors

NORTHERN

LIGHTS

#81c2ba

C 50%

M 6%

Y 30%

K 0%

Use for: Accents, special text

BLURPLE

 

#4e32a9

C 83%

M 90%

Y 0%

K 0%

Use for: Links, secondary CTA, small Backgrounds, accents

DARK

TEAL

#336a70

C 82%

M 44%

Y 48%

K 17%

Use for: accents, backgrounds

DARK

GREY

#21242a

C 77%

M 68%

Y 59%

K 68%

Use for: Backgrounds, text colors

WARM

White

 

#e9e8e7

C 7%

M 6%

Y 6%

K 0%

Use for: Backgrounds, text colors

BNB

Colors

The Brand New Brand and Brandfluency course colors are brighter and more casual.

DARK

BLUE

#160a3b

C 99%

M 98%

Y 40%

K 53%

Use for: Backgrounds, text colors

BLURPLE

 

#4e32a9

C 83%

M 90%

Y 0%

K 0%

Use for: Links, secondary CTA, small Backgrounds, accents

YELLOW

#e8c830

C 11%

M 17%

Y 95%

K 0%

Use for: VIP CTA’s, accents

NORTHERN

LIGHTS

#81c2ba

C 50%

M 6%

Y 30%

K 0%

Use for: Backgrounds, text colors

WARM

White

 

#e9e8e7

C 7%

M 6%

Y 6%

K 0%

Use for: Backgrounds, text colors

Accents / Textures

KAYE’S COPPER

Use for: Clipping mask for borders, icons, logo, text (especially the script)

PHOTO OVERLAY

Photo with #29273d layer set to multiply

WHITE MARBLE

Use for: Backgrounds

BRAND PATTERN

Use for: Backgrounds. Can be recolored using other brand colors.

PHOTO GRADIENT OVERLAY

Gradient overlay set to multiply. #4e32a9 to #81c2ba.

Use for: H1-H3 headlines, block quotes

Eksell Display

ABCDEFGHIJKLMOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%^&*()_+-=~

Use for: H3-H6, buttons, menu

Mr. Eaves Bold

ABCDEFGHIJKLMOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%^&*()_+-=~

Use for: Body / paragraph text

Mr. Eaves Book

 

ABCDEFGHIJKLMOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

!@#$%^&*()_+-=~

Use for: Accent words (use sparingly)

Born Ready Slanted
ABCDEFGHIJKLMOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()_+-=~

headline 1 /

#160a3b

50px

1em height

Body text /

#000a28

24px

1.7em height

Links /

#4e32a9

bold, underlined

quote /

#4e32a9

30px

1em height

headline 4 /

#000a28

26px

all caps

1.7em height

Headline Level 1

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. This is a link.

  • Example
  • Example
  • Example
  • Example

“This is a quote from a very impressive person.”

HEADLINE LEVEL 4

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image Style

Mockups of courses, products, resources (prefer mac)

high tech, futuristic

starry nights, northern lights

still life photos my favorite brands, things 

professional photos of me & team

mockups of client work

books, pencils, technology

diagrams, visual information

Image Don’ts

Super corporate or brick & mortar focused images

The geometric shapes are good, but the colors are way off

beautiful but too feminine for my brand

graphics with old fonts/styles (manus script, playfair headlines, josefin sans headlines, raleway body)

pink, woo, crystals

this would never happen in real life. also prefer a mix of genders & races in photos