Wolfpack

Branding Guide

Colors

Primary

Primary colors are the first to be used. Do not design with secondary or tertiary colors until you have already utilized these colors for your graphics or content layout. Supports readability when used as background with white text. 

Blue

HEX: #18284d
RGB: 24 40 77

Orange

HEX: #DC6C2D
RGB: 220 108 45

Brown

HEX: #8d8674
RGB: 141 134 116

Secondary

Secondary colors are for cases where you need additional colors for graphics or content layout. Supports readability when used as background with white text. 

Dark Brown

HEX: #444545
RGB: 68 69 69

Yellow

HEX: #fabe2d
RGB: 250 190 45

Tertiary

Tertiary colors are used only for graphics that need additional shades of existing brand colors. Not to be used as background color for text content.

Light Orange

HEX: #eca059
RGB: 236 160 89

Light Yellow

HEX: #fcd26f
RGB: 252 210 111

Typography

Font Weight Size Letter Spacing
Poppins Semi Bold 56px 0px
FontWeightSizeLetter Spacing
PoppinsSemi Bold42px0px
FontWeightSizeLetter Spacing
PoppinsSemi Bold26px0px
FontWeightSizeLetter Spacing
PoppinsSemi Bold22px0px
FontWeightSizeLetter Spacing
PoppinsSemi Bold21px0px
FontWeightSizeLetter Spacing
PoppinsSemi Bold18px0px
FontWeightSizeLetter Spacing
PoppinsNormal16px0px
Font Weight Size Letter Spacing Text Transform
Poppins Normal 21px 0.6px Uppercase
Font Weight Size Letter Spacing
Poppins Semi Bold 56px 0px
FontWeightSizeLetter SpacingText Transform
PoppinsNormal18px0.6pxUppercase

Buttons

Logo

Stacked Primary

Stacked Reversed

Stacked Grayscale

Horizontal Primary

Horizontal Reversed

Horizontal Grayscale