MSCI Brand Book

Brand guidelines

2 TOC 03 Logo 08 Logo usage 14 Typography 19 Color 39 Graphic accents 42 Iconography 51 Best practices for user experience (UX) 54 Videography

3 01 The logo

The logo MSCI brand guidelines 4 Worldly composed Meticulous quality Data-driven Connected

The logo MSCI brand guidelines 5 The nexus

The logo MSCI brand guidelines 6 The logo Daintree # 011b2b PANTONE 296 C R 1 C 100 G 27 M 80 B 43 Y 52 K 69 Smokey blue # 0626a9 PANTONE 2736 C R 6 C 100 G 38 M 85 B 169 Y 0 K 0

The logo MSCI brand guidelines 7 ONE-COLOR REVERSED (White) ONE-COLOR (Black)

8 02 Logo usage

9 Logo usage MSCI brand guidelines Clear space must be kept around the logo to maintain brand integrity. The clear space on all sides is the inner square of the mark as seen above.

10 Logo usage MSCI brand guidelines Clear space must be kept around the logo to maintain brand integrity. The clear space on all sides is the inner square of the mark as seen above.

11 Logo usage MSCI brand guidelines Do not replace colors Do not distort the logo Do not add effects to the logo Do not scale logo elements Do not use non-approved colors Do not change logo arrangement Do not use the Nexus on its own, or as a graphic device in a diagram. The exception to this, are favicons*. * A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page. Do not create versions of the MSCI logo. Always contact the Brand & Design Team for advice. NEW YORK

12 MSCI brand guidelines Using the MSCI corporate logo with third party logos In instances where MSCI is a partner, sponsor or collaborator with other organizations, it’s important to ensure all of the logos are of equal size and weighting, with clear exclusion zones between them. For advice regarding third party co-branding, please contact MSCI Marketing for more information. All instances of third party co-branding using the MSCI Corporate Logo must be approved by MSCI Marketing.

13 MSCI brand guidelines The MSCI partner logo The MSCI corporate logo may be used in conjunction with the logos of external organizations in co-branded applications. Co-branding with a partner organization implies an equal relationship, therefore the logos of MSCI and the partner organization should appear to be equal. There is a specific version of the MSCI corporate logo for use in these instances, known as the MSCI partner logo . It incorporates a vertical rule to separate the MSCI corporate logo from the logo of the partner organization. Exclusion zone As with the exclusion zone for the MSCI corporate logo, the height of the MSCI letters in the logo are used to calculate the exclusion zone between the MSCI partner logo and any partner logo it is paired with. Partner logo Partner logo Construction of partner logo with clear space

14 03 Typography

15 Typography MSCI brand guidelines AaBbCc0123 Roboto abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890*&$#@ Vid unt aut oLupta nis ilique nonsequatem essimus re voluptibea dolorro ma nia is esequas sitia voluptio mi, saperspisApis volor aut que nesendam ipiditibus siminci aut alis si quaectae parunt porum earcill. PRIMARY TYPEFACE FOR BOTH DIGITAL AND PRINT ARTWORK

16 Typography MSCI brand guidelines AaBbCc0123 Merriweather abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890*&$#@ Vid unt aut oLupta nis ilique nonsequatem essimus re voluptibea dolorro ma nia is esequas sitia voluptio mi, saperspisApis volor aut que nesendam ipiditibus siminci aut alis si quaectae parunt porum earcill. PRIMARY TYPEFACE FOR PROFESSIONALLY DESIGNED ARTWORK ONLY, WHEN LARGE BLOCKS OF TEXT ARE REQUIRED

17 Typography MSCI brand guidelines AaBbCc0123 Arial abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890*&$#@ Vid unt aut oLupta nis ilique nonsequatem essimus re voluptibea dolorro ma nia is esequas sitia voluptio mi, saperspisApis volor aut que nesendam ipiditibus siminci aut alis si quaectae parunt porum earcill. SYSTEM TYPEFACE (DISTRIBUTED WITH MICROSOFT WINDOWS) FOR EMAIL USE

18 Typography MSCI brand guidelines EASTERN TYPEFACES DEFAULT WINDOWS FONTS FOR NON-MAC USERS APPLE SYSTEM TYPEFACES JAPANESE Meiryo Hiragino Sans KOREAN Dotum Apple Gothic, Apple LiGothic SIMPLIFIED CHINESE YaHei Hei TRADITIONAL CHINESE JhengHei Li Hei ARABIC DinArabic DinArabic

19 04 Color

