Full H Rpg Logo 300w

Framework

Global Brand Style Guide

01. Logo

The logo was crafted to embody dynamic movement, unity, and purpose. The incorporation of these elements suggests a design that not only catches the eye but also communicates a sense of strength and endurance. A timeless quality indicates that it’s built to withstand changing trends and remain relevant for years to come. Overall, the logo portrays a clear vision and powerful message.

Full Color

Red

Black

White

Horizontal logo

Full H Rpg Logo
Red H Rpg Logo
Black H Rpg Logo
White H Rpg Logo

Vertical logo

Full V Rpg Logo 2
Red V Rpg Logo
Black V Rpg Logo
White V Rpg Logo

Logo Mark

Full M Rpg Logo
Black M Rpg Logo
White M Rpg Logo

Clean Logo

Clear Space

Defined Clear Space

Horizontal logo

H Full
H Full Clear Space
H Full Clear Space X Height

Vertical  logo

V Full
V Full Clear Space
V Full Clear Space X Height

Logo Mark

M Full 2
M Full Clear Space
M Full Clear Space X Height
Space & Size Requirements
Minimim

02. Color palette

This quick-reference chart shows which colors provide enough contrast to be used as text against a light background, and which colors don’t have enough contrast to be readable as text but could be used as a background.

primary colors

HEX: #B41F24
RGB: 180,31,36
CMYK: 0,83,80,29
PANTONE: 1805 C

100%

70%

40%

10%

HEX: #0047ac
RGB: 0,71,172
CMYK: 100,59,0,33
PANTONE: 2728 C

100%

70%

40%

10%

HEX: #292c51
RGB: 41,44,81
CMYK: 49,46,0,68
PANTONE: 5265 C

100%

70%

40%

10%

HEX: #8C92AB
RGB: 190,190,190
CMYK: 0,0,0,25
PANTONE: 420 C

100%

70%

40%

10%

HEX: #000000
RGB: 0,0,0
CMYK: 100,80,45,95
PANTONE: Black 6

100%

70%

40%

10%

HEX: #ffffff
RGB: 255,255,255
CMYK: 0,0,0,0

secondary colors

HEX: #0047ac
RGB: 0,71,172
CMYK: 100,59,0,33
PANTONE: 2728 C

100%

70%

40%

10%

HEX: #FFCB05
RGB: 255, 203, 5
CMYK: 0, 18, 100, 0
PANTONE: 7406 c

100%

70%

40%

10%

HEX: #D86018
RGB: 216,96,24
CMYK: 0,71,100,3
PANTONE: 1595 C

100%

70%

40%

10%

HEX: #2B8276
RGB: 43, 130,118
CMYK: 81,30,57,9
PANTONE: 7475 C

100%

70%

40%

10%

HEX: #00B2A9
RGB: 0, 178, 169
CMYK: 81,0,39,0
PANTONE: 326 C

100%

70%

40%

10%

HEX: #2F65A7
RGB: 47,101,167
CMYK: 88,50,0,0
PANTONE: 660 C

100%

70%

40%

10%

HEX: #702082
RGB: 112,32,130
CMYK: 70,77,7,23
PANTONE: 2603 C

100%

70%

40%

10%

HEX: #655A52
RGB: 101,90,82
CMYK: 26,36,38,68
PANTONE: Warm Gray 11

100%

70%

40%

10%

HEX: #bebebe
RGB: 190,190,190
CMYK: 0,0,0,25
PANTONE: 420 C

100%

70%

40%

10%

HEX: #E5E5E5
RGB: 229,229,229
CMYK: 0,0,0,10
PANTONE: 663 C

100%

70%

40%

10%

gradient colors

#E5E5E5

#FFFFFF

#BEBEBE

#3E9FCC

#0047AC

03. Text styles

Typography is a powerful tool. When used effectively, the right font commands attention, elicits emotions and above all, creates a voice. It’s why typography is such an essential component of our brand’s visual identity.

Headers

Raleway Font

(Web)

Prometo Font

(Print)

Heading 1

Heading 1

Heading 1

Heading 2

Heading 2

Heading 2

Heading 3

Heading 3

Heading 3

Heading 4

Heading 4

Heading 4

Heading 5

Heading 5
Heading 5

Heading 6

Heading 6
Heading 6

Body Content

“Roboto” Body Copy – 16px

with Raleway Header Font

 

(Web)

“Roboto” Body Copy – 16px

