Brand Style Guide January 2019

Transcription

1 rand Style uide January 219

2 Hashiorp rand Style uide ontents 1/ Introduction What s New Product Suite Tao of Hashiorp 2/ orporate Logos Hashiorp Logo rand Hierarchy Event Sub-brands 3/ Product Logos Product Logos Product Suite 4/ olor orporate Palette Product Palette olor Themes 5/ Typography 5.1 orporate Typefaces 6/ eometry 6.1 Isometric rid 7/ Iconography 7.1 Icon Set 8/ Patterns orporate Pattern Product Patterns 9/ rand Application 9.1 Application Examples

3 Hashiorp rand Style uide 1 Introduction 3

4 Hashiorp rand Style uide Introduction What s New / eneral Document All Pages All Pages Updated Style uide template for improved wayfinding, content structure, and consistency. Updated overall visual style to reflect Hashiorp s current brand. 1/ Introduction Updated stack diagram and core messaging evised diagrams to match updated brand aesthetic 2/ orporate Logos evised logo usage guidelines to provide clearer direction Increased clear space requirement Added logo misuse section evised brand hierarchy guidelines to provide clearer direction Added event sub-brands section Added sub-brand usage section Added Hashiorp User roup section 3/ Product Logos Updated product logos to current versions Added enterprise logo usage section 4/ olor Updated corporate and product colors and added Pantone,, values Updated dark and light theme color palettes and usage examples 5/ Typography Added usage guidelines for typography 7/ Iconography 7.1 Updated to current icon set and add usage guidelines 8/ Patterns Added updated patterns 9/ rand Application evised brand application examples to reflect current visual style

5 Hashiorp rand Style uide Introduction Product Suite loud Infrastructure Automation onnect onsistent workflows to provision, secure, connect, and run any infrastructure for any application. un Secure Provision

6 Hashiorp rand Style uide Introduction Tao of Hashiorp The Tao of Hashiorp is the foundation that guides our vision, roadmap, and product design. It is valuable to understand the motivations and intentions behind our products. Infrastructure as ode Workflows not Technologies odular and Open The belief that all processes should be written as code, stored, and versioned. Operations teams have historically relied on oral tradition to pass along the knowledge of how to build, upgrade and triage infrastructure. Product design starts with an envisioned workflow to achieve a set goal. We then identify existing tools that simplify the workflow. If a sufficient tool does not exist, we step in to build it. This approach prefers many smaller components with well defined scopes that can be used together. The alternative approach is monolithic, in which a single tool has a nebulous scope that expands to encompass new features and capabilities.

7 Hashiorp rand Style uide Introduction Infrastructure as ode Infrastructure and code are central figures in design at Hashiorp. It allows teams to collaborate on infrastructure. This is where the complexity begins. An operator writes code which will be transformed. It is the systems we design that allow teams to create and orchestrate infrastructure at enterprise scale. Hashiorp Vagrant is where our company s journey started with infrastructure as code. Vagrant is also where design at Hashiorp started. In systems navigated by workflows it is where an individual users journey starts as well.

8 Hashiorp rand Style uide Introduction Workflows not Technologies Workflows at each layer of The Stack provisioning, security, and runtime provide teams the ability to work in parallel allowing greater application delivery speed and, as a result, exponential business value. Workflows contain 3 stages Write, Test, and reate. The aforementioned layers of The Stack encompass the Test stage. For teams, our products tame complexity arriving from the Write stage ultimately leading to further generation of complexity in the form of provisioned infrastructure, secure access, or deployed applications in the reate phase. Write omplexity Test Simplicity reate omplexity

9 Hashiorp rand Style uide Introduction odular and Open Hashiorp embraces the open and extensible nature of the DevOps ecosystem of partners and technology. Diamonds are stacked. osiacs are found in our patterns. Individual units are atomic, interchangeable, and composable. Any Infrastructure Any Application aremetal Private loud ontainer V

