مصرف الراجحي — بنك الراجحي

صفحات الدليل

Logo Logo shape, color & specs The Al Rajhi logo consists of the Arabic and English Logo strip logotypes and the icon. One never appears without the other and neither are ever modified in any way. Logo color Special logo For applications with special formats such as signage, special logo lock-ups have been created. These are only to be used where it is specifically mentioned in these Guidelines. 3

Logo Use of primary & secondary logos Use of primary identity The primary identity stands on the transparent box. 4

Logo Logo emblem don’ts The Al Rajhi Bank logo is not to be altered Don’t alter proportions Don’t alter proportions or distorted in any way. This is neccessary to build a consistent brand experience and continually deliver built equity in our brand. Don’t use different colors at the same time Don’t use the emblem as an outline 5

Logo Logo emblem don’ts The Al Rajhi Bank logo is not to be altered or distorted in any way. This is neccessary to build a consistent brand experience and continually deliver built equity in our brand. 6

Logo Special use for the logo emblem Use of emblem in branding The logo emblem is used in branding, it comes as a separator between artwork and follow a specific set of rules and measurments. 7

Logo Strip size & dimensions In any given ATL portrait layout, the strip length is measured 5/8 from the width of the layout, as shown in the diagram. In any given ATL landscape layout, the length of the logo strip is measured based on the layout specification mentioned in the Guidelines. The toll free number and the website are always consistent in the layouts. The letter w is aligned with the B from the logotyp; (this should approximately make the font size 12 pts on an A4 layout.) The size of all the other aspects will be based on the created logo strip, taking the inner box of the logo element as the standard size of all the divisions in the layout. For presentation purposes that inner box will be called (x). Note: All sizes are applied to A4 layouts, and measured 8 proportionally for any other given layout.

Corporate colors Primary & secondary colors The primary colors are Al Rajhi Bank blue 2738C and Primary colors Al Rajhi Bank orange 159C. These colors are used for the logo strip and the orange transparent box of Retail. The secondary color palette is used for the other transparent boxes to support the blue primary color in internal/brand communications. Secondary colors 9

Corporate colors Color coding chart Al Rajhi Bank Private • Affluent • Business • Brand • HR Retail Male/Female Pantone 159C 85% opacity White 80% opacity Internal communication White 80% opacity 10

Typeface Fonts & font sizes English typeface Typfaces Clean, modern and precise The Arabic typeface used in Al Rajhi Bank marketing materials is GE SS. AlRajhi 12345678910 The English typeface used in Al Rajhi Bank marketing materials is AlRajhi font. For headlines & body copy When writing the headlines, sensible bolding of keywords is nesscary to attract focus to them. Arabic typeface واضح وعصري ومتقن GE SS 12345678910 For headlines & body copy Size examples Font specs On A4 layouts the font specs are: • Headline: 28 pts size, 29 pts leading • Sub-headline: 14 or 16 pts 20 pts regular • Body copy: 13 or 12 pts 28 pts size, 29 pts leading Sizes apply to both Arabic and English fonts. 18 or 20 pts 13 or 12 pts Body copy Note: All sizes are applied to A4 layouts, and measured 11 proportionally for any other given layout.

Stationery 12

Stationery Letterhead Template • Primary logo • English text: • Arial typeface • Font size: 12 pts • Arabic text: • Simplified Arabic typeface • Font size: 14 pts Alrajhi 5 pts light Alrajhi 4.5 pts light 13

Stationery Continuation sheet Template • Primary logo • English text: • Arial typeface • Font size: 12 pts • Arabic text: • Simplified Arabic typeface • Font size: 14 pts 14

Stationery Business cards Arabic side • Primary logo • English text: • Arial typeface • Arabic text: • GE SS typeface English side 15

Stationery Fax Fax • Primary logo (black) • English text: • Arial typeface • Arabic text: • GE SS typeface AlRajhi 14.5 pts AlRajhi 14.5 pts light light Arial 14 pts regular Arial Narrow 14.5 pts regular 16

Stationery Memo Memo • Primary logo • English text: • Arial typeface • Arabic text: • GE SS typeface AlRajhi 14.5 pts AlRajhi 14.5 pts light light 17

Stationery A4 & A5 notepads A4 & A5 notepads • Primary logo • English text: • Arial typeface • Arabic text: • GE SS typeface 18

Stationery Internal link Internal link • Primary logo • English text: • Arial typeface • Arabic text: • GE SS typeface 19

Stationery DL envelope DL envelope • Primary logo • English text: • Arial typeface • Arabic text: • GE SS typeface 20

Stationery Folder Folder • Primary logo • English text: • Arial typeface • Arabic text: • GE SS typeface AlRajhi 7 pts 21

Stationery A5 & A4 envelopes A5 & A4 envelopes • Primary logo • English text: • Arial typeface • Arabic text: • GE SS typeface GE SS 12 pts AlRajhi 12 pts AlRajhi 5 pts 22

