General Site Specifications

Click the numbered tab on the left to see a particular asset’s specifications

1

Heading: H1

2

Heading: H2

3

Heading: H3

4

Heading: H4

5
Heading: H5
6
Heading: H6
7

Paragraph text: Lucas ipsum dolor sit amet beru antilles isard lars terrik tapani talz roonan ikrit droopy. Lowbacca maris ansion tagge sola clawdite lumiya gungan. Zabrak raa trioculus leia drovian kwi. Tarasin kwi gev sio bail gotal shimrra nassau cadavine.

8
  • List item text.
  • Coruscant qui-gonn.
  • Dalonbian firrerreo cognus jamillia.
9
  1. Ordered list item text
  2. Bibble annoo tion.
  3. Amedda mirialan kohl boss.
10

Bolded Text

Italic Text

Bold Italic Text

Text Link
11

Instructional Content Panel

Instructional text: Lucas ipsum dolor sit amet beru antilles isard lars terrik tapani talz roonan ikrit droopy. Lowbacca maris ansion tagge sola clawdite lumiya gungan. Zabrak raa trioculus leia drovian kwi. Tarasin kwi gev sio bail gotal shimrra nassau cadavine. Himoran wyl t'landa arcona zabrak. Marek jan triclops bardan dak doldur hoojib ozzel. Moff huk antilles chazrach trandoshan adi ansion.

Bottom Callout Text

12
City of Columbus
Full-module-width image and caption treatment.
13
City of Columbus
Left aligned image and caption treatment.

Paragraph text: Lucas ipsum dolor sit amet beru antilles isard lars terrik tapani talz roonan ikrit droopy. Lowbacca maris ansion tagge sola clawdite lumiya gungan. Zabrak raa trioculus leia drovian kwi. Tarasin kwi gev sio bail gotal shimrra nassau cadavine.

  • List item text.
  • Coruscant qui-gonn.
  • Dalonbian firrerreo cognus jamillia.

Solo sulorine mirta owen crynyd cassio cato coruscant vebb. Haako er'kit squib x'ting. Kushiban mimbanite ackbar rom wicket skywalker tierce. Sidious polis axmis tsavong yuuzhan gossam skywalker qel-droma.

14

Paragraph text: Lucas ipsum dolor sit amet beru antilles isard lars terrik tapani talz roonan ikrit droopy. Lowbacca maris ansion tagge sola clawdite lumiya gungan. Zabrak raa trioculus leia drovian kwi. Tarasin kwi gev sio bail gotal shimrra nassau cadavine.

  • List item text.
  • Coruscant qui-gonn.
  • Dalonbian firrerreo cognus jamillia.

Solo sulorine mirta owen crynyd cassio cato coruscant vebb. Haako er'kit squib x'ting. Kushiban mimbanite ackbar rom wicket skywalker tierce. Sidious polis axmis tsavong yuuzhan gossam skywalker qel-droma.

City of Columbus
Right aligned image and caption treatment.
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.