Foundation

Introduction

Our brand is not just about how we look, it’s about how we make people feel. It’s the impression that we make – the first impression but also the lasting one.

Our brand promise to ‘bring moments of joy to everyday shopping’ should sit at the heart of everything for our users, our partners, and our employees. In order to effectively deliver on our promise we must present ourselves in a unified way that resonates with these audiences.

These guidelines have been developed to allow anyone working with our brand to become familiar with it’s execution and consistency. The following clearly outlines the core elements of our identity. It is a valuable tool designed to help all communication efforts on behalf of Shopkick — in all digital formats, print materials, presentations, and promotional items.

Please take the time to review this guide carefully and use these principles whenever our brand is being represented. Should you ever have any questions regarding Shopkick brand standards, please get in touch with the Design team.

Our Vision & Mission

Our Brand Promise

We bring moments of joy to everyday shopping

Logo

Primary logo

Our primary brand logo is a typographic wordmark (sometimes referred to as a logotype). The letterforms have been set in a clean lowercase font which is friendly, modern, and distinct. It may be used in either our Shopkick blue or white — preference is determined by the background on which the logo is set.

Usage

To preserve the integrity of our logo, a minimum clearspace should always be maintained. This allows for clarity and focus of the Shopkick brand when used next to other visual elements. The clearspace is determined by the width of the logo’s “s” and surrounds all sides of the logo.

Incorrect use

Our Shopkick logo should be treated with care. Please don’t modify the logo in any way. The following are examples of situations and uses that should be avoided.

Stretched or skewed
Other colors
Rotated
Visual effects or treatments
Placed on colors other than Shopkick blue or white
Placed on busy backgrounds
Change the lockup

Shopkick “s”

The Shopkick ‘s’ is our logo symbol and is derived from our primary logo. It should only be used for audiences who are familiar with the Shopkick brand, or in situations where space is very limited and the legibility of our primary logo is compromised.

The logo symbol may can be used with or without a container. Clearspace must always be maintained in both situations.

Tagline

Tagline purpose

Our tagline works together with our name to convey our core purpose and supports our brand promise. It succinctly encompasses the rational and emotional benefits of Shopkick and has been created to entice our audience, connecting with the big idea and leaving them wanting more.

Our tagline helps to:

  • Clarify
  • Express
  • Support
  • Differentiate

Note: A tagline is not a headline and shouldn’t be used as such. Instead, our tagline should be used to help support our messaging and help to contextualize who we are and what we do as a business.

Tagline Usage

Our tagline is primarily an outward facing statement to communicate with audiences that do not know who we are or what we do. It should be used to support communication and storytelling, not to lead it.

Use for new audiences

Use in communications where the intended audiences are new to Shopkick – new users, new brand and retail partners, and new employees.

Examples

  • New user acquisition marketing
  • Business cards
  • Pitch decks for new prospects
  • Event marketing collateral
  • New hire orientation
  • Advertisements

Special uses for existing audiences

Use selectively in communications for our existing audience as a sign off and a way to reinforce brand promise.

Examples

  • Email signatures
  • Footers

Don’ts

  • Do not use our tagline separate from primary logo (only use in lockup)
  • Do not use with our ‘s’ logo symbol
  • Do not use our tagline for internal or employee communications
  • Do not use in headers or prominently as a primary focus
  • Do not use inside our app

Note: Before using the tagline in existing user or partner communications please consult with the design team.

Tagline clearspace

Always leave a minimum clearspace equal to the width of the “s” from the logo around all sides of the tagline lockup. There tagline lockup comes in two layout options — 1. stacked, logo above tagline and 2. horizontal, tagline to the right of the logo. Please don’t modify pre-made tagline lockups.

Tagline examples

Visual Assets

Primary colors

Our primary palette should be used for the foundational elements of any design, creating recognition and reinforcement of our brand.

Note: Pantone is not preferred — use only when single color reference is required.

Click to copy HEX colorCopied! Sk Blue (3)

HEX
#0098D6

CMYK
76, 26, 0, 0

PANTONE
2995 C

Click to copy HEX colorCopied! White

HEX
#FFFFFF

CMYK
0, 0, 0, 0

Accent colors

Our accent colors are used to support the primary brand colors in illustrations, confetti, and other visual assets.

Click to copy HEX colorCopied! Sk Yellow (3)

HEX
#FDBA12

CMYK
0, 29, 100, 0

Click to copy HEX colorCopied! Sk Orange (3)

HEX
#F68B1F

CMYK
0, 55, 100, 0

Click to copy HEX colorCopied! SK Red (3)

HEX
#E31E30

CMYK
5, 100, 90, 0

Click to copy HEX colorCopied! Sk Pink (3)

