Brand core & brand promise. Mission. Values. Positioning. Content Briefing. We are defined by

Transcription

1 Style Guide

2 Content Briefing Brand core & brand promise We want to provide high-end services that allow our clients to do business in any country on earth simply, efficiently, and digitally. Mission We are expanding our worldwide partner network every day, expanding our range of products and offering our services on an exceptional software platform. Values We are defined by... versatility We serve a range of international customer groups with a variety of different services.... excellence We always go the extra mile. We strive for perfection in everything we do. Our greatest asset is our satisfied customers.... advancement We are driving progress in a digital way by actively and expertly but not aggressively improving an existing service. While also taking care to ensure consistent quality.... integrity We deliver what we promise. We are transparent and easy to get hold of. Positioning Optimally integrated international solution, where the UX is our strong suite. "The customer should have the feeling that it just works." UX!!! Everything has to be sexy :-)

3 Visual Briefing Visual Briefing How should the design be? What effect should it achieve? classic modern adult juvenile female male playful sophisticated economical geometric abstract colorful luxurious organic concrete monochrome

4 rand Visuals ogo Our Logo consist of icon and typeface. Consistent use of the horizontal version is crucial for brand awareness. The vertical logo is a fall-back for social media only. ogo Family Horizontal logo is used as default logo in most cases - on web, in print media. Horizontal Logo Vertical logo has the typeface below the main logo in smaller size, and is used only on social media (as profile picture, featured image, etc.) Each product has a unique variation of the main logo, with typeface raised, and product name added below. MAIL Vertical Logo Product Logo Logo Color Variants Light background MAIL Dark background MAIL Monochrome MAIL

5 Brand Visuals Logo Spacing Required clear space as indicated by light blue square. Square size is height of letter C from Clevver logotype. MAIL Logo Don ts Don t stretch the logo. Keep the original proportions. Don t change the colors of the letters. Don t crop the logo. Don t change the letter spacing. branding guide Don t change the proportions of vertical logo. Don t change the color of first v, only the second v is lighter. Don t obstruct logo with other elements. Don t use the logo in a sentence. Don t flatten the gradients in color version of the logo. Don t use logo on strong pattern background. Don t put outlines on logo or logotype. Don t use the dark logo on anything but light surfaces. Don t angle the logo in any way. Don t rearange the main colors of the logo. Don t change the transparency of the logo. Don t use monochrome version on web content.

6 Brand Visuals Colors Primary Dark Blue # R:36, G:53, B:72 Neutral Blue #4cb2d8 R:76, G:178, B:216 Navy Blue # R:51, G:102, B:153 Pale Yellow #ffeda3 R:255, G:237, B:163 Yellow #ffcb00 R:255, G:203, B:0 Orange #ff8000 R:255, G:128, B:0 Red #bf0000 R:191, G:0, B:0 Dark Gray # R:146, G:146, B:146 Gray #cbcbcb R:203, G:203, B:203 Light Gray #f1f1f1 R:241, G:241, B:241 PaleBlue #e2ebfa R:226, G:235, B:250 Secondary Dark Blue #2 # R:33, G:66, B:99 Pale Green #d2f4d8 R:210, G:244, B:216 Green #4cd764 R:76, G:215, B:100 Color Usage Web Dashboard Use primary dark and navy blue colors for header and sidebar. Use secondary dark blue for submenus or not active elements. Use primary blue for regular buttons and links. White is the main background color, with light gray and pale blue acting as accents: pale blue as table header/footer, and as search box, and light gray as secondary background. Use gray for text fields/dropdowns, inactive checkboxes, and as dividers. Use Dark Gray for inactive text, field titles, tooltips, etc. Pale yellow is used as header accent, and tooltip background. Most primary and secondary colors are used as color indicators for status icons. Use yellow for active buttons, call to action buttons, and for active elements in header and sidebar. Use green for notification color, and as color indicator on setup status. User red as color indicator for setup status, and for error/caution messages. Color Consistency Use colors consistently throughout the design. Consistency will let users know what to expect, and quickly identify what they want to do. Action Main Action Error Notice

7 Brand Visuals Typography Sofia Pro Sofia Pro Regular Aa Sofia Pro font family is used as main font to clearly and objectively present content on website, dashboard, and all online content. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz (,.;:?!$&*) Sofia Pro Bold Aa Century Gothic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz (,.;:?!$&*) Century Gothic Regular Aa Century Gothic font family is used as main font for presentations, documents, and any other kind of print material. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz (,.;:?!$&*) Century Gothic Bold Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz (,.;:?!$&*) Text Styles Heading 1 #336699, Heading 2 #336699, Heading 3 # Heading 4 Size: 36 Size: 24 Size: 18 Size: 16 Line Height: 1.4 Line Height: 1.4 Line Height: 1.4 Line Height: 1.2 Weight: Bold Weight: Bold Weight: Regular Weight: Regular Body Copy Popup Button Small Button # Size: 15 Size: 18 Size: 14 Line Height: 1.2 Line Height: 1.2 Line Height: 1.2 Weight: Regular Weight: Regular Weight: Regular Case: Uppercase

8 UI Elements Iconography Basic status icons are used to quickly identify status of customers packages. Each color represents a different status. Envelope Scan Cloud Send Collect Search New Scanned Storage Trash Setup Menu and button icons can be in either white or dark blue color (dark blue for active, white for inactive. Illustrations ClevverMail ClevverPhone ClevverCompany ClevverBank UI Elements Text Field Dropdown Field 16 Field Title 16 Field Content #cbcbcb # Font Size: 15 #cbcbcb Field Content Disabled Field Field Title 16 # Height: 40 Font Size: 15 Dropdown icon bounding box: 8x8 Height: 40 Popup Buttons Button min 20 Sign Up CANCEL SAVE #ffcb00, #4cb2d8 Font Size: 18 Height: Case: Uppercase Popup buttons are always full width, divided evenly. Bottom corners follow the same roundness of the popup (8). Use yellow for main action (Save, Confirm, Proceed), and use lighht blue for secondary action (Cancel, Additional Option, Back, etc.) 40 Login #ffcb00, #4cb2d8 Font Size: 14 Height: 40 Checkboxes and Radio Buttons Checkbox Radio Delete

9 UI Elements UI Elements Table ID Category Product Description Created Date C _BER01 Postbox Postbox Berlin C C _BER01 Postbox Postbox Berlin C Table Header Table Rows #e3ecfb # Font Size: 16 UI in Action Table Icons #cbcbcb, # Font Size: 16 2 Icon color: # Status Action

10 Landing Page Landing Page Basic values for the landing pages and subsequent inner pages. Keep the page dynamic and sections clearly marked with different backgrounds from neutral palette. 80 Heading Heading 3 Body Heading

11 Landing Page Header Basic values for the header and hero section of the landing page. This is for the screen width of Heading Heading Heading 2 Heading