01. Logo

The company logo is an important and valued graphic element and must be used consistently and appropriately, even minor variations will undermine and compromise the image of the branding.

Logo Pack

Construction

The Snapshot Interactive logo is comprised of the wordmark, including aperture “S” icon at the beginning and the lens.

 

The S Icon

The icon will sometimes live on its own. Everything listed below concerning the full logo also goes for the icon.

 

Minimum Size

The logo should never be printed smaller that 1.5 inches wide, or appear smaller than 100 pixels wide in digital form. When used in client web project footers, 65 pixels wide is acceptable.

Scaling

A range of logo lockup sizes are available in order to best preserve the legibility of the trademark symbol. When scaling, start with the closest size logo to fit your needs.

 

 

150px

 

 

 

100px

Clear Space

The clear space around the logo should (at a minimum) be at all times equal to the x-height of the letter “a” for maximum legibility and impact.

Application on Background

The logo should always contrast with the background. There are four versions of the logo to ensure legibility and optimum reproduction quality in all printing processes and digital needs.

Misuse

The logotype cannot be altered or redrawn in any other way. Previous versions should never be used, and the logotype should not appear in a line or block of text. The word Snapshot or Snapshot Interactive should be spelled out with one capital S in body copy.

02. Iconography

The custom icons are additional graphic elements that must also be used consistently and appropriately; even minor variations will undermine and compromise the image of the branding.

Custom Icons

Department-specific icons are available to for use in internal materials and resources. They are only to be used in approved Snapshot colors—or white—on an approved background.

Icon Pack

Animation Icon

Design Icon

Development Icon

Search Icon

Strategy Icon

Video Icon

Ecos

Church

03. Typography

Creating hierarchy within typography is key for emphasizing the most important messages. We use three main typefaces for all Snapshot-branded materials. There should never be more than three weights and/or four sizes of type used in a single design.

Display

Montserrat is a sans-serif typeface designed by Julieta Ulanovsky and distributed by Google as a free web font. A variety of weights are available: Hairline, Ultra Light, Light, Regular, Semi Bold, Bold, Extra Bold, and Black. The black is used by Snapshot primarily in display and header styles across all print and digital media.

Montserrat

Body Copy

Filson Soft is a widely-used font Designed by Olivier Gourvat, from Mostardesign distributed by Adobe Fonts. The regular and book weights are used for body copy and other long-form text areas in both print and web media, however the font is available in a wide variety of weights and styles.

Filson Soft

04. Color System

Precise matching is critical to maintaining a coherent brand. Be sure to proof and check colors on printed materials. To achieve this color palette, CMYK matching is always preferred. These are specific colors to Snapshot, and Pantone matching has been slightly modified for CMYK & RGB.

Primary Color Palette

Specific values of orange and gray has been designated as the primary colors of the Snapshot brand.

  • Hex: #f2b023
  • RGB: 242-176-35
  • CMYK: 3-33-96-0
  • Pantone: 116U
  • Hex: #f6d491
  • RGB: 246-212-145
  • CMYK: 0-14-41-4
  • Pantone:
  • Hex: #2a2723
  • RGB: 42-39-44
  • CMYK: 75-72-63-62
  • Pantone: 426C
  • Hex: #a4a6a7
  • RGB: 164-166-167
  • CMYK: 2-1-0-35
  • Pantone:

Secondary Color Palette

The Snapshot brand also has secondary colors in print and electronic media. The specific values for these colors are listed below.

  • Hex: #dc5c3a
  • RGB: 230-90-51
  • CMYK: 5-80-90-0
  • Pantone: 7579C
  • Hex: #f38364
  • RGB: 243, 131, 100
  • CMYK: 0, 46, 59, 5
  • Pantone:
  • Hex: #7db4a3
  • RGB: 118-183-166
  • CMYK: 55-10-40-0
  • Pantone: 563C
  • Hex: #9bcbbc
  • RGB: 155-203-188
  • CMYK: 24-0-7-20
  • Pantone:

01. Logo

The company logo is an important and valued graphic element and must be used consistently and appropriately; even minor variations will undermine and compromise the image of the branding.

Download Logo Package

Construction

The Ecos logo is comprised of the icon, and “Ecos” wordmark. There are horizontal and vertical lockups available for use.

Minimum Size

The horizontal logo should never be appear smaller than 20 pixels tall. When using the vertical lockup, logo should be no smaller than 48 pixels tall.

Clear Space

The clear space around the logo should at all times be equal to the height of the lowercase letter “e” in the logo for maximum legibility and impact.

Application on Background

The logo should always contrast with the background. There are four color ways of both horizontal and vertical lockups to ensure legibility and optimum reproduction quality for all digital and print needs.

 

For Dark Backgrounds

The teal and white logo is the preferred version and should be used wherever possible. Use this logo on dark backgrounds. There is also a solid white version for one-color needs. Even the solid teal version can be used on extremely dark backgrounds.

For White Backgrounds

The 3-color logo (teal and light gray icon, blue wordmark) should be used on white backgrounds. There is an all-teal version available for one-color needs.

Misuse

The logotype cannot be altered or redrawn in any other way. Previous versions should never be used, and the logotype should not appear in a line or block of text. The “E” in Ecos should always be capitalized in body copy, except for web addresses.

Logotype colors inconsistent with brand standard
Logo must not be distorted in any way.

 

Background colors inconsistent with brand standards
Rotating the logo vertically or horizontally.
Your personal interpretation of the logo
Please don’t used retired verisons of the logo!

02. Typography

Creating hierarchy within typography is key for emphasizing the most important messages. Ecos primarily uses the Open Sans typeface for all branded materials. There should never be more than three weights and/or four sizes of type used in a single design.

Primary Typeface

Open Sans is a widely-used web font designed by Steve Matteson and distributed for free by Google. The light and regular weights are used for body copy and other long-form text areas in both print and web media, however the font is available in a wide variety of weights and styles.

Get Open Sans

Open Sans

Header Style

Ecos headers often use Open Sans Extrabold and Extrabold Itlaic in a combination of Green and Gray. If your header is only one word, you should stick to one color.

03. Color System

Precise matching is critical to maintaining a coherent brand. Be sure to proof and check colors on printed materials. To achieve this color palette, CMYK matching is always preferred. These are specific colors to Ecos, and Pantone matching has been slightly modified for CMYK & RGB.

Primary Color Palette

Specific values of teal, dark gray, and light gray have been designated as the primary colors of the Ecos brand.

  • Hex: #7db4a3
  • RGB: 118-183-166
  • CMYK: 55-10-40-0
  • Pantone: 563C
  • Hex:
  • RGB:
  • CMYK:
  • Pantone:
  • Hex: #29272c
  • RGB: 42-39-44
  • CMYK: 75-72-63-62
  • Pantone: 426C
  • Hex:
  • RGB:
  • CMYK:
  • Pantone:
  • Hex: #a6a8a9
  • RGB: 167-169-172
  • CMYK: 0-0-0-40
  • Pantone: 429C
  • Hex:
  • RGB:
  • CMYK:
  • Pantone:

Secondary Color Palette

Specific values of yellow and red have been designated as the secondary colors of the Ecos brand.

  • Hex: #edac2c
  • RGB: 243-176-38
  • CMYK: 3-33-96-0
  • Pantone: 124C
  • Hex:
  • RGB:
  • CMYK:
  • Pantone:
  • Hex: #dc5c3a
  • RGB: 230-90-51
  • CMYK: 5-80-90-0
  • Pantone: 7579C
  • Hex:
  • RGB:
  • CMYK:
  • Pantone: