Styleguide

Font

Gotham // Black

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Gotham // Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Gotham // Book

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Color

Teal
#6dd5d1

Yellow
#fae300

Pink
#f7b0c2

Coral
#fe838e

Red
#ce2336

Navy
#01213f

Black
#2c2e34

White
#FFFFFF

TYPOGRAPHY

H1 - Gotham Black

Size: 120px — Character: Auto — Line: 150px

H2 - Gotham Black

Size: 60px — Character: Auto — Line: 69px

H3 - Gotham Black

Size: 40px — Character: Auto — Line: 48px

H4 - Gotham Bold

Size: 20px — Character: 0px — Line: 26px

Chunky - Gotham Black

Size: 30px — Character: 0px — Line: 50px

Regular - Gotham Book

Size: 24px — Character: 0px — Line: 34px

Small - Gotham Bold

Size: 14px — Character: 0px — Line: 16px

Body - Gotham Book

Size: 16px — Character: 0px — Line: 26px

Elements

Headlines:

LIGHT AS
A FEATHER

Text with color boxes behind it
NOTE: text on left is always static but the color blocking will follow the rag of the copy with 21px of padding on the right side of copy.
NOTE: Color of text can be black and white, and background color can also be changed

Chunky Copy Block:

Animated Neon Garnish Element

This is a line about the benefit
of the studio content that is made
by Awesomeness Studios all day.

Text with color boxes behind it
NOTE: text on left is always static but the color blocking will follow the rag of the copy with 12px of padding on the right side of copy.
NOTE: Color of text can be black and white, and background color can also be changed

Neon Elements:

Heart Triangle Lines

BG FLOATING ELEMENTS:

Creating animating elements

These items are animated and floating in the background.
NOTE: They vary in size and color. Can Use: https://stage.iplus.co/ as a reference

Lifted BG Block:

 

UI Elements

ELEMENTS: