Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
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
*Do NOT use with any other background color. When a background color cannot be set, default to the all white variation.
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)
*Do NOT use with any other background color. When a background color cannot be set, default to the all white variation.
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$%&/()=?!@#+-.,{}[]*
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz$%&/()=?!@#+-.,{}[]*
Asap Regular
aB aB
Supporting font: Gudea
Gudea Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz$%&/()=?!@#+-.,{}[]*
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz$%&/()=?!@#+-.,{}[]*
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
Lorem IpsumLorem Ipsum
Lorem IpsumLorem 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
Asap Regular 32pt.Ubiquitous button and UI font
Asap Bold 32pt.Ubiquitous button and UI font
Asap Regular 24pt.Ubiquitous button and UI font
Asap Bold 24pt.Ubiquitous button and UI font
Asap Regular 18pt.Ubiquitous button and UI font
Asap Bold 18pt.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