Webinar net Logo white

Style Guide

Last Updated: October 2020

Primary Colors

Primary colors for backgrounds, section breaks, and text

Black

HEX:
#03031C

RGB:
rgb(4, 1, 22)

Main text color, alternate background color

Dark Gray

HEX:
#7A7A7A

RGB:
rgb(122, 122, 122)

Call out text color, superscript, subscript, captions

Light Gray

HEX:
#F6F6F6

RGB:
rgb(246, 246, 246)

Secondary alternate background color

Highlight Colors

Highlight colors for shapes, icons, and background colors

Pink

HEX:
#F900D5

RGB:
rgb(249, 0, 213)

Use white text or icon over pink highlight background

Green

HEX:
#6CFF00

RGB:
rgb(108, 255, 0)

Use black text or icon over green highlight background

Purple

HEX:
#B513F7

RGB:
rgb(181, 19, 247)

Use white text or icon over purple highlight background

Yellow

HEX:
#FEFF00

RGB:
rgb(254, 255, 213)

Use black text or icon over yellow highlight background

Action Colors

Main color for links, buttons, and CTA's

Use white text or icon over blue highlight background.
Alternatively use blue text with blue border over white background

Blue

HEX:
#0F00E8

RGB:
rgb(15, 0, 232)

Use white text or icon over blue highlight background

Fonts & Typography

Font Family Usage

Primary Headers

Font Family: Archivo Black

Font Weight: 900

Letter Spacing: 1 em

Line Height: 1.3

Small Headers

Font Family: Archivo

Font Weight: 100

Letter Spacing: 1.3 em

Line Height: 1.3

Emphasis Text

Font Family: Archivo

Font Weight: 700

Letter Spacing: 1.3 em

Line Height: 1.5

Body text

Font Family: Archivo

Font Weight: 300

Letter Spacing: 0 em

Line Height: 1.5

Action Text and CTA's

Font Family: Archivo Narrow

Font Weight: 700

Letter Spacing: 0 em

Line Height: 1.5

Call Out Text

Font Family: Architect's Daughter

Font Weight: 100

Letter Spacing: 1 em

Line Height: 1.3

Primary Headers

Notice the first letter in each word is capitalized

Black Font Over Light Background

White Font Over Dark Background

White Font Over Pink Shape

Black Font Over Green Shape

White Font Over Purple Shape

White Font Over Yellow Shape

White Font Over Pink Shape

Black Font Over Green Shape

White Font Over Purple Shape

White Font Over Yellow Shape

Small Headers

Small headers typically follow primary headers

Small headers only capitalize the first letter of a sentence. And they can have punctuation!

Small headers only capitalize the first letter of a sentence‚Äč. And they can have punctuation!

Emphasis Text

Emphasis text can be used anywhere to draw attention

Use emphasis text anywhere to make a specific point stand out compared to standard body text!

Use emphasis text anywhere to make a specific point stand out compared to standard body text!

Body Text

This is how to style the main copy

The main body text is for in depth descriptions. Notice that the main body text is formatted with left-alignment. Typically, this is the is smallest font-size, and Dark Gray is used over light backgrounds.

The main body text is for in depth descriptions. Notice that the main body text is formatted with left-alignment. Typically, this is the is smallest font-size, and White is used over light backgrounds.

Action Text & CTA's

How to style buttons and actions

Hover over the buttons to see hover effects:

Hover over the buttons to see hover effects:

Design Elements

Below are options to give things some pop

Right-Click on any of the elements below to download it.

Text Boxes

Use the following options to make text stand out

Add colored borders to one side of text boxes to make that section of text standout

Add a white box with a slight shadow over a light background

Use a gray box with slight shadow over a light background

Logos

Right-Click on any of the logos below to download a copy.

Images

Types of images and how to style them
woman looking for webinar recording zoom alternative

Images of people

For images with people, the primary style is to use isolated images with either a blank background or a slight gradient background

Screenshots and images with backgrounds

For screenshots and images without isolated backgrounds, a frame is used with a large white border and slight drop shadow

webinar scheduling interface