Web Style Guide

Reading Time: 2 minutes

[et_pb_section fb_built=”1″ _builder_version=”3.18.7″ custom_padding=”54px|0px|0|0px|false|false”][et_pb_row custom_padding=”0|0px|0|0px|false|false” _builder_version=”3.18.7″][et_pb_column type=”4_4″ _builder_version=”3.18.7″][et_pb_text _builder_version=”3.18.7″ header_font=”Frank Ruhl Libre||||||||” header_font_size=”100px” header_font_size_phone=”75px” header_font_size_last_edited=”on|phone”]

Style Guide

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”on” custom_padding=”27px|0px|0|0px|false|false” _builder_version=”3.18.7″][et_pb_column type=”4_4″ _builder_version=”3.18.7″][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”51px” header_font_size_last_edited=”on|desktop” header_2_font=”|300|||||||” header_2_text_color=”#474747″ header_2_font_size=”52px” header_3_font=”||||||||” border_width_bottom=”1px”]

Typography

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” header_font=”Frank Ruhl Libre||||||||” header_font_size=”52px” header_font_size_phone=”32px” header_font_size_last_edited=”on|phone” custom_margin=”||0px”]

Page Header – Frank Ruhl Libre- Regular – 100pt

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” header_font=”||||||||” header_font_size=”51px” header_font_size_phone=”49px” header_font_size_last_edited=”on|desktop” header_2_font=”|300|||||||” header_2_text_color=”#474747″ header_2_font_size=”35px” header_3_font=”||||||||” custom_margin=”||-10px”]

Section Header – Frank Ruhl Libre – Light – 52pt

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”32px” custom_margin=”||10px”]

H1 – Frank Ruhl Libre – Regular – 32 pt

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_text_color=”#474747″ header_font_size=”32px” header_2_font=”||||||||” header_2_text_color=”#474747″ custom_margin=”||10px”]

H2 – Frank Ruhl Libre – Regular – 26 pt

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”32px” header_2_font=”||||||||” header_3_font=”||||||||” header_3_text_color=”#474747″ custom_margin=”||10px”]

H3 – Frank Ruhl Libre – Regular – 22 pt

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”32px” header_2_font=”||||||||” header_3_font=”||||||||” header_4_font=”||||||||” header_4_text_color=”#474747″ custom_margin=”||10px”]

H4 – Frank Ruhl Libre – Regular – 18 pt

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”32px” header_2_font=”||||||||” header_3_font=”||||||||” header_4_font=”||||||||” header_5_font=”||||||||” header_5_text_color=”#474747″ custom_margin=”||10px”]

H5 – Frank Ruhl Libre – 16 pt

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”32px” header_2_font=”||||||||” header_3_font=”||||||||” header_4_font=”||||||||” header_5_font=”||||||||” header_6_font=”||||||||” header_6_text_color=”#474747″ custom_margin=”||0px”]

H6 – Frank Ruhl Libre – Regular – 14 pt

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”32px” header_2_font=”||||||||” header_3_font=”||||||||” header_4_font=”||||||||” header_5_font=”||||||||” header_5_text_color=”#474747″ custom_margin=”||10px”]

Paragraph – Times New Roman – 18 pt

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”on” custom_padding=”51px|0px|27px|0px|false|false” _builder_version=”3.18.7″][et_pb_column type=”4_4″ _builder_version=”3.18.7″][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”51px” header_font_size_last_edited=”on|desktop” header_2_font=”|300|||||||” header_2_text_color=”#474747″ header_2_font_size=”52px” header_3_font=”||||||||” border_width_bottom=”1px”]

Color

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”on” _builder_version=”3.18.7″][et_pb_column type=”1_3″ _builder_version=”3.18.7″][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”#067204″ border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

Default Header Text Color
h1 & page header
#067204

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(6,114,4,0.8)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#067204 80%

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(6,114,4,0.6)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#067204 60%

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(6,114,4,0.5)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#067204 50%

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(6,114,4,0.3)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#067204 30%

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.18.7″][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”#474747″ border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

Header Text Color 
h2 h3 h4 h5 h6 
#474747

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(71,71,71,0.8)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#474747 80%

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(71,71,71,0.6)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#474747 60%

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(71,71,71,0.5)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#474747 50%

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(71,71,71,0.3)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#474747 30%

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.18.7″][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”#141414″ border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”30px||30px”]

Paragraph
#141414

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(20,20,20,0.8)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#141414 80%

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(20,20,20,0.6)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#141414 60%

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(20,20,20,0.5)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#141414 50%

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” text_font_size=”22px” header_font=”||||||||” background_color=”rgba(20,20,20,0.3)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” background_layout=”dark” custom_margin=”||10px” custom_padding=”15px||15px”]