Stationery Compliment slip Compliment slip • Primary logo • English text: • Arial typeface • Arabic text: • GE SS typeface 23

Stationery E-mail signature E-mail signature • Primary logo • English text: • Arial typeface • Arabic text: • GE SS typeface 24

Stationery Power Point presentation 25

Stationery Power Point presentation 26

Stationery Gift items branding Branded pens Branded mugs 27

Stationery Gift items branding Parking stickers USB drives 28

Stationery Gift items branding Tissue box branding 29

Stationery Gift items branding Bags 30

Communication templates 31

Photography style General Camera focus & lighting Indoor This guide serves as the base of the photography style for Al Rajhi Bank • Soft focus with depth of field Cutting edge technology and minimalist setup: correspondence and all communication • High contrast lighting • Simple is best - remove extra clutter and channels. • Desaturated cool and blue tones (no yellow items from the room lighting) • Natural setting on location or in a studio, and Photographic style & the use of library the background will be added later shots Angle • It is recommended to use background images The images used in Al Rajhi Bank marketing • Natural poses with vanishing point perspective materials should reflect the values we hold. • Most shots should be vertical and horizontal Color palette These images should tell people that Al • Avoid high angle shots and low angle shots Rajhi Bank: • Blues, whites and grays as primary colors Foreground • Supports active leaders and entrepreneurs • No fluorescent colors • Is a well trusted name • Focus on individual in foreground • Avoid dark backgrounds • Always strives to do better • 2 to 3 persons/exceptions could be made in • Deep green and green in smaller doses as Photos should evoke: Seriousness, minor cases secondary colors confidence and vision • 4/3 or more of face must be turned towards Wardrobe & model suggestions the camera, both eyes visible The style of photography should be toned • Lighting on face • Most of our subjects will be representing dow…

Photography style Background color variations Internal Communication and Business photography style Private photography style must reflects a cutting edge, modern reflect luxury and wealth, as and futuristic style. Overall Affluent photography style must well as modern sharp edge style. tonality of backgrounds is blue Real color with enhancements of greenery and sky color. The reflect luxury and wealth, warm, Overall tonality of the visuals is and silver, keeping the depth of image composition should be shot at eye level showing depth in earth tone colors treated in an blue, keeping the real colors of color of the original image . the background. Art Deco photographic style. the original image apparent. Business Retail Affluent Private Internal 33

Transparent box & headline Product template placement Print templates English layout Arabic layout Transparent boxes are consistent throughout all print layouts. The strip in the top left corner that should be aligned with the right side of the logo strip, is called the product strip. It indicates the product addressed in the visual or ad. This strip is only used when a Retail Al Rajhi Bank product is communicated. The transparent strip (product strip) extends 1.5x from the top of the layout. The transparent box behind the logo spreads 5x above the logo strip. English layout Headline is 1x away from the top edge of the layout and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype, and is 1x away from the top edge of the layout. proportionally for any other given .layout Note: All sizes are applied to A4 layouts, and measured 34

Brand communication templates 35

Print template Logo aspects & restrictions The ATL print layouts' font sizes and spaces are English template Arabic template consistent throughout all the different segments of the brand. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product is 20 pts (regular), centered in the transparent strip. As demonstrated in the previous section, the ARB logo extends to exactly 5/8 in any given layout. English layout Headline is 2x away from the top edge of the layout and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype. 5x • Primary box: • Color: White • Opacity: 80% • Text: • Color: ARB blue pantone 2738C • Headline size: 28 pts • Body copy size: 13 pts Note: All sizes are applied to A4 layouts, and measured proportionally for any other given layout. 36

Print template Examples • Primary box: Primary color • Color: White • Opacity: 80% • Text: • Color: ARB blue pantone 2738C • Headline size: 28 pts • Body copy size: 13 pts 37

DL template Logo aspects & restrictions DL spaces and font sizes for Retail apply to both English template Arabic template males and females. The only difference is the signature underneath the logo. The logo strip length is measured 7/8 from the width of the layout. The transparent box extends 4x above the top line of the logo strip; the top transparent strip is 3x. The font size of the product is 25 pts (bold), centered in the transparent strip. • Primary box: • Color: White • Opacity: 80% • Text: • Color: ARB blue pantone 2738C • Headline size: 17 pts • Body copy size: 11 pts 38

DL template Examples Here, examples are shown for the use of different English template Arabic template transparent box colors and how they are applied on previous visuals done for the Corporate division. The white transparent box is usually used on dark visuals, while the blue transparent box is used on visuals with a light environment. 39

Print template Both languages Here, examples are shown for the use of different languages. When we have a multi-language layout, all headlines should be right justified to the letter inمـ the logotype. 40

Print template Secondary color examples This is an example in the use of secondary colors in internal brand communications. These colors are only to be used in internal brand communications; whereas white MUST be used in external brand communications. 41

Retail template 42