10 Hashiorp rand Style uide 2 orporate Logos 1

11 Hashiorp rand Style uide orporate Logos Hashiorp Logo Logomark Logotype

12 Hashiorp rand Style uide 2.2 Logo Variations Primary Logo The combination of the logomark and logotype makes up our primary logo. Vertical Logo The logomark and logotype may be used in a stacked format when space requires its use. Logomark The logomark may be used alone when the primary logo is also used in close proximity or when the primary viewers of the logomark are already familiar with the brand. orporate Logos 12

13 Hashiorp rand Style uide orporate Logos lear Space =X Primary logos X X X X lear space = the height of the logomark. ESEAH X Alternate logos 2/3 X X 2/3 X 2/3 X 2/3 X 2/3 X 2/3 X lear space = 2/3 the height of the logomark. 2/3 X 2/3 X X X

14 Hashiorp rand Style uide orporate Logos Logo isuse To successfully reinforce the corporate identity, it is important that the Hashicorp logo is presented accurately. Shown here are some common errors that could occur when using the logo. These same rules apply to all product and sub-brand logos. It is impossible to show all possible misuses, so if in doubt contact the Hashiorp creative team. No Do not alter the logo s proportion. Do not use old versions of the logo. Do not outline the logo. es Do not use the logo on top of a busy graphic or image. Do not alter the size of the logomark or logotype in relation to each other. Do not change the color of the logo.

15 Hashiorp rand Style uide orporate Logos rand Hierarchy Division The correct format for a Division of Hashiorp is to use the logo followed by a vertical rule and then the division name which should be set in lavika light; the same point size as the logotype. Parent Product Attributed Product Division Attributed Product The Attributed Product Logo should be used when the Hashiorp logo is not used in close proximity. esearch Enterprise Product Enterprise Product The Enterprise Product Logo should only be used when the product logo has already been introduced as a way of distinguishing enterprise content from general or open source content.

16 Hashiorp rand Style uide orporate Logos Event Sub-rands Hashionf orrect: Hashionf Incorrect: Hashionf US, Hashionf 219, Hashionf 19, Hashionf Seattle, Hashionf 219 Seattle, Hashionf 19 Seattle Parent Parent Hashionf EU orrect: Hashionf EU Incorrect: Hashionf EU 219, Hashionf EU 19, Hashionf Amsterdam, Hashionf Europe, Hashionf EU Amsterdam ear Location ear/location

17 Hashiorp rand Style uide orporate Logos Event Sub-rand Usage Hashionf Primary Logo This is the primary logo to be used in company with Hashiorp branding and location. Hashionf Location Logo This is the primary logo to be used in company with Hashiorp branding. inimum size: 25px wide Hashionf EU Primary Logo This is the primary logo to be used in company with Hashiorp branding and location. Hashionf Location Logo This is the primary logo to be used in company with Hashiorp branding. inimum size: 25px wide

18 Hashiorp rand Style uide orporate Logos Hashiorp User roup Hashiorp User roups are community run meet-ups all around the world. The community often refers to these meet-ups as HUs. Parent User roup Location User roup SAN FANISO

19 Hashiorp rand Style uide 3 Product Logos 19

20 Hashiorp rand Style uide Product Logos Vagrant Logo Full olor onochrome Tonal White

21 Hashiorp rand Style uide Product Logos Packer Logo Full olor onochrome Tonal White

22 Hashiorp rand Style uide Product Logos Terraform Logo Full olor onochrome Tonal White

23 Hashiorp rand Style uide Product Logos Vault Logo Full olor onochrome Tonal White

24 Hashiorp rand Style uide Product Logos onsul Logo Full olor onochrome Tonal White

25 Hashiorp rand Style uide Product Logos Nomad Logo Full olor onochrome Tonal White

26 Hashiorp rand Style uide orporate Logos Enterprise Logos Enterprise Product Logos The Enterprise Product Logo should only be used when the product logo has already been introduced as a way of distinguishing enterprise content from general or open source content.