#141414 30%

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”on” _builder_version=”3.18.7″][et_pb_column type=”4_4″ _builder_version=”3.18.7″][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”51px” header_font_size_last_edited=”on|desktop” header_2_font=”|300|||||||” header_2_text_color=”#474747″ header_2_font_size=”52px” header_3_font=”||||||||” border_width_bottom=”1px”]

Modules

Modules represent any component that isn’t the written word and images. Below are some examples of how modules can look. They are not limited to these modules. These guidelines can be used for any modules a designer wants to use.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row make_fullwidth=”on” custom_padding=”0|0px|27px|0px|false|false” _builder_version=”3.18.7″][et_pb_column type=”3_5″ _builder_version=”3.18.7″][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”32px” header_2_font=”||||||||” header_3_font=”||||||||” header_3_text_color=”#474747″ border_width_bottom=”1px” custom_margin=”||20px”]

Module Specs

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ text_font=”||||||||” header_font=”||||||||” header_text_color=”#ffffff” header_2_font=”||||||||” header_2_text_color=”#474747″ background_color=”rgba(237,237,237,0.3)” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″ text_orientation=”center” custom_padding=”10px||10px”]

Border Radius – 5px, 5px, 5px, 5px

Box Shadow
x – 0px || y – 12px || blur – 18px
rgba(0,0,0,0.3)

[/et_pb_text][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”32px” header_2_font=”||||||||” header_3_font=”||||||||” header_3_text_color=”#474747″ border_width_bottom=”1px” custom_margin=”||20px”]

Video

[/et_pb_text][et_pb_video src=”https://www.youtube.com/watch?v=UhMKYaIHWy0″ _builder_version=”3.18.7″ border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″][/et_pb_video][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”3.18.7″][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”32px” header_2_font=”||||||||” header_3_font=”||||||||” header_3_text_color=”#474747″ border_width_bottom=”1px” custom_margin=”||20px”]

Social Follow

[/et_pb_text][et_pb_social_media_follow _builder_version=”3.18.7″ border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″][et_pb_social_media_follow_network social_network=”facebook” _builder_version=”3.18.7″ background_color=”#3b5998″ follow_button=”off” url_new_window=”on”]facebook[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”twitter” _builder_version=”3.18.7″ background_color=”#00aced” follow_button=”off” url_new_window=”on”]twitter[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”instagram” _builder_version=”3.18.7″ background_color=”#ea2c59″ follow_button=”off” url_new_window=”on”]instagram[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”linkedin” _builder_version=”3.18.7″ background_color=”#007bb6″ follow_button=”off” url_new_window=”on”]linkedin[/et_pb_social_media_follow_network][/et_pb_social_media_follow][et_pb_text _builder_version=”3.18.7″ header_font=”||||||||” header_font_size=”32px” header_2_font=”||||||||” header_3_font=”||||||||” header_3_text_color=”#474747″ border_width_bottom=”1px” custom_margin=”||20px”]

Author Box

[/et_pb_text][et_pb_testimonial author=”Author Name” portrait_url=”data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGZpbGw9IiNFQkVCRUIiIGQ9Ik0wIDBoNTAwdjUwMEgweiIvPgogICAgICAgIDxyZWN0IGZpbGwtb3BhY2l0eT0iLjEiIGZpbGw9IiMwMDAiIHg9IjY4IiB5PSIzMDUiIHdpZHRoPSIzNjQiIGhlaWdodD0iNTY4IiByeD0iMTgyIi8+CiAgICAgICAgPGNpcmNsZSBmaWxsLW9wYWNpdHk9Ii4xIiBmaWxsPSIjMDAwIiBjeD0iMjQ5IiBjeT0iMTcyIiByPSIxMDAiLz4KICAgIDwvZz4KPC9zdmc+Cg==” quote_icon=”off” quote_icon_color=”rgba(0,0,0,0)” _builder_version=”3.18.7″ body_font=”||||||||” background_color=”#ffffff” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset3″]

Enter Bio of Author Here

[/et_pb_testimonial][/et_pb_column][/et_pb_row][/et_pb_section]