Print template - Males ATL - Logo aspects & restrictions The print layouts font size and spaces are consistent English template Arabic template throughout all the different segments of the brand. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product is 20 pts (regular), centered in the transparent strip. As demonstrated in the previous section, the ARB logo extends to exactly 5/8 in any given layout. English layout Headline is 2.5x away from the top edge of the layout and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Sub-headline size: 20 pts bold • Headline size: 28 pts • Body copy size: 13 pts light Note: All sizes are applied to A4 layouts, and measured 43 proportionally for any other given layout.

Examples Print template • Primary box: English template Arabic template • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 28 pts • Sub-headline size: 20 pts bold • Body copy size: 13 pts light Note: All sizes are applied to A4 layouts, and measured 44 proportionally for any other given layout.

Examples with special elements Print template When special elements are added to the layout, such English template Arabic template as a QR code or a second party logo, they should be placed in the transparent box and aligned with the middle of the body copy, and should not exceed the مـ in the logotype. Note: All sizes are applied to A4 layouts, and measured 45 proportionally for any other given layout.

DL template - Males Logo aspects & restrictions DL spaces and font sizes for Retail apply to both English template Arabic template males and females. The only difference is the signature underneath the logo. The logo strip length is measured 7/8 from the width of the layout. The transparent box extends 4x above the top line of the logo strip; the top transparent strip is 3x. The font size of the product (e.g. HF,PF,CC & CF) is 25 pts (bold), centered in the transparent strip. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Product size: 25 pts bold • Headline size: 19 pts 46

Examples DL template - Males English template Arabic template • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Product size: 25 pts bold • Headline size: 19 pts 47

Print template - Females Logo aspects & restrictions The ATL print layouts' font sizes and spaces are English template Arabic template consistent throughout all the different segments of the brand. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product (e.g. HF,PF,CC & CF) is 20 pts (regular), centered in the transparent strip. As demonstrated in the previous section, the ARB logo extends to exactly 5/8 in any given layout. English layout Headline is 2.5x away from the top edge of the layout and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Sub-headline size: 20 pts bold • Headline size: 28 pts • Body copy size: 11 pts light Note: All sizes are applied to A4 layouts, and measured 48 proportionally for any other given layout.

Examples Print template - Females • Primary box: English template Arabic template • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 28 pts • Sub-headline size: 20 pts bold • Body copy size: 13 pts light Note: All sizes are applied to A4 layouts, and measured 49 proportionally for any other given layout.

DL template Logo aspects & restrictions DL spaces and font sizes for Retail apply to both English template Arabic template males and females. The only difference is the signature underneath the logo. The logo strip length is measured 7/8 from the width of the layout. The transparent box extends 4x above the top line of the logo strip; the top transparent strip is 3x. The font size of the product (e.g. HF,PF,CC & CF) is 25 pts (bold), centered in the transparent strip. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Product size: 25 pts bold • Headline size: 19 pts Note: All sizes are applied to A4 layouts, and measured proportionally for any other given layout. 50

DL template Examples Here, examples are shown for the use of the template English template Arabic template when applied on previous visuals done for the Ladies Retail division. 51

Business banking template 52

Print template Logo aspects & restrictions The ATL print layouts' font sizes and spaces are English template Arabic template consistent throughout all the different segments of the brand. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product is 20 pts (regular), centered in the transparent strip. As demonstrated in the previous section, the ARB logo extends to exactly 5/8 in any given layout. English layout Headline is 2x away from the top edge of the layout and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the let- ter inمـ the logotype. • Primary box: • Color: White • Opacity: 80% • Text: • Color: ARB blue pantone 2738C • Headline size: 28 pts • Body copy size: 11 pts Note: All sizes are applied to A4 layouts, and measured 53 proportionally for any other given layout.

Print template Examples • Primary box: English template Arabic template • Color: White • Opacity: 80% • Text: • Color: ARB blue pantone 2738C • Headline size: 28 pts • Body copy size: 11 pts 54

Affluent template 57

Print template Logo aspects & restrictions The ATL print layouts' font sizes and spaces are English template Arabic template consistent throughout all the different segments of the brand. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product is 20 pts (regular), centered in the transparent strip. As demonstrated in the previous section, the ARB logo extends to approximately 5/8 in any given layout. English layout Headline is 2x away from the top edge of the layout and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype. • Primary box: • Color: White • Opacity: 80% • Text: • Color: ARB blue pantone 2738C • Headline size: 28 pts • Body copy size: 11 pts Note: All sizes are applied to A4 layouts, and measured 58 proportionally for any other given layout.

DL template Examples 62

Private template 63

Print template Logo aspects & restrictions The ATL print layouts' font sizes and spaces are English template Arabic template consistent throughout all the different segments of the brand. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product is 20 pts (regular), centered in the transparent strip. As demonstrated in the previous section, the ARB logo extends to exactly 5/8 in any given layout. English layout Headline is 2x away from the top edge of the layout and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype. • Primary box: • Color: White • Opacity: 80% • Text: • Color: ARB blue pantone 2738C • Headline size: 28 pts • Body copy size: 11 pts Note: All sizes are applied to A4 layouts, and measured 64 proportionally for any other given layout.