20 Color MSCI brand guidelines SECONDARY Marigold # ffc62d PANTONE 123 C R 255 C 0 G 198 M 25 B 45 Y 86 K 0 Carnation # e44261 PANTONE 198 C R 228 C 3 G 66 M 85 B 97 Y 46 K 0 Moody blue # 6c7bd3 PANTONE 2124 C R 108 C 65 G 123 M 52 B 211 Y 0 K 0 Tangerine # f08900 PANTONE 144 C R 240 C 1 G 137 M 54 B 0 Y 100 K 0 Turquoise # 00c4b3 PANTONE 3265 C R 0 C 81 G 196 M 0 B 179 Y 42 K 0 PRIMARY Daintree # 011b2b PANTONE 296 C R 1 C 100 G 27 M 80 B 43 Y 52 K 69 Smokey blue # 0626a9 PANTONE 2736 C R 6 C 100 G 38 M 85 B 169 Y 0 K 0 OPTIONAL TINTS Mercury # dce3ec PANTONE 656 C R 220 C 16 G 227 M 8 B 236 Y 5 K 0 Evening blue # 7692dd PANTONE 2123 C R 118 C 59 G 146 M 39 B 221 Y 0 K 0 Dark ocean # 00293b PANTONE 303 C R 0 C 100 G 41 M 73 B 59 Y 50 K 58 Cool marble # c7d2ec PANTONE 2706 C R 199 C 25 G 210 M 14 B 236 Y 1 K 0 Sky blue # 5987da PANTONE 2718 C R 89 C 68 G 135 M 44 B 218 Y 0 K 0 White # FFFFF R 255 C 0 G 255 M 0 B 255 Y 0 K 0 Soapstone # c6c8c8 PANTONE Cool Gray 3 C R 198 C 26 G 200 M 18 B 200 Y 20 K 1 Silver # d5d7d5 PANTONE Cool Gray 1 C R 213 C 19 G 215 M 12 B 213 Y 16 K 0 GREYSCALE Flint # 73787c PANTONE Cool Gray 9 C R 115 C 55 G 120 M 42 B 124 Y 38 K 22 Jade # 00945e PANTONE 340 C R 0 C 98 G 148 M 5 B 94 Y 79 K 0

21 Color MSCI brand guidelines Daintree PANTONE 296 C C: 100 M: 80 Y: 52 K: 69 R: 1 G: 27 B: 43 #011b2b R: 27 G: 50 B: 65 Hex: #1b3241 90% R: 52 G: 73 B: 86 Hex: #344956 80% R: 77 G: 96 B: 107 Hex: #4d606b 70% R: 103 G: 118 B: 128 Hex: #677680 60% R: 128 G: 141 B: 149 Hex: #808d95 50% R: 154 G: 164 B: 170 Hex: #9aa4aa 40% R: 179 G: 187 B: 192 Hex: #b3bbc0 30% R: 204 G: 209 B: 213 Hex: #ccd1d5 20% R: 229 G: 232 B: 234 Hex: #e5e8ea 10%

22 Color MSCI brand guidelines Smokey Blue PANTONE 2736 C C: 100 M: 85 Y: 0 K: 0 R: 6 G: 38 B: 169 #0626a9 R: 30 G: 59 B: 177 Hex: #1e3bb1 90% R: 55 G: 81 B: 186 Hex: #3751ba 80% R: 80 G: 103 B: 195 Hex: #5067c3 70% R: 105 G: 125 B: 203 Hex: #697dcb 60% R: 130 G: 146 B: 212 Hex: #8292d4 50% R: 155 G: 168 B: 221 Hex: #9ba8dd 40% R: 180 G: 190 B: 229 Hex: #b4bee5 30% R: 205 G: 212 B: 238 Hex: #cdd4ee 20% R: 230 G: 233 B: 246 Hex: #e6e9f6 10%

23 Color MSCI brand guidelines Mercury PANTONE 656 C C: 16 M: 8 Y: 5 K: 0 R: 220 G: 227 B: 236 #dce3ec R: 224 G: 230 B: 238 Hex: #e0e6ee 90% R: 227 G: 233 B: 240 Hex: #e3e9f0 80% R: 231 G: 236 B: 242 Hex: #e7ecf2 70% R: 234 G: 238 B: 244 Hex: #eaeef4 60% R: 238 G: 241 B: 246 Hex: #eef1f6 50% R: 241 G: 244 B: 247 Hex: #f1f4f7 40% R: 245 G: 247 B: 249 Hex: #f5f7f9 30% R: 248 G: 249 B: 251 Hex: #f8f9fb 20% R: 251 G: 252 B: 253 Hex: #fbfcfd 10%

24 Color MSCI brand guidelines Cool marble PANTONE 2706 C C: 25 M: 14 Y: 1 K: 0 R: 199 G: 210 B: 236 #c7d2ec R: 205 G: 214 B: 238 Hex: #cdd6ee 90% R: 210 G: 219 B: 239 Hex: #d2dbef 80% R: 216 G: 224 B: 241 Hex: #d8e0f1 70% R: 222 G: 228 B: 244 Hex: #dee4f4 60% R: 227 G: 233 B: 245 Hex: #e3e9f5 50% R: 233 G: 237 B: 247 Hex: #e9edf7 40% R: 238 G: 241 B: 249 Hex: #eef1f9 30% R: 244 G: 246 B: 251 Hex: #f4f6fb 20% R: 249 G: 250 B: 253 Hex: #f9fafd 10%

25 Color MSCI brand guidelines Evening blue PANTONE 2123 C C: 59 M: 39 Y: 0 K: 0 R: 118 G: 146 B: 221 #7692dd R: 132 G: 157 B: 225 Hex: #849de1 90% R: 145 G: 168 B: 228 Hex: #91a8e4 80% R: 159 G: 179 B: 232 Hex: #9fb3e8 70% R: 173 G: 190 B: 235 Hex: #adbeeb 60% R: 186 G: 201 B: 238 Hex: #bac9ee 50% R: 200 G: 212 B: 241 Hex: #c8d4f1 40% R: 214 G: 222 B: 245 Hex: #d6def5 30% R: 227 G: 233 B: 248 Hex: #e3e9f8 20% R: 241 G: 244 B: 252 Hex: #f1f4fc 10%

