Glympse Brand Guide. Initial Draft / Version 1.2

Transcription

1 Initial Draft / Version 1.2 This guide covers the basics of the brand marks, color values, typography, iconography, and other aspects of the identity system. Version 1.3 updates to include: - Brand principles - Brand visual values - Pantone colors - Applied design examples

2 Identity Marks Brand Mark Short version - Official Logo (Use for vertically tight places) Tall version Short Brand Icon Tall Movement + Direction Arrow G shape Live-Track

3 Identity System Solid color variations on white Two-tone variations on white *Do NOT create any other two-tone combinations *Orange arrow is special use case only Reversed variations on dark *Do NOT use with any other background color. When a background color cannot be set, default to the all white variation.

4 Identity System Gradient color variation on Gradient Rectangle *Special use cases only when a background is not complimentary to an Alpha overlay Dark gradient color variation w/alpha background *Use on white backgrounds Light gradient color variation w/alpha background *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.

5 Icon Guide Round Icons (Android) *Orange is a special use case icon Square Icons (ios) *Orange is a special use case icon *Do NOT use with any other background color. When a background color cannot be set, default to the all white variation.

6 Usage and Placement Guidelines Spacing and Buffer Mandatory buffer Recommended buffer *Provide either the mandatory or recommended negative space buffer aroundthe logo. *Correct spacing and centering Mandatory buffer Recommended buffer *Correct spacing and centering

7 Color System: Solids Primary brand colors RGB 104, 169, 234 #68A9EA PMS 284C RGB 48, 87, 165 #3057A5 RGB 12, 39, 91 #0C235B *Use for backgrounds Supporting brand colors RGB 249, 161, 27 #F9A11B *Use for priority or focus items RGB 240, 91, 34 #F05B22 *Use for priority or focus items Supporting Accent colors RGB 218, 29, 93 #DA1D5D *Use for Alerts and Notifications Grayscale Palette RGB 242, 242, 242 #F2F2F2 RGB 230, 230, 230 #E6E6E6 RGB 102, 102, 102 # RGB 51, 51, 51 # RGB 35, 35, 35 # RGB tbd... #tbd...

8 Color System: Gradients Primary brand colors RGB 48, 87, 165 #3057A5 RGB 48, 87, 165 #3057A5 RGB 48, 87, 165 #3057A5 RGB 249, 161, 27 #F9A11B RGB 249, 161, 27 #F9A11B RGB 249, 161, 27 #F9A11B Alert/Impact colors RGB 48, 87, 165 #3057A5 RGB 48, 87, 165 #3057A5 RGB 48, 87, 165 #3057A5 RGB 249, 161, 27 #F9A11B RGB 249, 161, 27 #F9A11B RGB 249, 161, 27 #F9A11B

9 Typography Primary font: Asap Asap Bold Asap Regular ab ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz ab ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz Asap is our primary font to be used whenever possible in both the product UI, web viewer, and marketing. Supporting font: Gudea Gudea Bold Gudea Regular ab ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz ab ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz Gudea is our supporting font and can be used as body copy, for very small font sizes, and anytime a complimentary style is required for aesthetic purposes. Gudea should be used sparingly and infrequently and should not be a consistent or relied upon aspect of the brand. *Note: In the technical situation where Asap, and Gudea are unavailable please resort to using Helvetica. This should only be a resort when character support is lacking for localization and/or platform limitations.

10 Font Usage and Sizing Rough Guidelines for UI fonts *Only for Asap. Sizes smaller than 18pt. are okay to be used for body copy. *Marketing font usage to be determined... 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 Regular 36pt. Ubiquitous button and UI font Asap Regular 32pt. Ubiquitous button and UI font Asap Regular 24pt. Ubiquitous button and UI font Asap Regular 18pt. Ubiquitous button and UI font Asap Bold 42pt. Used primarily as a large button font *Also can be used for bold text in list row items Asap Bold 36pt. Ubiquitous button and UI font Asap Bold 32pt. Ubiquitous button and UI font Asap Bold 24pt. Ubiquitous button and UI font Asap Bold 18pt. Ubiquitous button and UI font

11 Icon Vocabulary Recents Map View Watching Me Shortcuts Destination Request Settings Set Time Favorite Add Favorite Create New Message Recipient Add Recipient Group Slide Arrow

12 Applied Vocabulary Signature G Timer Control No time set Time set minutes X

13 Map Symbols Arrowheads A user s own arrow ( Me ) never turns to the gray expired state - only the arrows of users I m watching ( Them ) do. Me Me (expired) Them Them (expired) Name Callouts Focus Unselected Me selected Them selected Expired *in progress *in progress *in progress Lack of data In group Off-map

14 Map Symbols Misc My destination Their destination Their expired dest. My accuracy Their accuracy Predicted Route

15 Grouping Smart Bubble Callouts Expandable Grouping Areas 14 people 14 people

16 Map Layering Tray Controls Bubbles Arrows Them Me Expired Destinations Them Me Expired Accuracy circles Ping animations Grouping circles Trails Map overlays (traffic) Map