Retail collateral templates 68

Print template - Landscape Logo aspects & restrictions The ATL print layouts' font sizes and spaces are Double page spread consistent throughout all the different segments of the brand. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product is 20 pts (regular), centered in the transparent strip. The ARB logo extends to exactly 7/16 in this layout. English layout Headline is 2.5x away from the top edge of the layout and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Sub-headline size: 20 pts bold • Headline size: 35 pts • Body copy size: 16 pts light Note: All sizes are applied to A4 layouts, and measured 69 proportionally for any other given layout.

Double page spread Print template - Landscape • Primary box: Double page spread • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 35 pts • Sub-headline size: 20 pts bold • Body copy size: 16 pts light Note: All sizes are applied to A4 layouts, and measured 70 proportionally for any other given layout.

Logo aspects & restrictions Print template - Landscape The ATL print layouts' font sizes and spaces are Half page consistent throughout all the different segments of the brand. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product (e.g. HF,PF,CC & CF) is 20 pts (regular), centered in the transparent strip. The ARB logo extends to approximately 4/8 in any given layout. English layout Headline is 2.5x away from the top edge of the layout and 2x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the let- ter inمـ the logotype. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Sub-headline size: 18 pts bold • Headline size: 30 pts • Body copy size: 14 pts light Note: All sizes are applied to A4 layouts, and measured 71 proportionally for any other given layout.

Examples Print template - Landscape • Primary box: Half page • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 30 pts • Sub-headline size: 18 pts bold • Body copy size: 13 pts light Note: All sizes are applied to A4 layouts, and measured 72 proportionally for any other given layout.

Outdoor template Megacom In outdoor advertising templates, the maximum impact should come from the copy. The template aspects are different from the print template in landscape layouts. The width of the logo extends to 4/8 from the width of the layout, and the transparent box extends 6x above the top line of the logo strip. The transparent product strip is 1.5x in height and the text is 45 pts. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 65 pts bold 73

Outdoor template Megacom • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 65 pts bold 74

Outdoor template Unipole In outdoor advertising templates, the maximum impact should come from the copy. The template aspects are different from the print template in landscape layouts. The width of the logo extends to 4/8 from the width of the layout, and the transparent box ends 0.5x away from the top and bottom edge of the layout. The transparent product strip is 1.5x in height and the text is 48 pts. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 65 pts bold 75

Outdoor template Skypole In outdoor advertising templates, the maximum impact should come from the copy. The template aspects are different from the print template in landscape layouts. The width of the logo extends to 7/8 from the width of the layout, and the transparent box extends 4x above the top line of the logo strip. The transparent product strip is 1.5x in height and the text is 170 pts. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 255 pts bold 76

Outdoor template Mupi In outdoor advertising templates, the maximum impact should come from the copy. The template aspects are different from the print template in landscape layouts. The width of the logo extends to 7/8 from the width of the layout, and the transparent box extends 3x to 4x above the top line of the logo strip. The transparent product strip is 1.5x in height and the text is 100 pts. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 200 pts bold 77

Strip ad template 78

Logo aspects & restrictions Strip ad template The strip template is part of landscape templates. Short strip template The transparent box is 0.5x away from the top and bottom of the layout. In the strips, the logo extends to 40% of the original width of the layout size, giving enough space for the visual. The product strip is 1.5x and the text font is 10 pts. • Primary box: • Text: • Color: ARB orange pantone 159C • Color: White • Opacity: 85% • Headline size: 13 pts • Body copy size: 13 pts Long strip template • Primary box: • Text: • Color: ARB orange pantone 159C • Color: White • Opacity: 85% • Headline size: 18 pts • Body copy size: 15 pts 79

Logo aspects & restrictions Strip ad template The strip template is part of landscape templates. 10x8 clm strip The transparent box is 0.5x away from the top and bottom of the layout. In the strips, the logo extends to 40% of the original width of the layout size, giving enough space for the visual. The product strip is 1.5x and the text font is 20 pts. • Primary box: • Text: • Color: ARB orange pantone 159C • Color: White • Opacity: 85% • Headline size: 23 pts • Body copy size: 16 pts 80

Examples Strip ad template Short strip template • Primary box: • Text: • Color: ARB orange pantone 159C • Color: White • Opacity: 85% • Headline size: 13 pts • Body copy size: 13 pts Long strip template • Primary box: • Text: • Color: ARB orange pantone 159C • Color: White • Opacity: 85% • Headline size: 18 pts • Body copy size: 15 pts 81

Examples with special elements Strip ad template Short strip template • Primary box: • Text: • Color: ARB orange pantone 159C • Color: White • Opacity: 85% • Headline size: 13 pts • Body copy size: 13 pts Long strip template • Primary box: • Text: • Color: ARB orange pantone 159C • Color: White • Opacity: 85% • Headline size: 18 pts • Body copy size: 15 pts 83