26 Color MSCI brand guidelines Sky blue PANTONE 2718 C C: 68 M: 44 Y: 0 K: 0 R: 89 G: 135 B: 218 #5987da R: 105 G: 155 B: 155 Hex: #6993de 90% R: 122 G: 159 B: 225 Hex: #7a9fe1 80% R: 138 G: 171 B: 229 Hex: #8aabe5 70% R: 155 G: 183 B: 233 Hex: #9bb7e9 60% R: 172 G: 195 B: 236 Hex: #acc3ec 50% R: 188 G: 207 B: 240 Hex: #bccff0 40% R: 205 G: 219 B: 244 Hex: #cddbf4 30% R: 222 G: 231 B: 248 Hex: #dee7f8 20% R: 238 G: 243 B: 251 Hex: #eef3fb 10%

27 Color MSCI brand guidelines Dark ocean PANTONE 303 C C: 100 M: 73 Y: 50 K: 58 R: 0 G: 41 B: 59 #00293b R: 26 G: 62 B: 79 Hex: #1a3e4f 90% R: 51 G: 84 B: 98 Hex: #335462 80% R: 77 G: 105 B: 118 Hex: #4d6976 70% R: 102 G: 127 B: 137 Hex: #667f89 60% R: 128 G: 148 B: 157 Hex: #80949d 50% R: 155 G: 155 B: 155 Hex: #99aab0 40% R: 178 G: 191 B: 196 Hex: #b2bfc4 30% R: 204 G: 212 B: 216 Hex: #ccd4d8 20% R: 229 G: 234 B: 235 Hex: #e5eaeb 10%

28 Color MSCI brand guidelines Marigold PANTONE 123 C C: 0 M: 25 Y: 86 K: 0 R: 255 G: 198 B: 45 #ffc62d R: 255 G: 204 B: 66 Hex: #ffcc42 90% R: 255 G: 210 B: 87 Hex: #ffd257 80% R: 255 G: 215 B: 108 Hex: #ffd76c 70% R: 255 G: 221 B: 129 Hex: #ffdd81 60% R: 255 G: 227 B: 150 Hex: #ffe396 50% R: 255 G: 232 B: 171 Hex: #ffe8ab 40% R: 255 G: 238 B: 192 Hex: #ffeec0 30% R: 255 G: 244 B: 213 Hex: #fff4d5 20% R: 255 G: 249 B: 234 Hex: #fff9ea 10%

29 Color MSCI brand guidelines Tangerine PANTONE 144 C C: 1 M: 54 Y: 100 K: 0 R: 240 G: 137 B: 0 #f08900 R: 241 G: 149 B: 26 Hex: #f1951a 90% R: 243 G: 161 B: 51 Hex: #f3a133 80% R: 245 G: 173 B: 77 Hex: #f5ad4d 70% R: 246 G: 184 B: 102 Hex: #f6b866 60% R: 248 G: 196 B: 128 Hex: #f8c480 50% R: 249 G: 208 B: 153 Hex: #f9d099 40% R: 250 G: 220 B: 178 Hex: #fadcb2 30% R: 252 G: 232 B: 204 Hex: #fce8cc 20% R: 253 G: 243 B: 229 Hex: #fdf3e5 10%

30 Color MSCI brand guidelines Carnation PANTONE 198 C C: 3 M: 85 Y: 46 K: 0 R: 228 G: 66 B: 97 #e44261 R: 231 G: 85 B: 113 Hex: #e75571 90% R: 233 G: 104 B: 129 Hex: #e96881 80% R: 236 G: 123 B: 145 Hex: #ec7b91 70% R: 239 G: 142 B: 160 Hex: #ef8ea0 60% R: 241 G: 161 B: 176 Hex: #f1a1b0 50% R: 244 G: 180 B: 192 Hex: #f4b4c0 40% R: 247 G: 198 B: 208 Hex: #f7c6d0 30% R: 250 G: 217 B: 223 Hex: #fad9df 20% R: 252 G: 236 B: 239 Hex: #fcecef 10%

31 Color MSCI brand guidelines Turquoise PANTONE 3265 C C: 81 M: 0 Y: 42 K: 0 R: 0 G: 196 B: 179 #00c4b3 R: 26 G: 202 B: 187 Hex: #1acabb 90% R: 51 G: 208 B: 195 Hex: #33d0c3 80% R: 77 G: 214 B: 202 Hex: #4dd6ca 70% R: 102 G: 220 B: 210 Hex: #66dcd2 60% R: 128 G: 225 B: 217 Hex: #80e1d9 50% R: 153 G: 231 B: 225 Hex: #99e7e1 40% R: 178 G: 237 B: 232 Hex: #b2ede8 30% R: 204 G: 243 B: 240 Hex: #ccf3f0 20% R: 229 G: 249 B: 247 Hex: #e5f9f7 10%

32 Color MSCI brand guidelines Moody blue PANTONE 2124 C C: 65 M: 52 Y: 0 K: 0 R: 108 G: 123 B: 211 #6c7bd3 R: 123 G: 136 B: 216 Hex: #7b88d8 90% R: 138 G: 149 B: 220 Hex: #8a95dc 80% R: 152 G: 163 B: 224 Hex: #98a3e0 70% R: 167 G: 176 B: 229 Hex: #a7b0e5 60% R: 182 G: 189 B: 233 Hex: #b6bde9 50% R: 196 G: 202 B: 237 Hex: #c4caed 40% R: 211 G: 215 B: 242 Hex: #d3d7f2 30% R: 226 G: 228 B: 246 Hex: #e2e4f6 20% R: 240 G: 242 B: 251 Hex: #f0f2fb 10%

