Scribd
Upload
2K views

Red Bull Style Guide

The Red Bull style guide document provides branding guidelines for logo variations, grid layout, header, footer, button, form, photo and typography styles. It specifies dimensions, colors, spacing and technical specifications for visual design elements to ensure consistent branding across Red Bull digital properties. Key aspects include logos for the main brand and Red Bull TV, a modular grid system, headers with navigation menus and columns, forms styled with gradients, and photos representing Red Bull values. Color palettes specify shades of red, blue, yellow and gray for headlines, logos, borders, links and other elements.

Uploaded by

Czesława Konieczna
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Red Bull Style Guide

The Red Bull style guide document provides branding guidelines for logo variations, grid layout, header, footer, button, form, photo and typography styles. It specifies dimensions, colors, spacing and technical specifications for visual design elements to ensure consistent branding across Red Bull digital properties. Key aspects include logos for the main brand and Red Bull TV, a modular grid system, headers with navigation menus and columns, forms styled with gradients, and photos representing Red Bull values. Color palettes specify shades of red, blue, yellow and gray for headlines, logos, borders, links and other elements.

Uploaded by

Czesława Konieczna
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Red Bull

Style Guide

Table of Contents
1. Strategic Brand Overview
2. Logo Variations
3.Grid & Layout
4. Header Styles- Top Bar
5. Header Styles- Main
Navigation
6. Header Styles- Columns
7. Footer Styles
8. Button Styles
9.Form Styles
10. Photo Styles
11. Typography Styles
12. Colors

Strategic Brand Overview

At the heart of Red Bull is our essence which is encapsulated in the phrase
Spread our wings over the world.
More than just a global brand, Red Bull has spawned a whole new market of the F&B industries:
the energy drink.
Red Bulls identity embodies an adventurous spirit and passion for excitiment.
This is represnted in our slogan:

Red Bull gives you wiiings.

Logo - Variations
Red Bull Branding Logo

Red Bull TV Logo

Website Dimensions
Padding Left: 0
Location: Main Bar

Website Dimensions
Top Margin: 90px
Location: Module 3-Up

50 px

50px
76 px

76px

The website logo is a link to the Red


Bull homepage.

Original Logo Size

RedBull.COM Logo
Website Dimensions
Top Margin: 159px
Location: Footer Main Navigation
Float Left

100px

32px
228px

153px

The Red Bull Branding Logo is used in the upper left-hand corner of the website.
It is also used as the websites favicon (16px x 16px)

Grid & Layout


Modular Grid/ Header: 1159px x 440px
Padding: 48%

Modular Grid/Blocks: 476px x 739px


Padding: 26px

Four Column Grid/ Channel Teaser:


1159px x 1541 px
Padding: 26px

Three Column Grid/ Red Bull TV:


368.625px x 1371px
Padding: 26px
Modular Grid/ Footer: 1159px x
196.547px
Padding: 18.2
Margin: 26.286

The Red Bull Website utilizes a complex grid system.

Header Styles
#1

#2

#3

Top Bar

#4

#5

#6

37px
1172px

Button #1 : REDBULL.US

Button #4 : EVENTS

Top Bar Color

Size: 61.9891px x 36px


Web Red
Color: #CC1C4A
RGB: 204,28,74
CMYK: 0,100,31,0

Button #5 : PRODUCTS & COMPANY

Button #2 : RED BULL TV

Size: 28.609px x 36px

Size: 62.797px x 36px

Button #3 : ATHLETES
Size: 50.250px x 36px

Size: 39.531px x 36px

Size: 119.297px x 36px

Top Bar Blue


Background: #0b162f;
CMYK: 100, 74, 44, 59
RGB: 11, 22, 47

Top Bar Color

Border Bottom
Background: #0b162f;
CMYK: 100, 74, 44, 59
RGB: 11, 22, 47

Button #6 : SHOP

Font: Red Bull Siri Core Bold


Font Size: 11px
Line Height: 36px
Border: 1px
Padding: 17.875px x 17.875px

Hover States: Button #1, #5, #6

Position: relative;
Display: block;
Margin: 0;
Height: 41px;
Line-height: 41px;
Border-bottom: 1px solid #2c4b9a;
Width: 100%;

Hover States: Button #2, #3, #4

Hover State Color:


Hover White
Color: #FFFFFF
RGB: 0,0,0
CMYK: 0,0,0,0

Button Hover State


position: absolute;
top: 0px;
left: 0px;
width: 400px;
font-size: 10px;
background-color: white;
color: rgb(102, 102, 102);
font-family: 'Lucida Grande', 'Lucida Sans Unicode',
'Lucida Sans', sans-serif;
border: 1px solid rgb(74, 174, 222);
border-image-source: initial;
border-image-slice: initial;
aborder-image-outset: initial;

Hover State Border Color:


Hover Blue
Color: #2C4B9A
RGB: 44, 75, 154
CMYK: 100, 58, 19, 4

Button #2-6 Color

Hover White
Color: #FFFFFF
RGB: 0,0,0
CMYK: 0,0,0,0

border-image-repeat: initial;
box-shadow: rgb(51, 51, 51) 0px 0px 20px;
-webkit-box-shadow: rgb(51, 51, 51) 0px 0px 20px;
border-radius: 8px;
text-align: left;

Header Styles
Main Navigation Menu Buttons

Home

Main Menu Button Size:

#1

#2

#3

#4