Examples Strip ad template - Exceptions During special occasions, there could be changes Short strip template made to the layout and template rules. As shown in the example, the placement of the text changed and the box color also changed. Long strip template 84

Online banners 85

Web banners Logo aspects & restrictions English template • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 25 pts Arabic template Note: All sizes are applied to A4 layouts, and measured 86 proportionally for any other given layout.

Web banners Buttons 120x90 88x31 • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 6 px • Message size: 9 px • Number size: 7 px 94x15 120x60 120x30 88

Web banners 550x450 rectangle After creating the logo strip, the headline and body 550x450 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 18 px • Message size: 24 px 89

Web banners 300x250 rectangle After creating the logo strip, the headline and body 300x250 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 10 px • Message size: 14 px 90

Web banners 336x280 rectangle After creating the logo strip, the headline and body 336x280 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 10 px • Message size: 18 px 91

Web banners 180x150 rectangle After creating the logo strip, the headline and body 180x150 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 8 px • Message size: 10 px 92

Web banners 500x350 pop-up After creating the logo strip, the headline and body 500x350 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 18 px • Message size: 24 px 93

Web banners 550x480 pop-up After creating the logo strip, the headline and body 550x480 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 18 px • Message size: 24 px 94

Web banners 250x250 square pop-up After creating the logo strip, the headline and body 550x480 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 8 px • Message size: 24 px 95

Web banners 125x125 square pop-up After creating the logo strip, the headline and body 125x125 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 5 px • Message size: 5 px 96

Web banners 728x315 pop-under After creating the logo strip, the headline and body 728x315 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 19 px • Message size: 24 px 97

Web banners 940x450 pop-under After creating the logo strip, the headline and body 940x450 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 19 px • Message size: 28 px 98

Web banners 720x300 pop-under After creating the logo strip, the headline and body 720x300 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 19 px • Message size: 24 px 99

Web banners 728x90 leaderboard After creating the logo strip, the headline and body 728x90 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 9 px • Message size: 14 px 100

Web banners 720x120 leaderboard After creating the logo strip, the headline and body 720x120 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 11 px • Message size: 14 px 101

Web banners 234x60 half banner After creating the logo strip, the headline and body 234x60 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 6 px • Message size: 9 px 102

Web banners 230x33 small banner After creating the logo strip, the headline and body 234x60 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: #1B4298 • Product size: 9 px 103

Web banners 300x100 - 3:1 rectangle After creating the logo strip, the headline and body 300x100 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 9 px • Message size: 12 px 104

Web banners 120x240 vertical rectangle After creating the logo strip, the headline and body 120x240 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 6 px • Message size: 7 px 105

Web banners 240x400 vertical rectangle After creating the logo strip, the headline and body 240x400 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 10 px • Message size: 12 px 106

Web banners 160x600 wide skyscraper After creating the logo strip, the headline and body 160x600 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 14 px • Message size: 18 px 107

Web banners 120x600 wide skyscraper After creating the logo strip, the headline and body 120x600 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 14 px • Message size: 18 px 108

Web banners 300x600 half page ad After creating the logo strip, the headline and body 300x600 copy will always be aligned to the letter inمـ the logotype. The 800 number aligns with the letter B in the English logotype. • Primary box: • Color: RGB 205 90 19 or #cd5a13 • Opacity: 85% • Text: • Color: White • Product size: 10 px • Message size: 16 px 109

Mobile & tablet app templates 110

Mobiles & tablets Global visual language for mobile apps This style guide outlines the principles and standards for the creation of mobile apps for Al Rajhi Bank. The document is intended to be used by designers, developers and mobile app producers. It aims to establish a consistent quality of treatment for fundamental elements across all mobile and tablet apps. Main areas: 1. Rules for logo positioning and usage 2. Information on the structure and the limitations of graphical elements 3. Specifications of screen elements Please note that we have provided examples for iOS platforms as a reference. The guidelines could be applied on any other platform, following the development rules and guidelines set by mobile producers such as Android, Blackberry or Windows. 111

Mobiles & tablets Devices & displays Even on the same mobile platform, screen sizes and resolutions can vary based on device type. For instance, the screen size and resolution on the Samsung Galaxy S2 is different than that of the Samsung Galaxy S; the same goes for Blackberry mobile devices. Consequently, for an application to have a consistent look and feel across a variety of devices, user interface elements and graphics need to gracefully scale from large tablets to smaller phones. The Al Rajhi design strategy that targets a diverse range of devices and screen sizes focuses on the following: • Layouts are flexible to accommodate various heights and widths • Layouts should be optimized on larger devices to take advantage of extra screen space • Applications should provide the right content, on the right device and at the right time 112

