Teamwork CommerceBrand GuidelinesUpdated July 2019 by ChampKid Design

Table of Contents

Color Palette 4

Typography 6

For More Information 10

Iconography 9

Logo Alternatives & Incorrect Usage 2

Color Specifications 5

Font Specifications 7

Other Fonts & Sizing 8

Logo Specifications 3

Logo Definitions 1

1

Secondary Signature

Logomark

Wordmark

Primary Signature

The Teamwork Commerce logo is the most immediate representation of their product, their people, and their brand. It is a valuable asset that must be used consistently in the proper and approved forms. There are two logo signatures: 1) Primary and 2) Secondary. And there are two elements that complete each logo signature: 1) The Logomark and 2) The Wordmark.

The Primary Signature is the preferred version if context allows. The Secondary Signature is to be used when required to be shown in monotone, such as on a colored background. If the preferred color palette of Teamwork Commerce is not available for any given reason, the Secondary Signature can be shown in any one-color application. There are also certain instances when the Logomark or the Wordmark may be used indivudally by themselves.

Print Note: Whenever possible, printing spot color is preferred over 4-color process equivalents for saturation and brilliance. The colors shown in this page and throughout this manual are not intended to match the PANTONE Color Standard. Please refer to the Page 4 for all color specifications.

Logo Definitions

TEAMWORKRETAIL

SQUISHED CRUNCHED LACK OF CONTRAST

The alternative logo is always acceptable and can be used in place of the normal signatures, especially when it would bring better focus to the brand. The same logo specifications apply to the alernative signatures as they do with the original signatures.

Logo AlternativeThe Teamwork Commerce Logo should never be used in these ways —

Primary Alternative Signature

Secondary Alternative Signature

Incorrect Usage

BUSY BACKGROUNDS ROTATED ADDED EFFECTS

ADDED TRANSPARENCY REARRANGING UNSUPPORTED WORDMARKS

2

EXCLUSION ZONE: 20px or 0.25”

Exclusion Zone: Any iteration of the logo (Primary Signature, Secondary Signature, Logomark, or Wordmark) must be reproduced with a clear area around it (at least 20px for digital and 0.25” for print in most contexts) which is free from other graphic elements. This area is known as the ‘exclusion zone’.

Minimum Size: The Primary Signature should always be clearly legible and never undersized or put in low resolution, stretched or distorted. Whenever the Teamwork Commerce Wordmark would become illegible due to size or low resolution, the Logomark should be used by itself.

Workmark Style: The Wordmark should always be presented as specifically designed and should never be recreated in another font or adjusted in any way.

Background Colors: The Primary Signature should normally be placed on white or dark backgrounds. No iteration of the logo (Primary Signature, Secondary Signature, Logomark, or Wordmark) should be placed on busy backgrounds with tight patterns or text, and should always be well contrasted from the background.

Logo Specifications

3

The color palette of Teamwork Commerce has been carefully chosen and should be used as a guideline when working with the brand.

However, the color palette is not a law, but a manual for how the brand should normally and consistently appear across the majority of its visualizations and representations.

Creativity is encouraged when it best compliments the overall branding, while deviance from the branding should be avoided.

Color Palette

Colors (Grayscales)

# 008AE8

# 48E2A2

# 565264

# 4F0D5A

# F2D446

# 8D99AE

# 10115F

# FF6060

# C9CAD9

# 00DCE8

# 202224

# FCF7F8

Teamwork Blue

Spring Green

Bright Sun Carnation

Ebony Clay BlackClairvoyant Blue Zodiac

Piction Blue

PRIM

ARY

SECO

NDAR

YTE

RTIA

RY

4

Color SpecificationsColor Pantone R G B HEXC M Y K

#008AE82321380903791Process Blue CTeamwork Blue

#20222436343286012Black 3 CEbony Black

#5652641008286610757540 CCharcoal Gray