27 Hashiorp rand Style uide Product Logos The Product Suite All of Hashiorp s foundational technologies are open source. Our tools are designed to address the realities of datacenter heterogeneity: physical machines, virtual machines, containers, serverless architectures and whatever comes after that. Our focus is on workflows, not technologies.

28 Hashiorp rand Style uide Product Logos Open Source Suite All of Hashiorp s foundational technologies are open source. Our tools are designed to address the realities of datacenter heterogeneity: physical machines, virtual machines, containers, serverless architectures and whatever comes after that. Our focus is on workflows, not technologies. When using the product logos within an open source context: Use full color logos Use a white background When using the the product logos in a row: emove the Hashiorp attribution The Hashiorp logo should be in close proximity

29 Hashiorp rand Style uide Product Logos Enterprise Suite The Hashiorp suite empowers organizations to provision hybrid infrastructure, secure secrets across distributed applications, and run dynamic resources for modern applications. When using the product logos within an Enterprise context: Use white logos Use a dark background When using the the product logos in a row: emove the Hashiorp attribution The Hashiorp logo should be in close proximity If used where viewers are familiar with the product suite the product wordmarks may be removed

30 Hashiorp rand Style uide 4 olor 3

31 olor Hashiorp rand Style uide Hashiorp rand olors Primary olors Secondary olor lack PS White lack PS Vagrant White PS # # FFFFFF # 1563FF 285

32 Hashiorp rand Style uide olor Hashiorp rayscale rayscale ray ray ray ray ray ray ray ray ray ray PS ool ray 1 PS ool ray 2 PS ool ray 3 PS ool ray 5 PS ool ray 6 PS ool ray 8 PS ool ray 9 PS ool ray 1 PS ool ray 11 PS lack 9% # F7F8FA # E5E6E # D2D4D # 682 # 9396A2 # 6A6D7A # 4E515D # # 1D1F25 # F113

33 Hashiorp rand Style uide olor Vagrant Product olor Primary olor olor Scale Vagrant Vagrant Vagrant Vagrant Vagrant Vagrant Vagrant L3 L2 L1 D1 D2 PS 285 PS 285 / 1% PS 285 / 25% PS 285 / 6% PS 285 PS 286 PS # 1563FF # EFF5FF # DEFF # 66A2FF # 1563FF # D44 # 8368

34 Hashiorp rand Style uide olor Packer Product olor Primary olor olor Scale Packer Packer Packer Packer Packer Packer Packer L3 L2 L1 D1 D2 PS 2995 PS 2995 / 1% PS 2995 / 25% PS 2995 / 6% PS 2995 PS 7461 PS # AFF # EF8FF # FE8FE # 6EFF # AFF # 74A # 5283

35 Hashiorp rand Style uide olor Terraform Product olor Primary olor olor Scale Terrraform Terraform Terraform Terraform Terraform Terraform Terraform L3 L2 L1 D1 D2 PS 2726 PS 2725 / 1% PS 2725 / 25% PS 2725 / 6% PS 2725 PS 2735 PS # 623E4 # F5F3FF # DDD6FA # A28E8 # 623E4 # 32AA8 # 2A173

36 Hashiorp rand Style uide olor Vault Product olor Primary olor olor Scale Vault Vault Vault Vault Vault Vault Vault L3 L2 L1 D1 D2 PS ool ray 8 PS ool ray 1 PS ool ray 2 PS ool ray 5 PS ool ray 8 PS ool ray 1 PS ool ray A6D7A # F7F8FA # E5E6E # 682 # 6A6D7A # # 1D1F25

37 Hashiorp rand Style uide olor onsul Product olor Primary olor olor Scale onsul onsul onsul onsul onsul onsul onsul L3 L2 L1 D1 D2 PS 285 PS 233 / 1% PS 233 / 25% PS 233 / 6% PS 233 PS 234 PS # 1563FF # FFF2F8 # F8D9E7 # E7EA # A2171 # 8E134A # 65D34

