webinar.net Style Guide
Last Updated: November 2021
Primary Colors
Blue - Primary
HEX:
#0B98FF
Main color.
1st color for blue gradients
Blue - Gradient
HEX:
#0A6AFF
2nd color for blue gradients
Primary Gradient
STYLE:
#8F00E3 to #0B98FF
ANGLE: 120
Purple - Primary
HEX:
#8F00E3
Secondary Color
1st color for purple gradients
Purple - Gradient
HEX:
#6E00E3
2nd color for purple gradients
Purple - Alt
HEX:
#B34AF0
This is a lighter version of purple used in gradients to standout better on dark backgrounds
Black - 1
HEX:
#141626
Main background color. Used as a solid and for gradients
Black - 2
HEX:
#202233
Intermediary dark color, used for gradients.
Black - 3
HEX:
#2D3047
Prmary dark color. Used for text, borders, and gradients
Gray - 1
HEX:
#DADEEC
Gray - 2
HEX:
#C6CCE0
Primary text (not H1, H2, H4) color for dark backgrounds.
Gray - 3
HEX:
#858B9E
White
HEX:
#FFFFFF
Primary text color for H1, H2, H4.
Start of white gradient.
White - 2
HEX:
#F6F5FF
2nd white gradient color
Text & Fonts
Primary Headers
Size: 60px
Weight: 200
Secondary Header
Size: 40px
Weight: 200
Secondary Header
Size: 25px
Weight: 400
Line Height: 28px
Secondary Header
Size: 25px
Weight: 200
Secondary Header
Size: 25px
Weight: 400
Line Height: 28px
Title Tagline
Size: 25px
Weight: 100
Line Height: 32px
Weight: 400
Upload your own background template or select from our cool catalog. Pick your color, font to go along with your corporate slide deck and logo. Remember that a well-designed webinar audience UI will give your company a great first impression.
Size: 18px
Weight: 400
Line Height: 24px
Letter Spacing: 0.2em
Size: 14px
Weight: 400
Line Height: 24px
Letter Spacing: 0.2em
- List Item #1
- List Item #2
- List Item #3
Size: 18px
Weight: 400
Full Width Section
Upload your own background template or select from our cool catalog. Pick your color, font to go along with your corporate slide deck and logo. Remember that a well-designed webinar audience UI will give your company a great first impression.
Does the Zoom alternative come with a free trial?
Don’t let a fancy brochure blindside you. You want to give the webinar software a trial run before ponying up the big bucks. A free trial allows you to do just that. You’ll get a glimpse into what it’s like to use the software from the admin perspective. You should also get a first-hand experience of what it’s like from the user’s point of view.
Text Boxes
Multiple ways to style text
Dark boxes use an angled gradient that is slightly transparent with a solid border and significant drop shadow.
GRADIENT: #202233E6, #141626E6
BORDER: 10px #2D3047
BORDER RADIUS: 15px
SHADOW: 10px, 10px, 35px, rgba(0, 0, 0, 0.6)
PADDING: 25px
Light boxes use an angled gradient with a solid border and significant drop shadow.
GRADIENT: #FFFFFF, #E0E2E9
BORDER: 10px #2D3047
BORDER RADIUS: 15px
SHADOW: 10px, 10px, 35px, rgba(0, 0, 0, 0.6)
PADDING: 25px
Design Elements
Below are options to give things some pop
coolest
<span class="glow-purple">coolest </span>
coolest
<span class="glow-blue">coolest </span>
