Designmanual Table of Content
Total Page:16
File Type:pdf, Size:1020Kb
Designmanual Table of Content Colors 3 Opacity 3 Logo 4 Design 4 Wordmark 4 Clear Space 4 Logo color 5 Backgorunds 5 Examples of misuse 6 Clothing 7 Logo icons 8 Stationaries 9 A4 9 A5 9 Envelope 9 Typography 10 Apex New 10 Segoe UI 10 Helvetica 11 Web Hierarchy 12 Print Hierarchy 13 Word Hierarchy 14 Power Point Hierarchy 15 Email signature 16 Icons 17 Personalized Icons 17 Social Media Icons 17 Illustrations 18 Photography 19 Typography 19 Videos 20 Typography 20 Text colors 20 Colors Lorenz Technology uses two colors in RGB: 109 / 110 / 113 their design, blue and gray. CMYK: 0 / 0 / 0 / 70 These colors may not be altered. Hex: #6d6e71 The color blue is associated with air and it suggests trust and security. Therefore it was chosen to represent the company. RGB: 0 / 174 / 239 CMYK: 100 / 0 / 0 / 0 Hex: #00aeef Opacity The opacity of the blue color can be RGB: 204 / 240 / 252 RGB: 50 / 190 / 243 lowered to achieve a desired design. CMYK: 18 / 0 / 1 / 0 CMYK: 63 / 4 / 0 / 0 The increments are 80, 60, 40 and 20 Hex: #ccf0fc Hex: #32bef3 percents. 80% 20% 40% 60% RGB: 154 / 224 / 250 RGB: 102 / 206 / 245 CMYK: 35 / 0 / 1 / 0 CMYK: 52 / 0 / 0 / 0 Hex: #9ae0fa Hex: #66cef5 3 Logo Design N The logo consists of 3 blue arrows and one gray one. Together they 45˚ represent a helipad, with the gray 45˚ arrow pointing north. The letter “Z” is tilted inside the circle A to emphasize that the gray arrow is A pointing north. Wordmark The wordmark is based on the typeface Conthrax. The typeface is lowercased to get a smoother look. Clear Space There should always be ample space around the logo to ensure maximum impact and keep the mark from looking cluttered. The clear space is measured with the letter “z” from the wordmark. When a design requires the logo to be on it’s own without the wordmark, the same rules of clear space apply. 4 Logo Logo color The colors of the logo work with both light and dark backgrounds. The logo must always be in it’s original colors except when the design requires it to be in a single color. Then the only acceptable colors are black and white. Backgorunds The logo should be shown on a white background for optimal appearance. When that is not possible, the logo can be contained in a white rectangle equal to the required clear space for optimal readability. This, however, is not necessary. The logo can be replaced with the black or white version. The logo should never be placed on a background that takes the focus away from the logo or on a color that is too close to the logos own colors. 5 Logo Examples of misuse The logo should never be stretched, Rotation it’s rotation altered, it’s colors changed or be disformed in any other way. No effects such as a drop shadow, inner glow etc. can be applied to the logo. All these examples undermine the brand identity. To achieve a strong, unanimous look, these rules must be followed. Stretched Condensed Drop shadow Color change 6 Logo Clothing Security clothing items are branded with the company logo and phone number. A stand-alone logo is placed on the right side in the front of all vests, coats and other clothing. The entire logo is printed on the back of all clothing along with the official Lorenz Technology phone number. 7 Logo Logo icons Logos are displayed differently Android - Chrome between operating systems. 192 x 192 px Here is a list of how the Lorenz Technology logo is displayed on a Android - Chrome variety of operating systems. 512 x 512 px Favicon 16 x 16 px Favicon 32 x 32 px Apple Touch icon { 180 x 180 px MS tile 310 x 310 px MS tile 310 x 150 px MS tile 150 x 150 px MS tile 144 x 144 px MS tile { 70 x 70 px Safari Pinned Tab 1.444,5 x 1.444,5 px 8 Stationaries A4 A4 When placing the logo on a standard A4 paper, the logo must always be on the right side. The logo must be placed 16 mm from the right border and 14 mm from the top.The width of the logo is 50 mm. A5 Standard information for Lorenz Technology must be placed at the bottom of the page, with the top of the text 10mm from the bottom. The font must be Apex New light 10 pt and aligned center. Envelope A5 When placing the logo on an A5 paper, the logo must be placed 14 mm away from the right border and 12 mm from the top. The logo width is 37,5 mm. Standard information for Lorenz Technology must be placed at the bottom of the page, with the top of the text 10mm from the bottom. The font must be Apex New light 8 pt and aligned center. Envelope When placing the logo on a DL sized envelop, the logo must be placed 14mm from the left border and 12mm from the top. Standard information for Lorenz Technology must be placed at the bottom of the page, with the top of the text 7mm from the bottom. The font must be Apex New light 8 pt and aligned center. 9 Typography Apex New The primary typeface of Lorenz Apex New Thin Technology is Apex New. It must be used in all material ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ productions. abcdefghijklmnopqrstuvwxyzæøå Apex New Light ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Apex New Book ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Apex New Medium ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Apex New Bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Segoe UI The secondary typeface of Lorenz Segoe UI Light Technology is Segoe UI. It’s usage is restricted to the ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ Microsoft Office pack and abcdefghijklmnopqrstuvwxyzæøå must be used in all Power Point presentations. Segoe UI Regular ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Segoe UI Bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 10 Typography Helvetica Helvetica is restricted to contracts Helvetica Regular and other word documents and must not be used anywhere else. ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Helvetica Bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 11 Typography Web Hierarchy Hierarchy refers to the difference in Heading 1 font size and weight between text Apex New Medium - 50 pt. elements. A successful hierarchy establishes the order of importance of elements on a page, allowing readers to easily scan content and find what they’re Challenging the looking for. Heading 1 is a main headline. It has Heading 2 character spacing of 0.15. Apex New Bold - 25 pt. All subsequent headlines should use Heading 2. Challenging the way we use Heading 3 is used when a further categorization is needed after Heading 3 applying Heading 2. Apex New Medium - 20 pt. Lead Paragraph is used when highlighting a small section of text. Challenging the way we use technology Body is used as a standard paragraph text in all content. Lead Paragraph (heading 4) Apex New Book - 18 pt. Challenging the way we use technology Paragraph 1 Apex New Book - 16 pt. Challenging the way we use technology 12 Typography Print Hierarchy This hierarchy should serve as a basis Heading 1 for A4 standars sized documents, Apex New Light 50 - 54 pt. but appropriate scaling should be explored for content of larger or smaller dimensions. Heading 1 is the main heading for Challenging the a front page of a document, with minimal text around it. Heading 2 Heading 2 is the main heading on Apex New Light/Book 32 - 36 pt. more text-heavy pages. When on a white background use Light and when on a darker background use Book. Challenging the way we Heading 3 is used as a sub-heading on more text heavy pages and as Heading 3 body text when combined with Heading 1. This should be applied Apex New Thin/Light 21 - 26 pt. on white backgrounds and Light on darker backgrounds. Challenging the way we use tech Heading 4 is used as a main sub- heading when combined with Body Heading 4 text. Apex New Light 14 - 18 pt. Lead Paragraph is used to emphasize a small section of text. When on a Challenging the way we use technology white background use Book and when on a darker background use Medium. Lead Paragraph Body is used for all normal text areas. Apex New Book/Medium 16 - 18 pt Use Book on white backgrounds and Medium on dark ones. Challenging the way we use technology Body Apex New Book/Medium 8 - 12 pt. Challenging the way we use technology 13 Typography Word Hierarchy This hierarchy should serve as a basis Title for A4 standars sized documents, Helvetica Bold 14 pt. but appropriate scaling should be explored for content of larger or smaller dimensions. Challenging the way we use technology Title is used for the main heading on front pages and is always blue. Heading 1 Helvetica Bold 12 pt. Heading 1 is used as a main heading within documents and is always blue. Challenging the way we use technology Heading 2 is used as a sub-heading for heading 1 and is always blue. Heading 2 Heading 3 is used in text for Helvetica Regular 10,5 pt. emphasis and is always black. Challenging the way we use technology Body is used for all normal text areas and is always black. Heading 3 Helvetica Bold 10,5 pt. Challenging the way we use technology Body Helvetica Regular 10,5 pt. Challenging the way we use technology 14 Typography Power Point Hierarchy Title is used for the main heading and Title is blue when on a white background Segoe UI Light 32 pt and white on a colored background.