#10115F 90 1379650304261 CClairvoyant

#8D99AE1741531413208137543 CGray

#10115F 95 171663031312755 CBlue Zodiac

#C9CAD921720220115066Cool Gray 3 CLight Gray

#00DCE8232220090591311 CPiction Blue

#FCF7F82482472521220-Off White

#48E2A21622267211250603385 CSpring Green

#F2D446702122425671207404 CBright Sun

#FF60609696255062620178 CCarnation

5

Aa ZzAs with the Teamwork Commerce Logo, consistent use of the brand’s typeface, Inter Font, reinforces the brand identity. The Inter Font Family comes with a free commercial license with wide support across various platforms. You can download and discover all specifications not covered in this booklet at https://rsms.me/inter.

If access to this font is unavailable or access rights denied for any reason, please fall back on the system default sans-serif font on your computer.

Typography Aa ZzInter Font Regular

Inter Font Black

6

Font Specifications

Do not use condensed or narrow variants of the Inter Font Family.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

! @ # $ % ^ & * ( ) - = + ~ ` ; : ’ ”, . < > / ? { } [ ] | \

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

! @ # $ % ^ & * ( ) - = + ~ ` ; : ’ ”, . < > / ? { } [ ] | \

Inter Font Black

Inter Font Regular

Inter Font Black (900 Weight) is the display typeface and should be used for Headings, Titles, Sub-titles and other important succinct announcements. It should also be normally used in the black font weight (900). This font weight should not be used for paragraphs or lengthy content. As a general rule, Headings, Titles and Subtitles should not be used in font weights below Bold (700).

Inter Font Regular (400 Weight) is the reading font and should be used for paragraphs, lists, subscripts, microcopy and other common content. It should not be used for Headings, Titles, Sub-titles and other important announcements.

7

Using Other Fonts

Font SizesPlease follow these guidlines for font sizes and letter spacing when dealing with headlines and copy. Auto or metric kerning is recommended, otherwise please follow these guidelines for tracking at various sizes.

Font sizes for copy should be no smaller than 8pt and never exceed 24pt.

The spectacle before us was indeed sublime.

Font Size: 8 | Letter Spacing: 0 | Line Height: 14

The spectacle before us was indeed sublime.Font Size: 10 | Letter Spacing: 0 | Line Height: 16

The spectacle before us was indeed sublime.Font Size: 12 | Letter Spacing: 0 | Line Height: 17

The spectacle before us was indeed sublime.Font Size: 14 | Letter Spacing: 0 | Line Height: 20

The spectacle before us was indeed sublime.Font Size: 16 | Letter Spacing: -0.1 | Line Height: 24

The spectacle before us was indeed sublime.Font Size: 18 | Letter Spacing: -0.1 | Line Height: 26

Creativity is encouraged when designing for Teamwork Commerce, which can at times include a variety of other fonts.

Please keep in mind that if you plan to use other fonts, please use them solely for headlines and phrases -never to replace the copy font (Inter). Also avoid using slab or serif fonts if possible, so as not to lose consistency in branding.

8

The icon set for Teamwork Commerce, named ZW Icons, has been carefully chosen to compliment the overall brand identity of the company. It comes with a total of 566 icons across 26 categories in any format needed (SVG, PNG, JPG, PDF) and can be downloaded for free at https://www.zwicon.com/.

This icon set is also optimized to be used as a webfont for online use: https://www.zwicon.com/how-to-use

Note: Icons should not be used for illustrations or overly enlarged. Instead, they are to serve as visual cues to help users know what to do with the design. They are best used in Buttons and Call to Actions.

Iconography

9

http://champkiddesign.com

This Brand Style Guide was designed and created by ChampKid Design solely for the purpose of Teamwork Commerce.

For more information or questions concerning branding for Teamwork Commerce, or if you discover any errors in this brand guide, please contact Greg Stone of ChampKid Design at greg@champkiddesign.com

10