brand guide 1 - amazon s3guide+1.4.pdf · initial draft / version 1.2 this guide covers the basics...

Glympse Brand Guide

Initial Draft / Version 1.2

This guide covers the basics of the brand marks,color values, typography, iconography, and otheraspects of the identity system.

Version 1.3 updates to include:- Brand principles- Brand visual values- Pantone colors- Applied design examples

Glympse Brand Guide

Identity Marks

Brand Mark

Arrow

Movement + Direction

Short version - Official Logo(Use for vertically tight places)

Tall version Short

Tall

Live-Track

“G” shape

Brand Icon

Glympse Brand Guide

Identity System

Solid color variations on white

*Do NOT create any other two-tone combinations *Orange arrow is special use case only

*Do NOT use with any other background color. When a background color cannot be set, default to the all white variation.

Two-tone variations on white

Reversed variations on dark

Glympse Brand Guide

Identity System

Gradient color variation on Gradient Rectangle

*Special use cases only when a background is not complimentary to an Alpha overlay

*Use on white backgrounds

*Use on dark backgrounds


Dark gradient color variation w/alpha background

Light gradient color variation w/alpha background

*Orange is a special use case icon

*Orange is a special use case icon

Glympse Brand Guide

Icon Guide

Round Icons (Android)


Square Icons (iOS)

Glympse Brand Guide

Usage and Placement Guidelines

Spacing and Buffer

*Provide either the mandatory or recommended negative space buffer aroundthe logo.

*Correct spacing and centering

*Correct spacing and centering

Mandatory buffer

Recommended buffer

Mandatory buffer

Recommended buffer

Glympse Brand Guide

Color System: Solids

Primary brand colors

RGB 104, 169, 234 #68A9EAPMS 284C

RGB 48, 87, 165 #3057A5Pantone...

RGB 249, 161, 27 #F9A11BPantone...

RGB 240, 91, 34 #F05B22Pantone...

RGB 218, 29, 93 #DA1D5DPantone...

RGB 12, 39, 91 #0C235BPantone...

*Use for backgrounds

*Use for Alerts and Notifications

*Use for priority or focus items *Use for priority or focus items

RGB 242, 242, 242 #F2F2F2Pantone...

RGB 230, 230, 230 #E6E6E6Pantone...

RGB 102, 102, 102 #666666Pantone...

Supporting brand colors

Supporting Accent colors

Grayscale Palette

RGB 51, 51, 51 #333333Pantone...

RGB 35, 35, 35 #232323Pantone...

RGB tbd...#tbd...Pantone...

Glympse Brand Guide

Color System: Gradients

Primary brand colors

RGB 48, 87, 165 #3057A5Pantone...

RGB 249, 161, 27 #F9A11BPantone...

RGB 48, 87, 165 #3057A5Pantone...

RGB 249, 161, 27 #F9A11BPantone...

RGB 48, 87, 165 #3057A5Pantone...

RGB 249, 161, 27 #F9A11BPantone...

Alert/Impact colors

RGB 48, 87, 165 #3057A5Pantone...

RGB 249, 161, 27 #F9A11BPantone...

RGB 48, 87, 165 #3057A5Pantone...

RGB 249, 161, 27 #F9A11BPantone...

RGB 48, 87, 165 #3057A5Pantone...

RGB 249, 161, 27 #F9A11BPantone...

Glympse Brand Guide

Typography

Primary font: Asap

Asap Bold

Asap is our primary font to be used whenever possible in both the product UI, web viewer, and marketing.

Gudea is our supporting font and can be used as body copy, for very small font sizes, and anytime a complimentary style isrequired for aesthetic purposes. Gudea should be used sparingly and infrequently and should not be a consistent or reliedupon aspect of the brand.

*Note: In the technical situation where Asap, and Gudea are unavailable please resort to using Helvetica. This should only be aresort when character support is lacking for localization and/or platform limitations.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz$%&/()=?!@#+-.,{}[]*


Asap Regular

aB aB

Supporting font: Gudea

Gudea Bold



Gudea Regular

aB aB

*Only for Asap. Sizes smaller than 18pt. are okay to be used for body copy.*Marketing font usage to be determined...

Lorem Ipsum

Lorem Ipsum Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem IpsumLorem Ipsum




Rough Guidelines for UI fonts

Asap Bold 96pt.Use for large marketing material titles and specific UI instances such as the timer control numbers

Asap Regular 60pt.Use for Large titles in the product UI when a top title bar is not present.

Asap Regular 48pt.Use for Large titles in the product UI top title bar. *Also can be used for list row item titles where applicable

Asap Regular 42pt.Use for list row item large font

Asap Bold 42pt.Used primarily as a large button font*Also can be used for bold text in list row items

Asap Regular 36pt.Ubiquitous button and UI font

Asap Bold 36pt.Ubiquitous button and UI font







Glympse Brand Guide

Font Usage and Sizing

Recents Map View Watching Me Shortcuts

Glympse Brand Guide

Icon Vocabulary

Destination Request Settings Set Time

Favorite Add Favorite Create New Message

Recipient Add Recipient Group Slide Arrow

Signature “G” Timer Control

No time set

Time set

Glympse Brand Guide

Applied Vocabulary

30303030

3

42

XXXX1

45 15151515

30minutes

30

3

42

1

45 15

Glympse Brand Guide

Map Symbols

Arrowheads

Me

A user’s own arrow (”Me”) never turns to the gray expired state - only the arrows of users I’m watching (”Them”) do.

*in progress *in progress *in progress

Me (expired) Them Them (expired)

Unselected ExpiredMe selected Them selected

Lack of data

Name Callouts

Focus

Off-mapIn group

Predicted Route

My destination Their destination Their expired dest.

Glympse Brand Guide

Map Symbols

Misc

My accuracy Their accuracy

Glympse Brand Guide

Grouping

Smart Bubble Callouts

Expandable Grouping Areas

14 people

14 people

Glympse Brand Guide

Map Layering

TrayControlsBubblesArrows Them Me ExpiredDestinations Them Me ExpiredAccuracy circlesPing animationsGrouping circlesTrailsMap overlays (traffic)Map

brand guide 1 - amazon s3guide+1.4.pdf · initial draft / version 1.2 this guide covers the basics...

Documents