Primary Headers
Font Family: Archivo Black
Font Weight: 900
Letter Spacing: 1 em
Line Height: 1.3
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
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:
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
Logos
Right-Click on any of the logos below to download a copy.
Images
Types of images and how to style them
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
- ©2020 webinar.net. All rights reserved.
- Terms of Services
- Privacy Policy