1
Heading: H1
Desktop
Roboto Slab – Regular
Font-Size: 36px
Hex Color: #BE0F34
RGB Color: R:190 G:15 B:52
Line Height: 40px
Mobile
Roboto Slab – Regular
Font-Size: 40 px
Hex Color: #BE0F34
RGB Color: R:190 G:15 B:52
Line Height: 43px
Usage
Used as page header titles. In most cases this will be the main title of the page, and be automatically filled out. Should not be used for anything else, to keep SEO organized.
Suggested Word Count
3-10 Words
Suggested Character Count
Under 80
2
Heading: H2
Desktop
Roboto Slab – Regular
Font-Size: 36px
Hex Color: #BE0F34
RGB Color: R:190 G:15 B:52
Line Height: 40px
Mobile
Roboto Slab – Regular
Font-Size: 40 px
Hex Color: #BE0F34
RGB Color: R:190 G:15 B:52
Line Height: 43px
Usage
Used as page header titles. In most cases this will be the main title of the page, and be automatically filled out. Should not be used for anything else, to keep SEO organized.
Suggested Word Count
3-10 Words
Suggested Character Count
Under 80
3
Heading: H3
Desktop
Roboto – Light
Font-Size: 24px
Hex Color: #BE0F34
RGB Color: R:190 G:15 B:52
Line Height: 28px
Mobile
Roboto – Light
Regular Font-Size: 33 px
Hex Color: #BE0F34
RGB Color: R:190 G:15 B:52
Line Height: 33px
Usage
Used as for smaller section titles, subtitles, and tan-panel titles. Can also be list headers. This is the most widely used title/subtitle.
Suggested Word Count
3-30 Words
Suggested Character Count
Under 175
4
Heading: H4
Desktop
Roboto – Medium
Font-Size: 18px
Hex Color: #20262B
RGB Color: R:32 G:38 B:43
Line Height: 21px
Mobile
Roboto – Medium
Font-Size: 26px
Hex Color: #20262B
RGB Color: R:32 G:38 B:43
Line Height: 30px
Usage
Used as for smaller subtitles, and to highlight certain text callouts; i.e.: Overall Odds Ratios under a text block explaining a game. Can also be table headers.
Suggested Word Count
3 – 30 Words
Suggested Character Count
Under 175
5
Heading: H5
Desktop
Roboto – Bold
Font-Size: 16px
Hex Color: #5161AC
RGB Color: R:81 G:97 B:172
Line Height: 19px
Mobile
Roboto – Bold
Font-Size: 21px
Hex Color: #5161AC
RGB Color: R:81 G:97 B:172
Line Height: 26px
Usage
Not widely used for smaller subtitles, but can be used in text to differentiate ideas or sections, for further subdivide a section with an H4 Title.
Suggested Word Count
3 – 30 Words
Suggested Character Count
Under 175
6
Heading: H6
Desktop
Roboto – Bold
Font-Size: 18px
Hex Color: #20262B
RGB Color: : R:32 G:38 B:43
Line Height: 21px
Letter-Spacing: 6px
Always Uppercase
Mobile
Roboto – Bold
Font-Size: 21px
Hex Color: #20262B
RGB Color: : R:32 G:38 B:43
Line Height: 26px
Letter-Spacing: 7px
Always Uppercase
Usage
Used as table headers or small section headers. Due to it being always uppercase, with a wide letter-spacing, this is to strongly divide one section from another, as it will visually break up the page.
Suggested Word Count
1 – 5 Words
Suggested Character Count
Under 40
7
Paragraph Text
Desktop
Roboto – Light
Regular Font-Size: 16px
Hex Color: #20262B
RGB Color: R:32 G:38 B:43
Line Height: 24px
Paragraph Separation: 15px
Mobile
Roboto – Light
Regular Font-Size: 21px
Hex Color: #20262B
RGB Color: R:32 G:38 B:43
Line Height: 24px
Paragraph Separation: 15px
Usage
This is a main body copy for the site.
8
Paragraph Unordered List
List item Shape: Bullet
Margin-left: 25px
Padding-left: 25px
Text will be Paragraph text
9
Paragraph Orrdered List
List item Shape: Number
Margin-left: 25px
Padding-left: 25px
Text will be Paragraph text
10
Paragraph Text Iterations
Italic: Roboto – Light Italic
Bold Italic: Roboto – Bold Italic
Bold: Roboto – Bold
Link Color: #5161AC, Underlined
11
Instructional Content Panel
Structure
H3 Title
Paragraph Text
H4 Bottom Callout
Background Color: #F1EFEE
Background RGB Color: R:241 G:239 B:238
Padding: 20px
Width: 100% of the container
Usage
For any type of instructions, directions, or any other sequential idea that needs separated from the rest of the page’s content.
12
Full Width Image
Width
864px
Height
Variable, but suggest 328px
Caption
Roboto – Bold
Font-Size: 14px
Mobile Size: 18px
Hex Color: #20262B
RGB Color: R:32 G:38 B:43
Line Height: 16px
Mobile Line Height: 21px
Image/Caption Separation: 10px
Margin-bottom: 20px
Text Align: Left
Usage
For use on any page where a full width image will be used in the content area.
13
Left Aligned Image
Width
200px to 432px, but suggest 338px
Height
Variable, but suggest 328px
Caption
Roboto – Bold
Font-Size: 14px
Mobile Size: 18px
Hex Color: #20262B
RGB Color: R:32 G:38 B:43
Line Height: 16px
Mobile Line Height: 21px
Image/Caption Separation: 10px
Margin-bottom: 20px
Text Align: Left
Image/Caption Container
Floated left around text content
Usage
For use on any page where a descriptive or complimentary image will be used in the content area. Should be related to the text block adjacent to it, but not required.
14
Right Aligned Image
Width
200px to 432px, but suggest 338px
Height
Variable, but suggest 328px
Caption
Roboto – Bold
Font-Size: 14px
Mobile Size: 18px
Hex Color: #20262B
RGB Color: R:32 G:38 B:43
Line Height: 16px
Mobile Line Height: 21px
Image/Caption Separation: 10px
Margin-bottom: 20px
Text Align: Left
Image/Caption Container
Floated right around text content
Usage
For use on any page where a descriptive or complimentary image will be used in the content area. Should be related to the text block adjacent to it, but not required.