33 Color MSCI brand guidelines Jade PANTONE 340 C C: 98 M: 5 Y: 79 K: 0 R: 0 G: 148 B: 94 #00945e R: 0 G: 151 B: 101 Hex: #009765 90% R: 0 G: 157 B: 114 Hex: #009d72 80% R: 58 G: 166 B: 130 Hex: #3aa682 70% R: 101 G: 177 B: 147 Hex: #65b193 60% R: 133 G: 189 B: 166 Hex: #85bda6 50% R: 161 G: 201 B: 184 Hex: #a1c9b8 40% R: 187 G: 214 B: 202 Hex: #bbd6ca 30% R: 211 G: 228 B: 220 Hex: #d3e4dc 20% R: 233 G: 241 B: 238 Hex: #e9f1ee 10%

34 Color MSCI brand guidelines Silver PANTONE Cool Gray 1 C C: 19 M: 12 Y: 16 K: 0 R: 213 G: 215 B: 213 #d5d7d5 R: 218 G: 219 B: 217 Hex: #dadbd9 90% R: 222 G: 223 B: 221 Hex: #dedfdd 80% R: 226 G: 227 B: 226 Hex: #e2e3e2 70% R: 230 G: 231 B: 230 Hex: #e6e7e6 60% R: 234 G: 235 B: 234 Hex: #eaebea 50% R: 238 G: 239 B: 238 Hex: #eeefee 40% R: 243 G: 243 B: 243 Hex: #f3f3f3 30% R: 247 G: 247 B: 247 Hex: #f7f7f7 20% R: 251 G: 251 B: 251 Hex: #fbfbfb 10%

35 Color MSCI brand guidelines Soapstone PANTONE Cool Gray 3 C C: 26 M: 18 Y: 20 K: 1 R: 198 G: 200 B: 200 #c6c8c8 R: 203 G: 206 B: 205 Hex: #cbcecd 90% R: 209 G: 211 B: 211 Hex: #d1d3d3 80% R: 215 G: 217 B: 216 Hex: #d7d9d8 70% R: 221 G: 222 B: 222 Hex: #dddede 60% R: 226 G: 228 B: 227 Hex: #e2e4e3 50% R: 232 G: 233 B: 233 Hex: #e8e9e9 40% R: 238 G: 239 B: 238 Hex: #eeefee 30% R: 244 G: 244 B: 244 Hex: #f4f4f4 20% R: 249 G: 250 B: 249 Hex: #f9faf9 10%

36 Color MSCI brand guidelines Flint PANTONE Cool Gray 9 C C: 55 M: 42 Y: 38 K: 22 R: 115 G: 120 B: 124 #73787c R: 129 G: 133 B: 137 Hex: #818589 90% R: 143 G: 147 B: 150 Hex: #8f9396 80% R: 157 G: 160 B: 163 Hex: #9da0a3 70% R: 171 G: 174 B: 176 Hex: #abaeb0 60% R: 185 G: 187 B: 189 Hex: #b9bbbd 50% R: 199 G: 201 B: 202 Hex: #c7c9ca 40% R: 213 G: 214 B: 216 Hex: #d5d6d8 30% R: 227 G: 228 B: 229 Hex: #e3e4e5 20% R: 241 G: 241 B: 242 Hex: #f1f1f2 10%

37 MSCI brand guidelines Color contrast for not large-scale text colors for dark backgrounds PMS 296 C PMS 303 C PMS Cool Gray 9C PMS 2736 C PMS 123 C PMS 144 C PMS 198 C PMS 3265 C PMS 2124 C PMS 340 C colors for light backgrounds White PMS Cool Gray 1C PMS Cool Gray 3C PMS 656 C PMS 2706 C PMS 2123 C PMS 2736 C PMS 123 C PMS 144 C PMS 3265 C

38 MSCI brand guidelines #FFFFF #d5d7d5 #c6c8c8 #dce3ec #c7d2ec #73787c #7692dd #5987da #0626a9 #00293b #011b2b #ffc62d #f08900 #e44261 #00c4b3 #6c7bd3 #00945e Color contrast for MSCI logo positioning The full color version of the logo is best advised against these background tones The white color version of the logo is best suited against these background tones

39 05 Graphic accents

40 Graphic accents MSCI brand guidelines Investors do not want to be caught unaware when the plates of the investment world shift. Henry A. Fernandez Chairman and Chief Executive Officer Powering better investment decisions

41 Graphic accents MSCI brand guidelines Pattern This pattern, representative of global connectivity, is used to add texture and can be seen throughout our branded materials.

42 06 Iconography

43 MSCI brand guidelines Iconography Iconography can visually help communicate and represent ideas to convey information with clarity and impact. Our icon style reflects our brand attributes and emphasises the art of making the complex, simple. The style treatment uses solid brand colors, unfussy designs and clean outlines. This document displays all the icons available for use. Please use the appropriate icon for the message you wish to convey – their meanings are fixed and not to be stretched. Please do not create your own icons, or use ones you have found on the web.

44 MSCI brand guidelines Iconography guidelines Solid Outline All new iconography needs to be created as a solid color and outline version. If you need further guidance or the iconography library is required, plase email [email protected] and CC your MSCI stakeholder

45 MSCI brand guidelines Iconography guidelines 1 Dimension can vary based on the proportions of the icons COMMUNICATION SERVICES Wide format icons 73 px 91 px Maximum height Maximum width High format icons CHINA If you need further guidance or the iconography library is required, plase email [email protected] and CC your MSCI stakeholder

46 MSCI brand guidelines Iconography guidelines 2 Use the following structure as the icon layout Frame Icon Empty area Name ICON NAME ICON NAME If you need further guidance or the iconography library is required, plase email [email protected] and CC your MSCI stakeholder