HEX
#E64A8F

CMYK
0, 85, 5, 3

Click to copy HEX colorCopied! Sk Purple (3)

HEX
#97579D

CMYK
46, 78, 4, 0

Click to copy HEX colorCopied! Sk Teal (3)

HEX
#009E95

CMYK
100, 5, 50, 2

Click to copy HEX colorCopied! Sk Green (3)

HEX
#1C9D4A

CMYK
78, 0, 92, 15

Tint, Shade & Neutral colors

These colors balance and ground our primary and accent colors — tints and shades should be used for creating depth against our Shopkick blue and our grey neutrals can be used for more functional components, like text and borders.

Click to copy HEX colorCopied! Blue 1

HEX
#ACDDF0

CMYK
30, 0, 0, 0

Click to copy HEX colorCopied! Blue 2

HEX
#58BCE4

CMYK
60, 7, 0, 0

Click to copy HEX colorCopied! Blue 3

HEX
#0098D6

CMYK
76, 26, 0, 0

Click to copy HEX colorCopied! Blue 4

HEX
#1074A2

CMYK
76, 26, 0, 30

Click to copy HEX colorCopied! Blue 5

HEX
#004E71

CMYK
76, 26, 0, 60

Click to copy HEX colorCopied! Yellow 1

HEX
#FEE3A0

CMYK
0, 9, 44, 0

Click to copy HEX colorCopied! Yellow 2

HEX
#FECF5A

CMYK
0, 18, 76, 0

Click to copy HEX colorCopied! Yellow 3

HEX
#FDBA12

CMYK
0, 29, 100, 0

Click to copy HEX colorCopied! Yellow 4

HEX
#BC8C0B

CMYK
0, 29, 100, 30

Click to copy HEX colorCopied! Yellow 5

HEX
#7F5E00

CMYK
0, 29, 100, 60

Click to copy HEX colorCopied! Orange 1

HEX
#FBD1A5

CMYK
0, 19, 37, 0

Click to copy HEX colorCopied! Orange 2

HEX
#F9AE63

CMYK
0, 36, 69, 0

Click to copy HEX colorCopied! Orange 3

HEX
#F68B1F

CMYK
0, 55, 100, 0

Click to copy HEX colorCopied! Orange 4

HEX
#B76812

CMYK
0, 55, 100, 30

Click to copy HEX colorCopied! Orange 5

HEX
#7D4400

CMYK
0, 55, 100, 60

Click to copy HEX colorCopied! Red 1

HEX
#F3A5AC

CMYK
0, 43, 19, 0

Click to copy HEX colorCopied! Red 2

HEX
#EB626F

CMYK
0, 77, 45, 0

Click to copy HEX colorCopied! Red 3

HEX
#E31E30

CMYK
5, 100, 90, 0

Click to copy HEX colorCopied! Red 4

HEX
#A91120

CMYK
5, 100, 90, 30

Click to copy HEX colorCopied! Red 5

HEX
#740004

CMYK
5, 100, 90, 60

Click to copy HEX colorCopied! Pink 1

HEX
#F5B6D2

CMYK
0, 35, 0, 0

Click to copy HEX colorCopied! Pink 2

HEX
#EE80B1

CMYK
0, 63, 0, 0

Click to copy HEX colorCopied! Pink 3

HEX
#E64A8F

CMYK
0, 85, 5, 3

Click to copy HEX colorCopied! Pink 4

HEX
#B23670

CMYK
0, 85, 5, 30

Click to copy HEX colorCopied! Pink 5

HEX
#7B1B4B

CMYK
0, 85, 5, 60

Click to copy HEX colorCopied! Purple 1

HEX
#D5BCDB

CMYK
14, 27, 0, 0

Click to copy HEX colorCopied! Purple 2

HEX
#B489BE

CMYK
29, 51, 0, 0

Click to copy HEX colorCopied! Purple 3

HEX
#97579D

CMYK
46, 78, 4, 0

Click to copy HEX colorCopied! Purple 4

HEX
#723F77

CMYK
46, 78, 4, 30

Click to copy HEX colorCopied! Purple 5

HEX
#4D2351

CMYK
46, 78, 4, 60

Click to copy HEX colorCopied! Teal 1

HEX
#99D8D5

CMYK
39, 0, 19, 0

Click to copy HEX colorCopied! Teal 2

HEX
#4DBBB5

CMYK
65, 3, 34, 0

Click to copy HEX colorCopied! Teal 3

HEX
#009E95

CMYK
100, 5, 50, 2

Click to copy HEX colorCopied! Teal 4

HEX
#007C74

CMYK
100, 5, 50, 30

Click to copy HEX colorCopied! Teal 5