Mobiles & tablets Typeface The Arabic typeface used in Al Rajhi marketing English typeface materials is GE SS. Clean, modern and precise The English typeface used in Al Rajhi Bank marketing materials is AlRajhi font. AlRajhi 12345678910 For headlines & body copy Arabic typeface واضح وعصري ومتقن GE SS 12345678910 For headlines & body copy Type replacement for specific devices and platforms Generally, mobile devices use their own system fonts, and thus there may be little control over the typeface when designing apps. The Al Rajhi Bank main fonts come first on any communication material, be it Arabic or English. A graceful degradation will result in finding other alternatives for some platforms and devices. That is where “Verdana” font comes to replace AlRajhi font in English layouts and “Tahoma” for Arabic layouts. As a third alternative, system fonts come as a solution for typography wherever the 2 first options are not applicable (Helvetica on iOS, Droid or Roboto for Android phones). Font sizes are relative, which means that point sizes are not used, but fonts are defined as x-small, small, medium or large. 113

Mobiles & tablets Colors Primary colors The Al Rajhi color palette is used on all communication material. Color palette Blue is the standard accent color in Android's color palette. Each color has a corresponding darker shade that can be used to complement when needed. 114

Mobiles & tablets Iconography The Al Rajhi application icon is one that users have Launcher icon on their home screens and tap to run the application. Here, Al Rajhi branding and strong visual design come together to form a compact, instantly recognizable and attractive package. For any other mobile platform, please refer to the UI guidelines set by mobile developers regarding the size of the icon and keep the same rules for the position of the Al Rajhi logo icon. 115

Mobiles & tablets Iconography Al Rajhi applications should offer a small icon that Contextual icon devices can display when the application name matches a term in the search field. Icons should have a strict orange gradient as background. Applications that supply settings should also present this icon to identify them in the built-in settings of the application. Exceptions may allow for the use of the orange color for icon shapes on white backgrounds. Exceptions may allow for the use of the white color for icon shapes on dark backgrounds. 116

Mobiles & tablets Metrics & grids Designing for multiple devices involves much more After creating the logo strip for every device, than simply resizing content to display on different the size of all the other aspects follow; taking screens. It must be clearly viewable and usable into consideration the inner box of the across every screen. logo element as the standard size of all the divisions in the layout. For Al Rajhi designs, we have to control how For presentation purposes, it will be called x. this content gets resized, even to the extreme of accounting for both portrait and landscape orientations. To do this, we should base all the layouts to follow the x height rhythm. Why x height rhythm? To keep a certain unified rule, the x rhythm derived from the logo should be the basic size to follow the same layout on the different screen sizes. This is comfortably in the range where users will be able to reliably and accurately target them with their fingers. When we design the elements to be within the x height rhythm, we can guarantee that the UI elements will never be smaller than the minimum recommended target size regardless of what screen they are displayed on. 117

Mobiles & tablets Metrics & grids - Buttons The size and placement of the bordered action buttons vary with the multiple screen resolutions and displays. It is essential to follow the margins for the placement of text inside buttons. All buttons should have the same height. The width will then be optimized according to the text medium. 118

Mobiles & tablets Metrics & grids - Basic buttons Basic buttons are traditional buttons with borders Button states and backgrounds. Android supports two styles for basic buttons: default and small. Default buttons have a slightly larger font size and are optimized for display outside of form content. Small buttons are Remains static intended for display alongside other content. They have a smaller font and smaller minimum height. Use small buttons in forms where they need to align with other UI elements. Illuminates with orange color and 80% white color for the text medium Draws 50% of the pressed value with a filled orange border Draws a gray background with 80% white color for the text medium 119

Mobiles & tablets Metrics & grids - Mobile grid The Al Rajhi logo strip should occupy 10% of the main screen’s height. For instance, 96 px is the height of the logo strip for a 960 px iPhone screen. Based on this rule, the x value is divided by 4. The derived value should define the margin of the screen elements (the green box). 120

Mobiles & tablets Metrics & grids - Mobile grid examples 2 column page 1 column page 121

Mobiles & tablets Metrics & grids - Tablet grid The grid theory is based on the x width of the Al Rajhi logo, which results in a 760 px grid splitting into 24 columns as follows: Column width = 16 px Gutter width = 16 px 16 px = 0.5x 122

Mobiles & tablets Metrics & grids - Tablet grid Logo strip/header The grid theory is based on the x width of the Al Rajhi logo, which results in a 760 px grid splitting Navigation bar into 24 columns as follows: Column width = 16 px Gutter width = 16 px 16 px = 0.5x Main banner Main content Footer/tips 123

Mobiles & tablets Navigation - Mobile launcher page The Al Rajhi launch image is the first screen the application displays. This image is instantly displayed when the user starts the application and remains until the app is ready for use. As soon as the application has loaded, the app displays its first screen, replacing the launch placeholder image. iPhone 640×960 px In an 8 column grid, the logo remains aligned vertically and horizontally in the middle of the screen. When rotated, the logo should keep the same dimensions and alignment. 124