47 MSCI brand guidelines Iconography guidelines Outline Solid Solid Solid 1.3 pt stroke line weight Outline Outline 3 The line weight guidance is as follows: Always convert the stroke to path: Object > Path > Outline stroke. This will ensure that the stoke is always of the same proportions regardless of the dimensions of the icon. Based on the size of some of the details you may consider leaving them as solid elements If you need further guidance or the iconography library is required, plase email [email protected] and CC your MSCI stakeholder

48 MSCI brand guidelines Iconography guidelines 1 Please use a 16 x 16px dimensions artboard 2 You may create outline and solid versions 3 This version of icons must be simplified, avoiding a lot of details and just highlighting the most relevant elements 4 Do not include any text For digital platform icons, please refer to the following specs. Please refer to the below example and difference between each icon based on its purposes 16 px 16 px 16 px 16 px UTILITIES UTILITIES Digital products Brand and design Outline Solid Outline Solid If you need further guidance or the iconography library is required, plase email [email protected] and CC your MSCI stakeholder

49 MSCI brand guidelines Corporate iconography FACTORS FACTORS FACTORS If you need further guidance or the iconography library is required, plase email [email protected] and CC your MSCI stakeholder

50 MSCI brand guidelines ADVANCED TECHNOLOGY NETZERO NETZERO ADVANCED TECHNOLOGY SUSTAINABILITY NOW SUSTAINABILITY NOW GREATER COMPLEXITY GREATER COMPLEXITY Theme iconography If you need further guidance or the iconography library is required, plase email [email protected] and CC your MSCI stakeholder

51 07 Best practices for user experience (UX)

52 CONTENT SEO Content elements optimized for SEO include titles and meta descriptions, well-chosen internal links, and images with descriptive alternative text. The easier it is for search engines to find your content, the easier it will be to expand audience. • Page Title: 50-55 characters limit including spaces Title case. No special characters. • Short descriptions/Meta descriptions 250 character limit, including spaces. • Use main keywords early on in title and content. • Write unique titles, descriptions and content. - Not having duplicative content is one of the most important SEO best practices. This applies to titles, meta descriptions and alt text. • Proper use of a nested structure for section headings (e.g. from H1 to H6) - H1: Limited H1 heading to one per page. The H1 heading should be the name/title of the page. - Use H2 – H6 headings to introduce different sections. • Use clear section headers to define sections. (H2-H6) • “Front-load” titles, meaning you start your title/h1 tag with your target keyword. • PDFs contain metadata (title and 3 -5 keywords) and PDF file name should be consistent with actual the title. Text/Writing Writing for the web is not the same as writing for a print publication. A page on the web should be half the length of a similar print document. (webpage should not be a duplication of the PDF) • Avoid large blocks text. Ideal ranges between 40 and 55 characters per line (4-5) - Especially helpful on mobile devices. • Avoid marketing speak: - “Click here”. “Free...” - Avoid repetition of MSCI ex: msci.com/factor-investing (MSCI is mentioned 69 times on this single page) - Domain is MSCI.com repeating MSCI numerous times doesn’t increase SEO. - MSCI within the title hurts SEO (first words in the title are weighted more heavily) • Do not underline body text unless it’s a hyperlink. • Body text hyperlinks should be underlined on hover. Meets accessibility requirement. Call-to-Action (CTA) Buttons Buttons used to guide users towards your goal conversion. Make it clear to users what they should do and why they should. CTA should directly reflect the message of the content that came before it. (i.e. ‘Download Annual Report”) • Title case or caps should be used for CTAs. • Assistive technology needs help in differentiating between CTAs that are close in proximity. - ‘Learn More’ doesn’t provide context. • Offer users context before offering a CTA. (i.e. a description/intro copy before offering a download option) Best practices for user experience (UX) MSCI brand guidelines

53 Best practices for user experience (UX) MSCI brand guidelines IMAGERY Image size Image size has a big impact on your website’s performance. If your file sizes are too big, your pages take a long time to load, and you risk losing visitors who don’t have the patience to wait. This concern is heightened for mobile devices. • Ideal hero image file size recommendation: 200KB • Ideal image file size within body copy: 100KB • Limit number of images being used on one page. Slows page load times. Image resolution Resolution is what determines how good your image looks on screen. • Resolution of between 72 PPI as a minimum and 120 PPI as a maximum for the majority of screens. • One way to adjust the resolution and file size “Save For Web & Devices” option to save JPG images in Photoshop, you can choose preset quality settings (Low, Medium, High, Very High, and Maximum) Decorative image Images do not add information to the content of a page. • When using these images, a null (empty) alt text should be provided (alt=””) so they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output. Informative image Images convey a concept or information that can be expressed in a short phrase or sentence. (i.e charts) • Ideally, informative imagery/interactive component should be built out in HTML. - If the alt text needs a long description to fully convey the message the image should be built in HTML. • The text alternative should convey the meaning or content that is displayed visually, which typically should not be a literal description of the image. - Avoid: “image of...”, “picture of...” Image selection Use an image that provides relevant correlation to the content. Overlaying text on images • Use actual text that is styled with CSS rather than image-based text presentation. • Text on image can be hard to read, especially on mobile device. Should be avoided. VIDEO All videos should have closed captions. Video and audio files should have a transcript. • Splash screen/thumbnail should be high resolution. If possible, should be informative. • Close captions should not be burnt in. (i.e. users have the option to turn cc on/off) • Add Transcript to meet accessibility guidelines and improve SEO. • Do not use animated GIFs. They fail accessibility guidelines at all 3 levels A, AA, AAA*. - Tends to be heavy in terms of file size and slow page load times. * The Web Content Accessibility Guidelines (WCAG), are a series of guidelines for improving web accessibility. The WCAG are the best means of making websites useful to all your users. WCAG 2.0 guidelines are categorized into three levels of conformance in order to meet the needs of different groups and different situations: A (lowest), AA (mid- range), and AAA (highest). Conformance at higher levels indicates conformance at lower levels.