98px x 36px 59px x 36px 82px x 36px 112px x 36px

#5

70px x 36px

#6

77px x 36px

Main-Menu Size:
1043px x 691px
Main-Menu Color(s):
Menu Background Color: Blue Gradient
Button Colors: Transparent
Main-Menu Spacing:
Margin: 12px x 12px (Left & Right); 16px x 16px (Top & Bottom)
Padding: 18.2px x 18.2px
Main-Menu Corner Radius:
.4px

Sub-Menu Buttons
Sub-Menu Size:
77px x 36px
135px x 183px
Sub-Menu Color(s):
Menu Background Color: #253875
Copy Color: FFFFFF
Sub-Menu Spacing:
Margin: 4.2 (Left); 3.5 (Bottom)
Padding: 13.65

Hover State:
Color: #121F45

Search Bar

Header Styles
Four Column Grid

250px

151px

266px

Padding: 36px

440px

507px

Padding: 39px

Font: Red Bull Siri Bold


Size:20px
Color: #CC141A

Footer Styles
Main Footer

Footer Size:
43px x 43px
Footer Color(s):
#213872
Footer Spacing:
Margin: 26.286px (Left; Top; Right)
Footer Border
1px solid #213872

Kremlin Regular
20px
#FFFFFF

Button Styles

Button Name: Search Button


Location: Float Right
Size: min. 640px
Color: Clear
Font: Red Bull Siri Core Bold 14px
Spacing: padding 9.1px

Tertiary Module
margin-top: 0 !important;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;

Social Media Buttons


float: right;
display: inline;
border-top: 0;
padding-top: 0;

Form Styles

Contact
Futura pt Us
condensed- bold

FS Blake Light
Size: 19px
#171717
CMYK: 72, 66, 65, 80
RGB: 33, 43, 48

Size: 54px
#212B30
CMYK: 79, 65, 59, 62
RGB: 33, 43, 48

407px
x
543px
Futura pt condensed- bold
Size: 15px
#171717
CMYK: 72, 66, 65, 80
RGB: 33, 43, 48

Form Location/Alignment:
width: 90%;
position: relative;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
display: block;
overflow: hidden;
Form Element Size:
1043px x 691px

Form Spacing:
Margin: 57.953px (Left and Right); Bottom (28px)
Padding: 5px (Left and Right)
Form Border:
1px solid; Color #2406d9
Form Corner Radius:
4px
Form Drop Down Menu Shadow:
linear-gradient(to bottom,#ffffff,#f5f5f5)
Contact Form Gradient-

Photo Styles
Main Photo
Size:1257.778px x 628.889px

Column Grid Photos


Size: 241.580px x 161.111px
Padding: 26 (Left, Right; Bottom) 39 (Top)
Border: 2px solid #f3f3f3;
Border Radius: 4px

Advertisement Photo
Size: 300px x 250px
Margin:35.955px (Left & Right)

Bottom Module Photos


Size: 401.528px x 455.330px

Red Bull has photographed dozens of athletes, artists, musicians and events. We have also designed,
engineered and constructed original marketing products. Each photo should represent the core values of the
Red Bull Company.

Typography Styles

Kremlin
Used as the title for the Follow Red Bull Social Media Icons
Color: #FFFFF
Size: 20px
Line Height: 41px

Red Bull Core- Bold


Used for hyperlinks and small headers
Colors: #CC14A; #FFFFF
Size: 30px; 20px; 25px; 14px; 22px

Red Bull Siri Bold


Used for headers and hyperlinks
Colors: #CC14A; #FFFFF
Size: 30px; 20px; 25px; 14px; 22px

Red Bull Siri


Used for body copy
Colors: #000000
Size: 15.5px; 12.2px

Colors
Red Bull Red
Usage: Headlines
CMYK: 14; 100; 66; 2
RGB:204; 31; 75
HEX:CC1E4A

Deep Bull Blue


Usage: Logo and
borders
CMYK: 100, 64, 34, 23
RGB:0; 76;109
HEX:004C6C

ALmost Whitee
Usage: Lines; hover state
CMYK: 2,1,1,10
RGB: 245,245,245
HEX:F4F5F5

Outrageous Orange
Usage: part of logo
CMYK: 0; 60; 100; 0
RGB: 245; 129; 32
HEX:F4801F

Soaring Blue
Usage: Logo
CMYK: 100, 4, 25, 0
RGB: 0, 140, 209
HEX:008CD1

Almost Black
Usage: Copy
CMYK: 72,66,65,79
RGB: 23,23,23
HEX: 171717

Red
Usage: Logo
CMYK: 13,100,100,3
RGB:294,32,39
HEX: CB2026

Sunbelt Yellow
Usage: part of logo
CMYK:0;20;100;0
RGB:255;202;6
HEX:FFC906

Gray
Usage: Hover
State Text
CMYK: 66,59,58,41
RGB:70,70,70
HEX:464646

Gray Blue
Light Gray
Usage: Copy
Usage: Lines and Borders
CMYK: 79,65,59,62,
CMYK: 15,11,10,0
RGB: 33, 43, 48
RGB: 212,214,217
HEX:202A2F
HEX:D4D6D8

Another Blue
Usage: Links
CMYK: 100, 88,27,13
RGB:34,57,114
HEX:223971

Deeper Blue
Usage: Hyperlinks
CMYK:100,90,40,45
RGB: 19,32,70
Hex:121F45

You might also like