Advertiser Hub Style Guide
Logo
Dark Background
Use on light backgrounds
Light Background
Use on dark backgrounds
Icon Dark
Monochrome version
Icon Gradient
Gradient version
Typography
Headings
H1
Avenir Black
font-family: Avenir, 'sans-serif';
font-size: 65px;
font-weight: 900;
H2
Avenir Black
font-family: Avenir, 'sans-serif';
font-size: 50px;
font-weight: 900;
H3
Avenir Black
font-family: Avenir, 'sans-serif';
font-size: 40px;
font-weight: 900;
H4
Avenir Black
font-family: Avenir, 'sans-serif';
font-size: 24px;
font-weight: 900;
text-transform: uppercase;
H5
Avenir Black
font-family: Avenir, 'sans-serif';
font-size: 20px
font-weight: 900;
text-transform: uppercase;
H6
Avenir Black
font-family: Avenir, 'sans-serif';
font-size: 16px;
font-weight: 900;
text-transform: uppercase;
ParagraphS
Paragraph Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
CSS Class: .p-large
font-family: Barlow, 'sans-serif';
font-size: 22px;
font-weight: 400;
Paragraph Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
CSS Class: none
font-family: Barlow, 'sans-serif';
font-size: 18px;
font-weight: 400;
Paragraph Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
CSS Class: .p-small
font-family: Barlow, 'sans-serif';
font-size: 14px;
font-weight: 400;
Color Palette
Primary Colors
#000000
Rich Black
Primary dark color
#C786BA
Light Purple
Accent color
Secondary Colors
#5C2D91
Purple
Secondary brand color
#4CC1E0
Sky Blue
Secondary accent color
#EE4C8E
Magenta
Secondary accent color
Gradient Colors
#5C2D91
#C786BA
Purple Gradient
background-image: linear-gradient(135deg, var(--e-global-color-accent) 0%, var(--e-global-color-secondary) 100%);
#4CC1E0
#C786BA
Blue Gradient
background-image: linear-gradient(135deg, var(--e-global-color-5b8171d) 0%, var(--e-global-color-secondary) 100%);
#EE4C8E
#C786BA
Magenta Gradient
background-image: linear-gradient(135deg, var(--e-global-color-8a4fec3) 0%, var(--e-global-color-secondary) 100%);
Spacing
Borders
Border Radius
/* Large (for full width or large elements) */
border-radius: 20px;
/* Medium (for medium size elements) */
border-radius: 15px;
/* Small (for small size elements) */
border-radius: 10px;
Images