54 08 Videography

55 Videography MSCI brand guidelines MSCI LOGO BUG

56 Videography MSCI brand guidelines SUPER: TITLES

57 Videography MSCI brand guidelines SUPER: TRANSITIONAL COPY

58 Videography MSCI brand guidelines BOILER PLATE (APPEARS AFTER ANIMATION)

59 MSCI brand guidelines Videography - Corporate Videos SCRIPTS Video scripts and storyboards are critical tools for planning and shooting or animating videos. Scripts are important for organizing a video’s central message and key themes. Depending on the type of video being created, on-screen text, lines to be spoken by a voiceover artist or onscreen talent and snippets from filmed interviews arranged in chronological order all constitute a script. What a great script does is tell the story you are trying to convey as succinctly as possible. Storyboards are visualizations of a script in action. Their intent is to give producers, directors, editors or animators an idea of what the final product might look like as they progress scene by scene through a script. If scripts are a blueprint to a house, a storyboard is an architectural rendering. The script and storyboard should work together to make your video or animation production smoother and more predictable. Here are some tips on how to make both more effective: 1. KEEP IT SIMPLE Whether you are working on a training video, branded content video or a sizzle reel, the key to effectively getting your message across is simplicity. Focus on a single message and deliver it with just enough detail to get your point across. Avoid complicated dialogue. Use visual aids. Your goal is for the audience to retain the information you impart. The more you add, the less likely they are to remember any of it. 2. WATCH THE LENGTH Be brief. Teasers, sizzles and previews should not exceed 30 seconds. Promos, demos, touts and marketing material should be no longer than three minutes, and likely closer to one. Here are the reasons why: a. Mobile video has considerably shortened attention spans. Anything intended for online use, especially on social media, must compete with the viewer’s urge to swipe away. So your video should get to the point. Quick. b. The longer the video, the less likely viewers are to watch it until the end, and the less likely they will retain the message you’re trying to send. c. Longer videos are useful for captured audiences like clients who need in-depth training on a product or interviews with experts on complicated topics. If the goal of your video is to generate interest, hold attention or attract audiences, keep it as short as possible. 3. KNOW YOUR AUDIENCE Scripts should be written in a culturally-appropriate way for your intended audience. Match the language you use to your audience’s demographic. Craft your script around a scene your audience will immediately relate to. STORYBOARDS Storyboards are visual guides of how to bring the script alive. When all parties involved in a production agree on a storyboard before production begins, it saves an incredible amount of time during production and helps keep the production on-track. Depending on the size and scope of your video project, a storyboard can be as simple as a collection of thumbnails with numbers, or as advanced as a highly detailed diagram of the production layout. Good storyboards include various information related to the production and post-production stages, a detailed shot list, instructions for the camera operator and director (or for the animator, if the video is animated), as well as notes for the editor.

60 Videography MSCI brand guidelines SHOOTING USE A TWO-CAMERA SETUP Most subjects are real people and some might even be first-time interviewees. Using a two-camera setup will give you much more flexibility in post-production to piece together the best parts of all your subjects’ answers while cutting out all the “ummms” and awkward pauses. Cameras should be set at two different focal lengths (generally a wide or medium shot and a closeup shot) approaching the subject from similar angles. Subjects, generally, should look slightly off-screen as if speaking to an interviewer, but this rule can be bent if the project warrants it. The story you’re trying to tell should drive what camera angles you choose, rather than hard and fast rules. HIDE YOUR LAPEL MIC Videos will appear more professional the lapel mic is hidden. This can be achieved by applying gaff tape to the wire and asking your subject to run it up their shirt to hide it completely from view. BRING EXTRA CLOTHES Always ask your subjects to bring two extra shirts and ties/ outfits to the shoot. The purpose of this request is to be prepared in case a subject wears clothing that causes moiré patterns on screen or colors that blend in with the background. RECORDING AUDIO Ensure you record in the highest-quality audio possible. Low- grade video is explicable in a way that low-grade audio is not. If you can, use an external recorder and avoid running audio directly into cameras. If possible, use multiple microphones, such as a lavalier microphone coupled with an overhead shotgun mic. LIGHTING Corporate videos should be shot with flattering lighting that helps subjects look their best. Lean towards flatter lighting versus high-contrast, dramatic lighting. Pay attention to shadows under the eyes and cast by the nose. When a face is poorly lit, the shadows will break the subject’s connection with the viewer. A properly lit subject will also stand out from the background, rather than blend in. 3 POINT LIGHTING SETUP 3 point lighting is one of the standard method for lighting a video. The primary goal of 3 point lighting is to give a nice even spread of light across the subject, while ensuring that they stand out from their background. This is achieved by using three different lights: the key light, fill light and backlight. KEY LIGHT A key light is the primary light of the scene. It is the most intense and direct light source for the entire scene. It will be the first light to set up, and will be used to illuminate the subject. • Avoid placing your key light close to the camera. It will cause your lighting to become flat and featureless. The best place to set up your key light is 45 degrees from the camera. • A key light positioned to the side of the subject will create a mysterious/dramatic mood. Placing the key light behind the subject is not advised, unless you’d like your subject to be an anonymous silhouette. Not, generally, a good look for corporate videos. FILL LIGHT A fill light illuminates the shadows that are created by the key light. The placement of the fill light is 45 degrees from the camera, opposite the key light. The fill light should not completely eliminate shadows on the face, but should fill them in enough to give the face a softer and more natural appearance. • While the primary function of the fill is to remove shadows created by the key, it’s important that the fill remains indistinctive and does not create shadows or it’s own characteristics. The closer the fill light is to the camera, the fewer shadows it will create. • You can use natural sources of light, such as window or reflectors that bounce the key light, as fill lights as well. To use a reflector, place it on the opposite 3/4 to the key and angle to the subject. BACKLIGHT Place a backlight, or hair light, behind the subject and above them, angled slightly down. The idea is to create a rim of light around the shoulders and the head of the subject. This makes the subject distinct from the background and give them a three- dimensional look. • Non-diffused sunlight can often be too harsh to light your subject as a key light, but as a backlight, the sun can make your subject stand out. Just be careful they don’t become a silhouette. • With the sun as a backlight, you can use a reflector or a foam board to bounce the sun at a lesser intensity back up to the subject. EYE LIGHT If possible, use a bounce board or reflector to redirect light into the eyes of your subject. For close shots at desks and tables, even a white sheet of copy paper under your subject’s chin will often work. This will create a reflection on their eyes that gives them depth and intensity. Be careful – don’t overdo it and don’t blind your subject!