Mobiles & tablets Navigation - Tablet launcher page The Al Rajhi launch image is the first screen the application displays. This image is instantly displayed when the user starts the application and remains until the app is ready for use. As soon as the application has loaded, the app displays its first screen, replacing the launch placeholder image. iPad 768x1024 px In an 8 column grid, the logo remains aligned vertically and horizontally in the middle of the screen. When rotated, the logo should keep the same dimensions and alignment. 125

Mobiles & tablets Navigation - Lists A table view presents data in a single-column list of multiple rows. & List navigation 126

Mobiles & tablets Navigation - Selection The selection is a temporary action bar that overlays the app's current action bar while data is selected. It appears after the user’s prolonged press on a selectable data item. 127

Mobiles & tablets Tabs Tabs are elemental for making it easy to explore t and switch between different views or functional aspects of any app made for Al Rajhi, or for browsing categorized page sets. Note: If view navigation is essential to the app, you can break out tabs into a separate action bar. This permits fast view switching even on narrower screens. 128

Mobiles & tablets Text fields Text fields allow the user to type text into the app. Text field The Al Rajhi app displays mostly single line text Text fields draw a white box with a thin gray border and a slight top fields. Touching a text field places the cursor and shadow to give the fields more depth and contrast. automatically displays the keyboard. Search field Search fields maintain the same look as the text fields with the addition of the search icon that is defined in all Al Rajhi digital communications. 129

Mobiles & tablets Progress & activity Progress If you know the percentage of the operation that has been completed, use a determinate progress bar to give the user a sense of how much longer it will take. Activity circle An activity circle is used in all Al Rajhi applications for when a message is being loaded and it is not possible to determine how long it will take to be displayed. 130

Mobiles & tablets References Mobile best practices W3C, Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp/ Mobile patterns http://mobile-patterns.com iOS Human Interface Guidelines (iPhone, iPod and iPad) http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/ Introduction.html Android User Interface Guidelines http://developer.android.com/guide/practices/ui_guidelines/index.html UI Guidelines for BlackBerry 6.0 Smartphones http://docs.blackberry.com/en/developers/deliverables/17965/index.jsp?name=UI+Guidelines+-+BlackBerry+ Smartphones6.0&language=English&userType=21&category=Java+Development+Guidelines&subCategory= UI Guidelines for Windows Mobile http://msdn.microsoft.com/en-us/library/bb158602.aspx Effective design for Multiple Screen Sizes http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes 131

132

Logo shape, color & specs Logo The Al Rajhi Tahweel logo consists of the Arabic and Logo strip English logotypes. One never appears without the other and neither 1/2X are ever modified in any way. X X X X Logo color Pantone ٣٠٠c 133

Logo Use of logo Use of primary identity The primary identity stands on the orange transparent box. 134

Logo Logo don’ts The Al Rajhi Bank logo is not to be altered or distorted in any way. This is neccessary Special offer to build a consistent brand experience and continually deliver built equity in our brand. 135

Strip size & dimensions Logo In any given ATL portrait layout, the strip length is measured 5/8 from the width of the layout, as shown in the diagram. In any given ATL landscape layout, the length of x the logo strip is measured based on the layout specification mentioned in the Guidelines. x x The Al Rajhi bank logo and the website are always consistent in the layouts. The letter w from the x 1/8 1/8 1/8 1/8 1/8 1/8 1/8 1/8 website is aligned with the T from the english logotype. For the Al Rajhi Bank logo, it is placed x above the website and is the same measurements as the website 1⁄2x ~ x ~ x www.tahweelalrajhi.com.sa x 1⁄2~ x The size of all the other aspects will be based on the created logo strip, taking the space between the white line in the logotype the edge of the box as the standard size of all the divisions in the layout. For presentation purposes that inner box will be called (x). 136

Corporate colors Primary colors The primary colors are Al Rajhi Tahweel blue 300C Primary colors and Al Rajhi Tahweel orange 159C. These colors are used for the logo strip and the orange transparent box. 137

Typeface Fonts & font sizes English typeface Typfaces Clean, modern and precise The Arabic typeface used in Al Rajhi Tahweel marketing materials is GE SS. AlRajhi 12345678910 The English typeface used in Al Rajhi Tahweel marketing materials is AlRajhi font. For headlines & body copy When writing the headlines, sensible bolding of keywords is nesscary to attract focus to them. Arabic typeface واضح وعصري ومتقن GE SS 12345678910 For headlines & body copy Size examples Font specs On A4 layouts the font specs are: • Headline: 28 pts size, 29 pts leading • Sub-headline: 14 or 16 pts ٢٠pts regular • Body copy: 13 or 12 pts ٢٨pts size, ٢٩pts leading Sizes apply to both Arabic and English fonts. ٢٠pts ١٨or ١٢pts ١٣or Body copy Note: All sizes are applied to A ,٤layouts and measured 138 proportionally for any other given layout.

Communication templates 139