38 Hashiorp rand Style uide olor Nomad Product olor Primary olor olor Scale Nomad Nomad Nomad Nomad Nomad Nomad Nomad L3 L2 L1 D1 D2 PS 339 PS 339 / 1% PS 339 / 25% PS 339 / 6% PS 339 PS 341 PS # 475 # EFDF7 # 1F1E # 6D84 # 475 # 785 # 4E36

39 Hashiorp rand Style uide olor olor Themes arefully consider the following when choosing a theme. Persona now your audience. Developers find themselves in code editors all day. Hashiorp uses dark themes heavily as a homage to hacker culture. edium Light themes are more appropriate, even necessary, in decks and print. Long form content, whether print or digital, should be on a light theme. Emotion Dark UI s are trendy and elegant. Decks are a good example of combo usage where we set the tone with a dark cover slide and immediately switch to light for content. Dark vs Light The corporate color palette was created to work equally well on dark and light themes. The dark and light theme palettes were themselves created to span corporate and product. This document is itself an example of theme application and should be used as a catalog of usage.

40 olor Hashiorp rand Style uide Dark Theme lack ase color ray 2 Low contrast background / radient to black Theme Example Thou art mine only hope ray 3 orders / Low contrast elements ray 5 edium ontrast / Icons or inactive states ray 8 ody opy Friends, rebels, starfighters, lend me your ears. Wish not we had a single fighter more, If we are mark d to die, we are enough To make our planets proud. ut should we win, We fewer rebels share the greater fame. We all have sacrific d unto this cause. To Alderaan we fly White Headlines

41 olor Hashiorp rand Style uide Light Theme White ase color ray 1 Low contrast background / radient to white Theme Example Our cause is for the truth ray 9 orders / Low contrast elements ray 5 edium ontrast / Icons or inactive states ray 3 ody opy Alas, poor stormtrooper, I knew ye not, et have I ta en both uniform and life From thee. What manner of a man wert thou? A man of inf nite jest or cruelty? A man with helpmate and with children too? A man who hath his Empire serv d with pride? Pow r converters White Headlines

42 Hashiorp rand Style uide olor Product Theme White ase color Theme Example ray 1 Low contrast background / radient to white ray 9 Product olor orders / Low contrast elements Highlights / TAs / Icons Our cause is for the truth Alas, poor stormtrooper, I knew ye not, et have I ta en both uniform and life From thee. What manner of a man wert thou? A man of inf nite jest or cruelty? A man with helpmate and with children too? A man who hath his Empire serv d with pride? ray 3 ody opy Pow r converters White Headlines

43 Hashiorp rand Style uide 5 Typography 43

44 Hashiorp rand Style uide Typography 5.1 lavika Aabc ecause of its bold unique technical nature, lavika was chosen for Hashiorp s primary brand font. In order to not compete with the corporate or product logotypes it should be used sparingly, on headlines or display applications. ADEFHIJLNOPQSTUVWXZ abcdefghijklmnopqrstuvwxyz !@#$%^&*()-+[]{}; /,. old ADEFHIJLNOPQSTUVWXZ abcdefghijklmnopqrstuvwxyz edium ADEFHIJLNOPQSTUVWXZ abcdefghijklmnopqrstuvwxyz egular ADEFHIJLNOPQSTUVWXZ abcdefghijklmnopqrstuvwxyz Light 44

45 Hashiorp rand Style uide Typography Open Sans Aabc Open Sans is a humanist sans serif typeface with open forms and a neutral, yet friendly appearance. This is the workhorse font for Hashiorp and should be used for all body copy and majority of text applications. ADEFHIJLNOPQSTUVWXZ abcdefghijklmnopqrstuvwxyz !@#$%^&*()-+[]{}; /,. old ADEFHIJLNOPQSTUVWXZ abcdefghijklmnopqrstuvwxyz Semibold ADEFHIJLNOPQSTUVWXZ abcdefghijklmnopqrstuvwxyz egular ADEFHIJLNOPQSTUVWXZ abcdefghijklmnopqrstuvwxyz Light