61 Videography MSCI brand guidelines DIFFUSED AND DIRECT LIGHT With direct light the light will hit the subject without any filter. This creates a hard light which can be useful if you are trying to achieve a particular dramatic quality. In contrast, diffused light will use some form of interference between the subject and the light. This can be achieved by using a filter, gels or a reflector. This will create a softer look. For corporate videos, diffuse light is preferred. BOUNCE A bounce light, is a light that has been reflected. • Foam bead boards have a matte surface and will create the softest bounce light. • Reflectors with silver reflective material can create a hard light. • Bounced light in the form a reflector can be very versatile. You can create a key, fill, backlight, and even illuminate objects in the background with reflective material. AVAILABLE LIGHT This is what already exists at the location. This could just be the sun, street lights and signs. • If you’re using the sun as your lighting source, be sure to carefully plan for the weather and sun placement. • Early morning and late evening are great times for soft golden lighting. • Keep a track of time: the sun changes intensity and color quite quickly towards the latter end of the day. If you’re working with a green screen, be sure to use a well-lit production, but generally you can make do with a simple three- piece lighting setup if shooting indoors. Furthermore, if you’re shooting outside or in a particularly well-lit area, you may be able to get by with a reflector or single key. DRESS CODE FOR PHOTO SHOOTS AND VIDEO For guidance on dress code for videos, please refer to page 80 of the guidelines. MUSIC Background audio gives videos a more professional feel and tempo. Selecting and sourcing music can be a rather tricky subject for corporate video. Your options may be limited by how the video will be used. Regardless of the end use, your music needs to be licensed and royalty-free to avoid social media takedowns and potential legal trouble. We recommend bright and uplifting music, but are open to different genres if it is appropriate for the message being conveyed. We prefer instrumental tracks to those with vocals, as most of our videos have either spoken or written words and lyrics will cause unwanted distraction. Always download a watermarked preview to test the track in your project. Depending on the type of video project, you may find that music isn’t required throughout. Sizzle videos might need end to end music, but an interview or promo video may benefit from only sporadic music or a bookended approach. Music can be more powerful when it is used intermittently, to better accentuate a point or climax in the video. VOICEOVER ARTISTS The voiceover artist that you choose will quite literally become the voice of our brand. The right voice can create a real, lasting emotional connection between our brand and our customer. The wrong voice can create negative emotions towards our products and services. Make a short list of the emotions that you are trying to evoke and look for a voiceover artist whose voice best embodies those emotions. Our videos are generally targeting an international audience, and for some English may be a second language. Therefore, a clear accent which will be understandable by most of your audience would be ideal. For this purpose, opt for a middle range American or British accent. Whichever is the final selection, you should always aim to select voiceover artists that denote gender and racial diversity. When selecting a voiceover artist, consider beyond the current video and how well they represent our brand long term. People can form an emotional attachment to a voice and connect it intrinsically with the brand, which makes choosing one that speaks to MSCI’s brand values critical. You should also make sure that the voice over artist is going to be available in the future so that we can continue to use them. INCORPORATE OUR VISUAL BRANDING Be sure to always use our corporate font and design elements. These can be featured at the beginning of the video, have them in the bottom corner throughout the duration of the content, and/or include our intro/outro screens. CAPTIONS While it is important to use subtitles, it is even more important not to burn them into the video and be sure to have a transcript, for a better user experience, if the video is destined for web upload. PRIORITIZE CONSISTENCY IN VIDEO CAMPAIGNS If you’re creating a video series, consistency should be considered. People should watch our videos and recognize the style, format, and general message, as it will make the overall campaign much more impactful as a result. It’s typically a good call to have a similar intro and/or outro in the video series, and to opt for similar video lengths, as well as following same general tone.