HEX
#00554F

CMYK
100, 5, 50, 60

Click to copy HEX colorCopied! Green 1

HEX
#A3D8B7

CMYK
37, 0, 35, 0

Click to copy HEX colorCopied! Green 2

HEX
#5EBB81

CMYK
64, 0, 66, 0

Click to copy HEX colorCopied! Green 3

HEX
#1C9D4A

CMYK
78, 0, 92, 15

Click to copy HEX colorCopied! Green 4

HEX
#007A39

CMYK
78, 0, 92, 40

Click to copy HEX colorCopied! Green 5

HEX
#004F1E

CMYK
78, 0, 92, 70

Click to copy HEX colorCopied! Gray 1

HEX
#F2F5F8

CMYK
4, 2, 1, 0

Click to copy HEX colorCopied! Gray 2

HEX
#DCE1E6

CMYK
12, 7, 5, 0

Click to copy HEX colorCopied! Gray 3

HEX
#C1C8CF

CMYK
24, 16, 13, 0

Click to copy HEX colorCopied! Gray 4

HEX
#8C96A0

CMYK
48, 35, 30, 1

Click to copy HEX colorCopied! Gray 5

HEX
#5A646E

CMYK
67, 53, 44, 18

Click to copy HEX colorCopied! Gray 6

HEX
#2D3237

CMYK
75, 65, 58, 57

Primary brand fonts

Avenir is the primary typeface we use across all brand messaging and product UI. Avenir is a humanist-modern typeface designed to bring a subtle personality to a clear and functional typeface form.

Note: Do not use other versions of Avenir, specifically Avenir LT or Avenir Next.

Proxy brand fonts

For instances where the primary typeface is not available to use, Arial is a proxy typeface universally available on Apple and Windows platforms. The most frequent instances you may need to use Arial include externally accessible and editable documents such as e-mail, Microsoft Office Suite and Google Suite.

Typography

Shopkick is a fun, rewarding and approachable brand with clear, action-based messaging. The tone is conveyed by utilizing both Roman and Heavy weights. Typical headline structure can be thought of in this cadence — complete this action, receive this reward.

Although first, action-based messaging is viewed as secondary and reward-based messaging as primary. Reward messaging will always be set in Heavy.

Illustration overview

Illustration allows us to bring the Shopkick world to life for our audiences. It help us inspire joy and delight, drawing on our brand’s fun, playful voice.

At their core, illustrations should always be paired with content with the intention of improving comprehension of an idea, rather than being used as a standalone element. Because illustrations shouldn’t detract from the core message, keep details to a minimum and make them as simple as possible. Illustrations are primarily used within our app’s ecosystem versus other mediums.

llustration characteristics

Flat

Illustrations should be flat, with little reference to depth. Don’t use shadows to create depth, use variants on the color.

No perspective

Illustrated assets and scenes are viewed straight-on or top-down, rather than from an angled perspective.

Bright colors

Use our accent colors and tints/shades to create depth and interest.

Slight radius

Apply a slight corner radius of 2-3px to keep illustrations feeling soft and friendly, rather than using hard, angled corners.

Photography

Photography should capture the joy and excitement that Shopkickers feel when they are rewarded using our app. Follow these standards to capture the perfect moment.

Images should:

  • Feature our target demographic, ages 25-40
  • Focus on 1 or 2 subjects, 3 max
  • Be relatable and reflect one of our user personas (not “models”)
  • Capture a moment of happiness, joy or excitement
  • Be shot in natural light
  • Not appear staged or posed and subjects should not be looking to camera
  • Be contextual to Shopkick — capture the mobile experience, product discovery at a retail location (mall, fashion, or grocery), or at home.

 

Below are examples of photography that don’t quite capture the Shopkick moment.

Images should not:

  • Feature ages too far outside of our target demographic
  • Feel too passive and low energy
  • Feature subjects looking to camera or fail to provide context around a connection to Shopkick
  • Feature subjects much older than our target demographic (see above)
  • Use unnatural/studio lighting
  • Feel forced and exaggerated
  • Contain too many subjects and provide no clear focus.
Subject has low energy
Breaking the fourth wall feels forced
Older than our target demographic
Use of studio and harsh, focused lighting
Reaction and demeanor is too exaggerated
No clear focus on any one subject

Confetti

The use of confetti is the expression of rewarding shoppers throughout their shopping journey. Follow these four standards for creating this dynamic and purposeful visual element.

Size

There should be a variety of four sizes of confetti in every execution

Color

Use only Shopkick’s color palatte

Directional

There should be a clear direction whether it’s upwards evoking bubbles, falling with gravity or an outward explosion

Distribution

They should be dispersed unevenly and feel relatively natural