UI Kit

Colors:

#8247AD
#00A19B
#10CDC9
#37B0CA
#466BB8
#4AA3DB
#758592
#A3BAC9
#DCE3ED
#E8ECF3
#2D2D2D
#5D5D5D
#9B9B9B
#D3D3D3

Fonts:

h1, .likeh1 font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 33px;
color:inherit;
@media #{$mediumBreak} {font-size: 45px;}

h2, .likeh2 font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 20px;
color:inherit;
@media #{$mediumBreak} {font-size: 30px;}

h3 font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 20px;
color:inherit;
@media #{$mediumBreak} {font-size: 23px;}

h4 font-family: 'Work Sans', sans-serif;
font-weight: 600;
font-size: 16px;
color:inherit;
@media #{$mediumBreak} {font-size: 14px;}

Body Copy

font-weight: 400;
line-height: 30px;
font-family: 'Work Sans', sans-serif;
font-size: 16px;
color:#707070;
@media #{$mediumBreak} {font-size: 17px;}

Lorem ipsum dolor sit amet, This is a hyperlink consectetur adipiscing elit. Etiam faucibus turpis ultricies feugiat gravida. Sed efficitur felis vitae metus commodo facilisis eu eget nisi. Curabitur luctus neque non turpis pellentesque lacinia. Sed a nisi vel leo iaculis eleifend a quis est. In hac habitasse platea dictumst. Maecenas dui mauris, semper sit amet porta ac, lobortis in justo. Sed non vehicula ante, non ullamcorper odio. Duis id purus ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum et ante vel iaculis.

Interactive:

Graphics

Landing Page Header Recommended size: 1366px x 624px @ 72DPI
Note: Landing page header orients from center, Text clear space begins at 50% so ideally the gradient overlay should begin at 40% of overall width from left of image (545px from left)

Event Page Header Recommended size: 960px x 540px @ 72DPI

Blog post feature: 1114px max width x 679px @ 72DPI
Note: The thumbnail auto crops to 450×250 (41:25 aspect ratio), the max width noted above will fill the post content width, the height can be variable, however it should be a minimum of 679px

Header image: 1400px wide X 900px tall minimum – The purple gradient on the landing pages is generated by the CSS. The image behind it is set to always fill the browser width, and scale proportionally from the center. The height of the header varies based on the content of the header, with a minimum height of 660px.

Footer graphic: 494px X 494px square – the mask and transparency must be created with Photoshop or some other similar graphic editing software.

1. This is a page disclaimer example with a hyperlink.