BRAND GUIDELINES
Hello. Welcome to WebinarJam
These guidelines present the “how-to’s” for using the WebinarJam brand to create effective communication that will help maintain a distinct brand presence and uniformity.
OUR MISSION
To empower entrepreneurs and educators to share their message live—without the tech headaches—through a webinar platform that’s simple, stable, and built to convert.
01
Our Logo
Our logo is recognized by millions of consumers and businesses around the world. We have 1 version of our logo with the icon and logotype stacked horizontally.
02
Logo Variants
Typically, these variants maintain the core elements of the logo while adjusting details for optimal visibility and legibility in different contexts.
Primary logo
Primary logo red
Primary logo grey
Primary logo black
Primary logo reverse
03
Logo Spacing
The logo requires a boarder of that is free of imagery and text surrounding it. Use half the Icon’s height to determine the minimum amount of safe space that should surround the logo.
04
Logo Use
When applying the WebinarJam logo on any background, proper contrast must always be maintained to ensure clarity and brand consistency. Use the full-color logo on light or neutral backgrounds where the icon and wordmark remain clearly visible, and use the white logo variant on dark or saturated backgrounds to preserve legibility. Always choose a background tone that provides sufficient contrast against the logo elements so the mark stands out and remains instantly recognizable.
05
Interaction
We are transitioning to a new pill shape CTA and have defined new use cases for each version. Refer to the UI kit for hover states. We are using flat colors without gradients, the gradients will be used only for promotions and special use cases.
PRIMARY CTA
Use for all website and landing pages; custom CTAs for ads
Feature sections, paid ads,
social media
SECONDARY CTA
Use for: secondary CTA when paired with primary CTA
Use for: secondary CTA when paired with primary CTA
INTERACTIVE TOGGLE
Monthly
Yearly
Use for: pricing swap
Reliable streaming
Use for: interactive tabs
06
Our Colors
WebinarJam’s simple, bright tone is captured in our clean color palette.
Primary colors: use for section backgrounds to provide contrast between content sections.
Secondary colors: blue & green used for CTAs; medium grey used for promo ads and call outs; off-black used for display and body text.
For promotions, the color scheme will evolve according to needs.
Primary colors: use for section backgrounds to provide contrast between content sections.
Secondary colors: blue & green used for CTAs; medium grey used for promo ads and call outs; off-black used for display and body text.
For promotions, the color scheme will evolve according to needs.
Primary
bright blue
#DE4235
#DE4235
light grey
#F7F8FA
#F7F8FA
deep navy
#1A1E2D
#1A1E2D
Secondary
CTA/link blue
#DE4235
#DE4235
medium grey
#F7F8FA
#F7F8FA
text black
#111111
#111111
07
Gradients
Gradients are used as backgrounds for photography, UI screens and frames to add support to the design and content. Gradients can be used in shapes, frames and background elements.
#F12721
#1F6EB8
#F2F4F7
#fff
08
Product UI
Examples of product UI designs to help tell the story of the product feature.
09
Typography
Clarity in communication is key for us, so we use the modern sans-serif font Inter bold for all display text on brand and marketing materials, and Inter for body copy.
Inter bold
ABCDEFGHIJKLMNOP
abcdEfghijklmnopqrstuvwxyz
abcdEfghijklmnopqrstuvwxyz
DISPLAY
Inter reg
ABCDEFGHIJKLMNOP
abcdEfghijklmnopqrstuvwxyz
abcdEfghijklmnopqrstuvwxyz
Text
10
Type Usage
Inter bold is used for headlines and used for text. This pairing creates contrast and calls attention to the content section in the design.
Case usage: we use sentence case for headlines, title case is used in CTA buttons and for product titles on the pricing page.
Case usage: we use sentence case for headlines, title case is used in CTA buttons and for product titles on the pricing page.
Desktop
Inter hero heading
60px / 64px line height / Medium
Inter section heading
48px / 52px line height /Medium
Inter paragraph titles
18px / 22px line height / Medium
Inter / paragraph / body
16px / regular
Mobile
Inter hero heading
48px / 52px line height / Medium
Inter section heading
36px / 40px line height / Medium
Inter paragraph titles
18px / 22px line height / Medium
Inter / Text Medium
16px / 24px line height / Medium
Inter / Text Small
14px / 20px line height / Regular
11
Iconography
Our icon library is built into the WebinarJam Figma design kit. We use open, single-line icons that are minimal, modern and 1-color. These icon examples are from the Kartra UI kit.
