Design guide December 2020
TABLE OF CONTENTS Intro..................................................3 Basic elements..............................4 Trademark........................................5 Logo variations................................6 Respect distance............................8 Logo distortions..............................9 Colors...............................................10 Typography.....................................11 Typography examples..................12 Buttons............................................13 Icons.................................................14 Tone of voice..................................15 Layout..............................................16 Web layout.......................................17 Images..............................................18 E-mail................................................19 Newsletter.......................................20
INTRO
This design guide introduces MINDit’s guidelines for the use of the basic elements of the visual identity. The basic elements of MINDit is the logo, colors, typography, icons, buttons and layout for web, email and newsletter. The design guide should be used as a guide to ensure that MINDit’s visual identity is a recognizable visual expression that is maintained across media.
3
Basic elements
TRADEMARK
MINDit’s logo is a geometrical form that expresses various meanings. The asymmetrical heartshape is an interpretation of well-being and relates to the self-care aspect of the concept. The shape can also be interpreted as a hand, holding a pen and relates to the act of writing in a journal.
5
LOGO VARIATIONS
The following chapters will present variations of the logo and what conditions must be met when using it. The trademark can be used in the two primary colors (see chapter about colors, p.10). The fonts in the logo are always black unless the logo is placed on a dark background (see p.7). The logo can be used with the trademark above the name or in one line. The trademark can be used alone and alwas in the two primary colors. On social media the trademark is used as a prof ile picture.
6
LOGO VARIATIONS
When placed on dark background the logo with white fonts should be used.
7
10 mm
4 mm
RESPECT DISTANCE 10 mm The logo must be placed in relation to the outer edges and other text. 10 mm
A respect distance of minimum 10 mm has been set so that there is a good distance between the logo and other elements. The minimum distances shown is not a guide for
10 mm
placement of text and graphics in relation to logo, but shows only an absolute minimum distance, which must be respected.
10 mm
10 mm
8
LOGO DISTORTION
The logo must not be distorted, stretched, obscured or changed in any way in relation to form and expression.
9
PRIMARY COLORS
R: 29, G: 35, B: 49
R: 229, G: 206, B: 206
C: 83, M:74, Y: 53, K: 63
C: 9, M:18, Y: 12, K: 0
#1D2331
#E5CECE
COLORS
The color scheme is a combination of monochromatic colors and a dark blue color for contrast. The colors are available in both CMYK, RGB and HEX code. Primary colors are a dark blue and pink with a
SECONDARY COLORS
grey hue. The primary colors are used as background color on the website and an overall group color for the trademark or buttons. The secondary colors are used in particular for
R: 246, G: 235, B: 235
R: 248, G: 244, B: 244
fonts on a dark background or as a background
C: 2, M:7, Y: 4, K: 0
C: 2, M:3, Y: 2, K: 0
color for fonts with dark color.
#F6EBEB
#F8F4F4
R: 245, G: 245, B: 245 C: 3, M:2, Y: 2, K: 0 #F5F5F5
10
Poppins, medium ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå
TYPOGRAPHY
Two different fonts are used on the website, Poppins and Montserrat.
Poppins, light ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå
Poppins is used for: Headlines, Light, All Caps in 25pt. Buttons, Medium, All Caps in 20pt. Menu, Medium, 20pt. Montserrat is used for: Body text, Light, 16pt.
Montserrat, medium ABCDEFGHIJKLMNOPQRSTUVXYZÆØÅ abcdefghijklmnopqrstuvxyzæøå
Big headlines, Bold, All Caps, 45 pt.
11
Poppins, light, All caps, 25pt R: 29, G: 35, B: 49 C: 83, M:74, Y: 53, K: 63 #1D2331
Poppins, medium, 20pt R: 248, G: 244, B: 244 C: 2, M:3, Y: 2, K: 0 #F8F4F4
TYPOGRAPHY EXAMPLES Montserrat, bold, All caps, 45pt R: 248, G: 244, B: 244 C: 2, M:3, Y: 2, K: 0 #F8F4F4
Montserrat, Light, 16pt R: 29, G: 35, B: 49 C: 83, M:74, Y: 53, K: 63 #1D2331
12
R: 29, G: 35, B: 49 C: 83, M:74, Y: 53, K: 63 #1D2331
Poppins, medium, 20pt R: 248, G: 244, B: 244 C: 2, M:3, Y: 2, K: 0 #F8F4F4
BUTTONS
Here is a selection of the buttons used on the website. The call to action buttons are dark blue for light backgrounds and light pink for dark backgrounds. The buttons are rectangular with round edges of 14 pt.
Poppins, light, 25pt R: 246, G: 235, B: 235
R: 29, G: 35, B: 49
C: 2, M:7, Y: 4, K: 0
C: 83, M:74, Y: 53, K: 63
#F6EBEB
#1D2331
13
67
60
ICONS Stroke 11 pt
R: 245, G: 245, B: 245 C: 3, M:2, Y: 2, K: 0 #F5F5F5 R: 229, G: 206, B: 206
The icons are used to display the chart in the
C: 9, M:18, Y: 12, K: 0
menubar, social media and contact in the footer
#E5CECE
and when a messge is sent in the contact form. The icons are minimalistic, modern and without a background color. When used on light background they are displayed with the primary pink color. When used on dark background they are displayed with light pink.
R: 248, G: 244, B: 244 C: 2, M:3, Y: 2, K: 0 #F8F4F4 R: 29, G: 35, B: 49 C: 83, M:74, Y: 53, K: 63 #1D2331
R: 229, G: 206, B: 206 C: 9, M:18, Y: 12, K: 0 #E5CECE R: 245, G: 245, B: 245 C: 3, M:2, Y: 2, K: 0 #F5F5F5
14
VOICE CHARACTERISTICS
DESCRIPTION
DO
DON’T
PASSIONATE
We are passionate about helping individuals to grow and prosper
Use strong verbs
Use a passive voice
Be motivating
Be condescending
TONE OF VOICE
MINDit’s tone of voice is based on the phrase “Peace of mind” and communicates Happiness,
INFORMATIVE
We present simple ways to empower individuals on their self-cultivation journey in a sincere way
Use facts and testimonials
Use unreliable facts
Share genuine experiences
Use hearsay
Express in a positive way
Use unreliable testimonials
Well-being and Mindset. Tone of voice also represents MINDit’s values and the brand’s personality Communication should contain facts and testi-
RESPECTFUL
We respect that each individual has a different view on selfcultivation
Be tolerant Be diplomatic
Be judgemental Be sarcastic Be negative
monials. when promoting products. Tone of voice should be consistent throughout all content that is communicated on the website, social media, blog, e-mails and other
AUTHENTIC
We want to present tools and insight to make self-cultivation easier in your daily life. Even if it not our products
Be honest and direct Own any mistakes and address them Shoutout to other brands
Overpromise
platforms.
Oversell the products Exaggerate the excellence of products Speak ill of other brands
The Tone of voice chart is a guideline of how the voice charasteristics should be used in all communication.
15
Layout
1920
186 R: 29, G: 35, B: 49 C: 83, M:74, Y: 53, K: 63
85
#1D2331
1080
LAYOUT OF WEB R: 245, G: 245, B: 245 C: 3, M:2, Y: 2, K: 0 #F5F5F5
Here are the measurements and colors that recur 1080
on the website.
R: 229, G: 206, B: 206 C: 9, M:18, Y: 12, K: 0 #E5CECE
534
R: 246, G: 235, B: 235 C: 2, M:7, Y: 4, K: 0 #F6EBEB
534
17
430
406
Resolution 72px
IMAGES
The image style should be displayed in a natural expression. It is desirable to use authentic images but it is also permissible to use stock images where applicable. It should be considered that the required licensing for image publishing is present and also that the quality of the images is good. The lenght between images are 40pt.
18
Lorem Ipsum
E-MAIL SIGNATURE
Lorem IpsumOlo es ma videles ectotation niminum haris id quis pra ducimeni quae erchillabo. Nam am dolupid qui a cus re pro ommos poratiberia que doluptasped mo quo dendem quaturepuda Lorem IpsumOlo es ma videles ectotation niminum haris id quis pra ducimeni quae erchillabo. Nam am
The signature fonts are Montserrat Light and
dolupid qui a cus re pro ommos poratiberia que doluptasped mo quo dendem quaturepuda
Bold and are used in the signature in 9 points. size / 11 pkt. line spacing and the color black. The email text is written with Montserrat Light in
Best regards
9 points. size / 12 pkt. line spacing.
Surname Lastname www.mindit.is +354 000 00 00
The logo is at the bottom and is a “one line” logo.
mindit@gmail.com
19
NEWSLETTER
The headline font for the newsletter is Poppins Bold, All Caps 35pt. The subheadline font is Poppins Light, All Caps 25 pt The body text is Montserrat Light, 20pt.
20
