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

Primary colors should compose ~90% of all visual compositions.

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

HEX: #31354f
RGB: 49,53,79
CMYK: 38,33,0,69
PANTONE: 553 C

HEX: #F4F4F4
RGB: 244, 244, 244
CMYK: 0, 0, 0, 4
PANTONE:
7541 C

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

Accent Colors

Accent colors (top row) should be used sparingly. Vibrant accent colors (bottom row) should only be used in very small quantities for embellishment (see graphic samples below).

Accent

Dark Red
#871826

Accent

Red
#ce2931

Accent

Light Blue
#a6cef4

Accent

Med Blue
#4e8dd8

Accent

Dark Blue
#0047ac

Accent

Vibrant Blue
#0067fc

Accent

Vibrant Purple
#463df4

Accent

Vibrant Teal
#00c6c1

Accent

Vibrant Coral
#f26c64

Accent

Vibrant Yellow
#f2c364

Neutrals Colors

Black Neutral
#00000

Dark Gray Neutral
#414042

Med Gray
#E2E3E4

Light Gray
#F4F4F4

White
#FFFFFF

Gradients

Accent Red (#ce2931)
Accent Dark Red (#871826)
(more contrast)

Accent Red (#ce2931)
Primary Red (#b41f24)
(subtle)

Light Gray (#f4f4f4)
Medium Gray (#e2e3e4)

White (#ffffff)
Light Gray (#f4f4f4)

Accent Dar Blue (#0047ac)
Navy (#31354f)

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.