46 Hashiorp rand Style uide Typography Fira ono Aabc One of the primary considerations during the design process of Fira ono was legibility. This font should be used for all monospace applications such as code snippets. ADEFHIJLNOPQSTUVWXZ /,. edium ADEFHIJLNOPQSTUVWXZ abcdefghijklmnopqrstuvwxyz old ADEFHIJLNOPQSTUVWXZ abcdefghijklmnopqrstuvwxyz egular

47 Hashiorp rand Style uide 6 eometry 47

48 eometry Hashiorp rand Style uide Isometric rid w h arctan [ wh [ = 3 3 Isometric Projection Hexagon Diamond / hombus Isometric projection is a method for visually representing three-dimensional objects in two dimensions. Hashiorp uses the isometric grid used for this projection. There are 3 types of lines that comprise this base grid: vertical lines, 3 lines to the right, and 3 lines to the left. We make use of these lines, in different combinations, for patterns and graphics. The Hashiorp icon is set inside a hexagon. The hexagon, along with our other core geometry diamonds, parallelograms, circles (circumscribed), and triangles can be found in the isometrics grids that underpin our design. The term "diamond" is used in mathematics to refer to a rhombus. In our case it is a projected square. Hexagons are used as icons when depicting resources. Hexagons are the building blocks of infrastructure. Diamonds atomically represent applications. In total they can represent micro service architecture. We often use filled shapes for apps, as opposed to stroked, as a contrast to the stroked planes that representing our products architecture and the infrastructure underneath.

49 Hashiorp rand Style uide 7 Iconography 49

50 Iconography Hashiorp rand Style uide 7.1 Feather Icon Set Hashiorp uses an open source icon set called Feather. The set was designed to be simple, consistent, and legibile. Icons should be used when an action, idea, or feature would benefit from a visual cue. Though icons can be used to quickly convey a concept it is proven they increase cognitive load. With this in mind use icons thoughtfully and sparingly. Usage Please follow these guidelines when using icons px Stroke: 1 px 24-3 px Stroke: 1.5 px px Stroke: 2 px 5

51 Hashiorp rand Style uide 8 Patterns 51

52 Hashiorp rand Style uide 8.1 Hashiorp Pattern An Updated Pattern Library In an effort to strengthen Hashiorp s unique brand identity, a set of patterns have been created to increase visual interest, variety, and to facilitate a look and feel that is more ownable. These patterns were inspired from, and can be used in place of, our original product patterns. Over time a full library of several patterns will be created for Hashiorp s corporate and each of our product identities. Patterns 52

53 Hashiorp rand Style uide Patterns Vagrant Pattern

54 Hashiorp rand Style uide Patterns Packer Pattern

55 Hashiorp rand Style uide Patterns Terraform Pattern

56 Hashiorp rand Style uide 8.5 Updated Terraform Pattern Patterns 56

57 Hashiorp rand Style uide Patterns Vault Pattern

58 Hashiorp rand Style uide 8.7 Updated Vault Pattern Patterns 58

59 Hashiorp rand Style uide Patterns onsul Pattern

60 Hashiorp rand Style uide 8.9 Updated onsul Pattern Patterns 6

61 Hashiorp rand Style uide Patterns Nomad Pattern

62 Hashiorp rand Style uide 8.11 Updated Nomad Pattern Patterns 62

63 Hashiorp rand Style uide 9 rand Application 63

64 Hashiorp rand Style uide 9.1 Homepage rand Application 64

65 Hashiorp rand Style uide rand Application Open Source Landing

66 Hashiorp rand Style uide rand Application Employee Handbook

67 Hashiorp rand Style uide rand Application Hashiorp Notebook

68 Hashiorp rand Style uide rand Application Whitepaper

69 Hashiorp rand Style uide rand Application Hashionf