62 MSCI brand guidelines Videography - Animation/Motion graphics ANIMATION/MOTION GRAPHICS As with footage, motion graphics also need to start with a script and a storyboard. Please refer to the corporate videos section in the guidelines. CONSIDER YOUR VIDEO OBJECTIVES Consider what you are trying to achieve with this video and the points you are trying to get across. This will determine the type of animation that is most suitable. Regardless of the animation type, it should always respect MSCI’s brand attributes. THE AUDIENCE Information-led videos are a great way to share information that essentially is going to drive a rational decision or communicate something of value to your audience (stats, figures, broad data). Story-driven videos help in the emotional decision-making process. All audiences make decisions in different ways. This will need to be when making a decision about the type of the animation you choose. WHERE WILL BE ANIMATION BE HOSTED? Before commencing the development of the storyboard, consider where the animation will reside and how audiences will interact with it. Will it be a banner on a webpage? A GIF in an email? A video announcing a product launch or instructing audiences in a product’s use? Will it be hosted on social media or on a dedicated landing page? A physical or online event? All of these considerations factor into an animation. If the video is an awareness piece targeting people in their personal life via social media or broadcast advertising, something more conversational is more suitable. If, on the other hand, it is an internal training video, something a little more formal might be appropriate. If the only channel for displaying the video is via a landing page, be sure to be clear and concise in the messaging. It is advisable not to try and include all details in a 2-minute-long video. As a guidance, for a 60-second animation script, one should aim for 140 words. Below is our recommended animation length at the different touch points of an audience’s journey: ATTRACT 10 SECONDS • Social • Brand films • Culture • Explainer 30 SECONDS • Thought-leadership CONVERT 60 SECONDS • Explainers • Tutorials • Case-studies CLOSE 2 MINUTES + • Tutorials • Culture • Testimonials ANIMATION CATEGORIES The list below illustrates some of the animation styles MSCI produces: • 2D character • 2D iconography • 2D motion graphics • 2D hand drawn • Abstract • Collage • Exploding diagrams • Feature promo • Kinetic typography • Overlay • Photomontage 2.5D • User interface • Whiteboard animations CONTENT TYPES ANIMATED DEMO VIDEO According to b usiness.com , viewers retain 95% of a message when they watch it in a video compared to 10% when reading it in text. The amount of information retained in one minute of online video is equal to around 1.8 million written words. CHARACTER ANIMATION Creating an animated character to represent a product, brand or service can be as efficient as a speaker when trying to convey a message to the audience. Including a character animation in a video will also help it stand out from other videos. Animated characters can be given traits and characteristics that target a particular audience and support the overall message. CORPORATE VIDEO The main difference between a corporate video and more conventional video advertising is its audience. While in broadcast advertising commercials use broad messages for the general audience, corporate videos are more precise. The purpose of the videos can be to onboard new employees, used as part of a training process, demo how a product or service can work for a customer, show the impact of corporate social responsibility efforts or other topics. Corporate videos are more detailed than conventional advertising, which is designed to use snippets of information to prompt viewers to discover more on their own. EVENT HIGHLIGHT VIDEO

63 MSCI brand guidelines Videography - Motion graphics/animation These types of videos are short, digestible piece of content that help summarise topics and key points from an event. They can serve as event recaps and also as promotional pieces for similar events in the future. An event highlight animation uses recorded audio from a presentation or interview with accompanying animation. An event highlight video should help maintain engagement with event attendees, summarize key findings or highlights for those who missed the event, serve as a refresher for those who were at the event and act as promotional content to be shared with event speakers through their own channels. EXPLAINER VIDEO An explainer video helps explain an intricate or lengthy system in a simple and concise way. Animation and motion graphics are fundamental components for explainer videos and are used to illustrate complex models in a clear way. They’re also a good format for sharing and lead to higher engagement levels. INFOGRAPHIC VIDEO Infographics are used to display a large variety of data in a quickly-understandable way. Maps, timelines or any visual representation of large amounts of data comprise infographics. Animating infographics allows them to be used in more diverse and interesting ways. By using visual elements to interpret content, information becomes more consumable. Static image infographics are effective, but audiences tend to spend more time on websites that have video content. Similar to other animated video formats, content runs through a series of carefully composed scenes, which can have music and voiceover to complete the sensorial experience. MOTION GRAPHICS Videos are more engaging than static documents. Motion graphics can be used to add life to otherwise static imagery, scenes or text, or as background features in interviews and other media. SOCIAL MEDIA ANIMATION A social media animation is aimed at populating social channels. The best format for these is in short, enticing, bitesize pieces of engaging content to lure users as they scroll through their feed. Social media channels are open to anyone with an account, and posting is available to all. Therefore, making your post visually unique, appealing and, most important, short, is critical to attracting viewers. As well as being eye-catching, video content helps make social media messages unforgettable. Audiences are more likely to engage with a social media video than with a static image or text update. TESTIMONIAL VIDEO A testimonial video can be one of the final deciding factors in a customer’s journey when they’re choosing one of our products or services. It helps potential customers see our human side and the people who work with us. Hearing and seeing real people talking about real-life case studies conveys a much stronger message than a written testimonial. While most testimonial videos make use of the talking heads format, the opportunities are far broader, as videos can be overlaid with animated elements to enhance live action footage. For instance, adding animated illustrations of supporting facts and figures or emphasising points as they’re made. TV ADVERTS Animated TV adverts help to create a higher viewer engagement than a traditional advert. It invites the sharing of that content and the potential for it to go viral, as this type of advert can also appeal to a wider audience, thus increasing brand awareness. Campaigns that use TV and online in tandem are most influential. They have the ability to reach customers across multiple channels simultaneously. By tapping into all the resources available at hand, when creating an animated TV advert, the content can be reshaped for different channels. This allows for increased reusability and variety. In a nutshell: • What are the communication objectives? What does success look like? • Who is the audience? • What do we want the audience to do? • What are the key messages? What is the most important key message and why? • How do we communicate this in the video? • What’s the tone of the video?