Style Guide
Logos
Colors
Primary
#177A91
rgb(23, 122, 145)
Secondary
#0a203f
rgb(10, 32, 63)
Tertiary
#EFEFEF
rgb(239, 239, 239)
Action/Focus
#B8D426
rgb(184, 212, 38)
Typography
Heading 1 - Open Sans - 50px/70px
Page Titles
Heading 2 - Open Sans - 36px/54px
Section Titles
Heading 3 - Open Sans - 28px/42px
Section Sub-Titles
Heading 4 - Open Sans - 24px/36px
Element Titles (Photos, Grid Items)
Heading 5 - Open Sans - 20px/30px
Element Sub-Titles
Heading 6 - Open Sans - 16px/24px
Meta Information (Dates, Categories, Tags)
Paragraph Text – Source Sans Pro – 18px/27px
Content Text
Default Structure and Layouts
Default Full-Width Sections
SECTION element with 45px top and 45px bottom padding, containing ROW elements inside.
ROW elements should be default padding containing CONTENT elements inside.
CONTENT elements should have 15px bottom margin between sub-titles and related content (like paragraph text), and 30px bottom margin between unrelated elements (like pictures and buttons).
Default 50/50 Sections
Default 50/50 Sections
SECTION element with 45px top and 45px bottom padding, containing ROW elements inside.
ROW element should be default padding containing CONTENT elements inside, with ROW element layout set to 50/50 using 30px column gap, equal column height enabled, and content position set to middle.
CONTENT elements should have 15px bottom margin between sub-titles and related content (like paragraph text), and 30px bottom margin between unrelated elements (like pictures and buttons).
Default 50/50 Sections
This section layout should usually include text content on one side and video or image content on the other side.
Default 1/3 by 1/3 by 1/3 Sections
DEFAULT 1/3 by 1/3 by 1/3 SECTIONS
SECTION element with 45px top and 45px bottom padding, containing ROW elements inside.
ROW element should be default padding containing CONTENT elements inside, with ROW element layout set to 33/33/33 using 30px column gap, equal column height enabled, and content position set to default.
CONTENT elements should have 15px bottom margin between sub-titles and related content (like paragraph text), and 30px bottom margin between unrelated elements (like pictures and buttons).
DEFAULT 1/3 by 1/3 by 1/3 SECTIONS
This layout should be used for showcasing information that may lead to other pages or to organize related content that could be organized with 3 different sub-titles.
DEFAULT 1/3 by 1/3 by 1/3 SECTIONS
This layout should include icons or images in each column, if possible, to lessen the wall of text effect on the eye with graphics.