with Prometo Header Font

 

(Print)

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit tellus, rhoncus vel nibh a, feugiat mattis ante. Sed a risus ornare, euismod urna at, blandit ligula. Morbi ornare tortor vel elementum pretium.

Maecenas ut placerat purus. Pellentesque id nunc metus. Nullam hendrerit tortor quis tellus commodo, vitae tempus eros vulputate. Mauris euismod lectus sit amet nibh tristique vehicula. Maecenas lorem ligula, vestibulum quis lacus quis, congue pulvinar felis. Suspendisse in tincidunt enim, et ornare nisi. Nulla facilisi.

Ut pulvinar eros non lacus molestie, quis efficitur massa dignissim. Mauris cursus metus condimentum augue aliquet ultrices. Morbi sed sem nunc. Donec quis orci non tellus vehicula interdum a ut elit. In aliquet nulla nec auctor venenatis. Vivamus sit amet augue a sapien lacinia volutpat. Aliquam non mi ipsum. Nunc nec euismod leo. Integer consectetur pellentesque posuere. Ut ut venenatis turpis. Praesent ullamcorper non mauris dapibus fermentum. Sed eget tortor commodo, commodo velit vitae, eleifend quam. Ut ac euismod est. Aenean eros mi, sollicitudin nec elementum sodales, dignissim et arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non varius diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit tellus, rhoncus vel nibh a, feugiat mattis ante. Sed a risus ornare, euismod urna at, blandit ligula. Morbi ornare tortor vel elementum pretium.

Maecenas ut placerat purus. Pellentesque id nunc metus. Nullam hendrerit tortor quis tellus commodo, vitae tempus eros vulputate. Mauris euismod lectus sit amet nibh tristique vehicula. Maecenas lorem ligula, vestibulum quis lacus quis, congue pulvinar felis. Suspendisse in tincidunt enim, et ornare nisi. Nulla facilisi.

Ut pulvinar eros non lacus molestie, quis efficitur massa dignissim. Mauris cursus metus condimentum augue aliquet ultrices. Morbi sed sem nunc. Donec quis orci non tellus vehicula interdum a ut elit. In aliquet nulla nec auctor venenatis. Vivamus sit amet augue a sapien lacinia volutpat. Aliquam non mi ipsum. Nunc nec euismod leo. Integer consectetur pellentesque posuere. Ut ut venenatis turpis. Praesent ullamcorper non mauris dapibus fermentum. Sed eget tortor commodo, commodo velit vitae, eleifend quam. Ut ac euismod est. Aenean eros mi, sollicitudin nec elementum sodales, dignissim et arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non varius diam.

List

Bullit List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit tellus, rhoncus vel nibh a, feugiat mattis ante. Sed a risus ornare, euismod urna at, blandit ligula. Morbi ornare tortor vel elementum pretium.

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

Ordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit tellus, rhoncus vel nibh a, feugiat mattis ante. Sed a risus ornare, euismod urna at, blandit ligula. Morbi ornare tortor vel elementum pretium.

  1. Lorum Ipsum
  2. Lorum Ipsum
  3. Lorum Ipsum

04. Logo Usage

When placing the logo on top of a photograph, make sure that the logo is clearly visible and does not get overpowered by the background image. In some cases, using a different color variation of the logo or choosing a different photo may be necessary.

Image 1
Imageuseage2
Imageuseage3

05. Incorrect Logo Usage

In order to maintain consistency throughout our identity, it is essential that the brandmark is never altered in any way. Altering, distorting or illustrating the brandmark in any way weakens the power of our brand and what it represents.

Incorrect 1
Incorrect 8
Incorrect 9
Incorrect 7
Incorrect 6
Incorrect 5
Incorrect 4
Incorrect 3
Incorrect 2

04. Content Image

Our brand’s thumbnail images adhere to a vivid and consistent style, employing striking visuals and concise text to captivate viewers at a glance. We prioritize simplicity, ensuring each image effectively communicates the essence of the content while maintaining a visually appealing and uncluttered design.

Background Color with RPG Logo mark overlay (16×9)

Background

Illustrative Feature Image (16×9)

Blog Posts

Co-Branded Feature Image (16×9)

Co Brand

Image Based Grid System
Feature Image (16×9)

Image Grid Layout
Image Grid

Video, Podcast Grid System
Feature Image (16×9)

Spotlight Grid Layout
Lectures Podcast Video

Background Images