Transparent box & headline Template placement Print templates English layout Arabic layout Transparent boxes are consistent throughout all print layouts. The strip in the top left corner that should be aligned with the right side of the logo strip, is called the product strip. It indicates the product addressed in the visual or ad. The transparent strip (product strip) extends 1.5x from the top of the layout. The transparent box behind the logo spreads 6x above the logo strip. English layout Headline is 1x away from the bottom edge of the product strip and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype, and headline is 1x away from the bottom edge of the product strip of the layout. Partner Bank logo Partner Bank logo Note: All sizes are applied to A ,٤layouts and measured proportionally for any other given layout. 140

Product templates 141

Product template Logo aspects & restrictions The ATL print layouts' font sizes and spaces are English template Arabic template consistent throughout all the different segments of the brand. The transparent box extends 6x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product is 22 pts (regular), centered in the transparent strip. As demonstrated in the previous section, the Al Rajhi Tahweel logo extends to exactly 5/8 in any given layout. English layout Headline is 1x away from the bottom edge of the product strip and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype. • Primary box: • Color: Al Rajhi Tahweel orange pantone 159C • Opacity: 85% • Text: • Color: White • Sub-headline size: 20 pts bold • Headline size: 28 pts • Body copy size: 13 pts light 142

Examples Product template • Primary box: English template Arabic template • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 28 pts • Sub-headline size: 20 pts bold • Body copy size: 13 pts light 143

Examples Product template When special elements are added to the layout, such English template Arabic template as a tag, it should be placed 1x above the orange transparent box. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 28 pts • Sub-headline size: 20 pts bold • Body copy size: 13 pts light 144

Logo aspects & restrictions Product DL template The logo strip length is measured 7/8 from the width English template Arabic template of the layout. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 3x. The font size of the country name is 25 pts (bold), centered in the transparent strip. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Product size: 25 pts bold • Headline size: 19 pts 145

Examples Product DL template English template Other languages template • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Product size: 25 pts bold • Headline size: 19 pts • Body copy: 9 pts 146

Corespondent bank templates 148

Corespondent bank Logo aspects & restrictions templates The ATL print layouts' font sizes and spaces are English template Arabic template consistent throughout all the different segments of the brand. The transparent box extends 6x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product is 22 pts (regular), centered in the transparent strip. As demonstrated in the previous section, the Al Rajhi Tahweel logo extends to exactly 5/8 in any given layout. English layout Headline is ١x away from the bottom edge of the product strip and ١x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype. • Primary box: • Color: Al Rajhi Tahweel orange pantone 159C • Opacity: 85% • Text: • Color: White • Sub-headline size: 20 pts bold • Headline size: 28 pts • Body copy size: 13 pts light 149

Corespondent bank Examples templates • Primary box: English template Other languages template • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 28 pts • Sub-headline size: 20 pts bold • Body copy size: 13 pts light 150

Corespondent bank DL Logo aspects & restrictions templates The logo strip length is measured 7/8 from the width English template Arabic template of the layout. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 3x. The font size of the country name is 25 pts (bold), centered in the transparent strip. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Product size: 25 pts bold • Headline size: 19 pts 151

Corespondent bank DL Examples templates English template Other languages template • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Product size: 25 pts bold • Headline size: 19 pts • Body copy: 9 pts 152

Country templates 153

Country templates Logo aspects & restrictions The ATL print layouts' font sizes and spaces are English template Arabic template consistent throughout all the different segments of the brand. The transparent box extends 6x above the top line of the logo strip; the top transparent strip is 1.5x. The font size of the product is 22 pts (regular), centered in the transparent strip. As demonstrated in the previous section, the Al Rajhi Tahweel logo extends to exactly 5/8 in any given layout. English layout Headline is 1x away from the bottom edge of the product strip and 1x away from the left edge of the layout. Arabic layout Headline and body copy are always aligned to the letter inمـ the logotype. • Primary box: • Color: Al Rajhi Tahweel orange pantone 159C • Opacity: 85% • Text: • Color: White • Sub-headline size: 20 pts bold • Headline size: 28 pts • Body copy size: 13 pts light 154

Examples Country templates • Primary box: English template Other languages template • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Headline size: 28 pts • Sub-headline size: 20 pts bold • Body copy size: 13 pts light 155

Logo aspects & restrictions Country DL templates The logo strip length is measured 7/8 from the width English template Other languages template of the layout. The transparent box extends 5x above the top line of the logo strip; the top transparent strip is 3x. The font size of the country name is 25 pts (bold), centered in the transparent strip. • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Product size: 25 pts bold • Headline size: 19 pts 156

Examples Country DL templates English template Other languages template • Primary box: • Color: ARB orange pantone 159C • Opacity: 85% • Text: • Color: White • Product size: 25 pts bold • Headline size: 19 pts • Body copy: 9 pts 157

Branding 158

Branding Logo aspects & restrictions The logo strip length is measured 7/8 from the width of the layout. The transparent box extends 5x above the top line of the logo strip. 159