WEB STYLE GUIDE
This style guide is for use in web applications only. It is intended to demonstrate how MAVEN Project’s fonts, colors and imagery come to life in a web platform.
WEB STYLE GUIDE – FONTS
MONTSERRAT
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk
Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu
Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy
Zz
MULISH
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk
Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu
Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
MAVEN PROJECT – BRAND GUIDELINES
WEB STYLE GUIDE - COLOR
PRIMARY (100%)
HIGHLIGHT COLORS TINTS (40% - 70%)
WEB STYLE GUIDE - TYPE STYLES
Heading 01
H1 DESKTOP – H1 is for main page heading.
Heading 02
H2 DESKTOP - PAGE TITLE / SECTION TITLE
The H2 is the page level or section heading. May be used for any form of important page-level header. More than one may be used per page. Consider using an H2 unless you need a header level of less importance, or as a sub-header to an existing H2 element.
Heading 03
H3 DESKTOP - . SECTION HEADER / BANNER TITLE / SECTION SUBHEAD
May be used for any form of page-level header which falls below the H2 header in a document hierarchy.
font-family: mulish
font-weight: Bold 700
font-size: 48px
line-height: 54px
line color: #ffcf43
line thickness 6px line width 80px
font-family: mulish
font-weight: medium 500
font-size: 36px
line-height: 45px
font-family: mulish
font-weight: Bold 700
font-size: 24px
line-height: 36px
WEB STYLE GUIDE - TYPE STYLES
Heading 04
H4 DESKTOP - SUB HEADER
Typically used for article title or call-to-action elements.
HEADING 05
H5 DESKTOP - SUB HEADER
font-family: mulish
font-weight: bold 700
font-size: 21px
line-height: 32px
font-family: mulish
font-weight: ULTRABOLD 700 uppercase
font-size: 18px
line-height: 24px
Heading 06
H6 DESKTOP - SUB HEADER
Paragraph
P - All paragraphs are wrapped in p tags.
font-family: mulish
font-weight: bold 700
font-size: 18px
line-height: 27px
font-family: montserrat
font-weight: medium 500
font-size: 18px
line-height: 29px
WEB STYLE GUIDE - TYPE STYLES
font-family: Montserrat
font-weight: medium 500 italic
font-size: 18px
line-height: 24px
ITALIC 1 – QUOTES/TESTIMONIAL HEADERS Typically used for article title or highlighted quotes elements
font-family: mulish
font-weight: EXTRABOLD 800
font-size: 18px
line-height: 24px
FORM 1 DESKTOP
MAVEN PROJECT – BRAND GUIDELINES
WEB STYLE GUIDE – TYPE HIERARCHY
H1 DESKTOP Mulish, Bold 700, size: 48px
PARAGRAPH Montserrat, medium 500, size: 18px
H2 DESKTOP Mulish, medium 500, size: 36px
PARAGRAPH Montserrat, medium 500, size: 18px
H2 DESKTOP Mulish, medium 500, size: 36px
PARAGRAPH (BOLD) Montserrat, medium 500, size: 18px
PARAGRAPH Montserrat, medium 500, size: 18px
WEB STYLE GUIDE –
WEB STYLE GUIDE - NAVIGATION
ABOUT OUR WORK
Navigation Static
Color: #2B3A67
font-family: mulish
font-weight: ultrabold 900 uppercase
font-size: 17px
line-height: 17px
background color: #FFFBFF
Navigation Hover
Color: #66999B
font-family: mulish
font-weight: ultrabold 900 uppercase
font-size: 17px
line-height: 17px
background color: # FFFBFF
PROGRAMS
Navigation Dropdown Font
Color: #2B3A67
font-family: mulish
font-weight: ultrabold 900 uppercase
font-size: 17px
line-height: 26px
background color: #FFFBFF
WEB STYLE GUIDE - NAVIGATION
Primary CTA Alt 1
Color: #2B3A67
font-family: mulish
font-weight: ultrabold 900 uppercase
font-size: 17px
line-height: 17px
background color: #FFFBFF
Primary CTA Alt 1 Hover
Color: #FFFBFF
font-family: mulish
font-weight: ultrabold 900 uppercase
font-size: 17px
line-height: 17px
background color: #66999B
CLINIC PORTAL
CLINIC PORTAL
WEB STYLE GUIDE - CTA STYLES
Color: #2B3A67
font-family: mulish
font-weight: ultrabold 900 uppercase
font-size: 17px
line-height: 17px
background color: #FFCF43
Color: #FFFBFF
font-family: mulish
font-weight: ultrabold 900 uppercase
font-size: 17px
line-height: 17px
background color: #66999B
Color: #2B3A67
font-family: mulish
font-weight: ultrabold 900 uppercase
font-size: 17px
line-height: 17px
border-radius: 10px
background color: #FFCF43
Color: #FFFBFF
font-family: mulish
font-weight: ultrabold 900 uppercase
font-size: 17px
line-height: 17px
border-radius: 10px
background color: #66999B
Note: Buttons should not have more than 16 characters. Anything longer should be a text link.
WEB STYLE GUIDE – CTA STYLES
the full list
Color: #66999B
font-family: mulish
font-weight: bold 700
font-size: 20px
Color: #2B3A67
font-family: mulish
font-weight: bold 700
font-size: 20px
Note: Text links should not break to a second line.
WEB STYLE GUIDE - IMAGERY
Design preference is to place text directly on top of image, maintaining ADA standards.
Use color blocking to balance out large areas of white space
Avoid solid text boxes on top of images
Avoid large areas of white space.
MAVEN
WEB STYLE GUIDE - IMAGERY
Images with realistic color