Color Palette

These are the most important colors and they will be used throughout the site.

Primary

Class: bg-color-primary
Hex: #00abd6
RGB: e5e5e5

Secondary

Class: bg-color-secondary
Hex: #00abd6
RGB: e5e5e5

Tertiary

Class: bg-color-tertiary
Hex: #00abd6
RGB: e5e5e5

Accent 1

Class: bg-color-accent1
Hex: #00abd6
RGB: e5e5e5

Accent 2

Class: bg-color-accent2
Hex: #00abd6
RGB: e5e5e5

Accent 3

Class: bg-color-accent3
Hex: #00abd6
RGB: e5e5e5

Dark

Class: bg-color-dark
Hex: #00abd6
RGB: e5e5e5

White

Class: bg-white
Hex: #00abd6
RGB: e5e5e5

OffWhite

Class: bg-offwhite
Hex: #00abd6
RGB: e5e5e5


Basic Typography

Most of your site is made of text, so typography is very important!

Header 1

Font: Montserratt / Color: #33333 / Size: 51px

Header 2

Font: Montserratt / Color: #33333 / Size: 51px

Header 3

Font: Montserratt / Color: #33333 / Size: 51px

Header 4

Font: Montserratt / Color: #33333 / Size: 51px

Header 5

Font: Montserratt / Color: #33333 / Size: 51px

Header 6

Font: Montserratt / Color: #33333 / Size: 51px

This is a Large H2 Heading

This is some supplemental body text to go along with your headers. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis pellentesque, vulputate ante ac, laoreet magna. Nulla congue lorem quis risus dictum, eu convallis lectus hendrerit. Etiam id pulvinar ex. Integer ac risus a neque viverra placerat non eget nisl. Maecenas sed metus vel ante dignissim varius.

This is a medium H3 Heading

Here’s some more supplemental body text to help describe your point. Suspendisse non porttitor urna, et gravida eros. Vivamus sit amet massa egestas, maximus tellus luctus, rhoncus velit. Morbi vehicula sollicitudin leo at ultrices. Etiam imperdiet, dolor eu sodales varius, magna neque faucibus justo, ut congue velit metus quis dolor. Maecenas efficitur id dolor vel laoreet.

These are all items in an un-ordered list.

  • This is a list item.

  • This is also a list item.

  • Here’s one more.

  • And just for good measure…

  • Here’s one last one.

Font Weights

Weight 100

class=”wt-100″

Weight 300

class=”wt-300″

Weight 400

class=”wt-400″

Weight 500

class=”wt-500″

Weight 700

class=”wt-700″

Weight 900

class=”wt-900″


A normal size h4 Heading

Here’s some teaser text to make you want to click the link below.

This is a link

A normal size h4 Heading

Here’s some teaser text to make you want to click the link below.

This is a link

A normal size h4 Heading

Here’s some teaser text to make you want to click the link below.

This is a link

A Colored Background Section

A Heading with a large topline and highlights

This is some supplemental body lead text to go along with your headers. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis pellentesque laoreet magna.

Light button color

Site Elements

All pages and sections of the site are made up of a collection of elements. Below are some of the most common.

 

 

Graphic Icon Block Title

Here’s some more supplemental body text to help describe your point. Suspendisse non porttitor urna, et gravida eros.

This is a link to somewhere

 

Graphic Icon Block Title

Here’s some more supplemental body text to help describe your point. Suspendisse non porttitor urna, et gravida eros.

This is a link to somewhere

 

Graphic Icon Block Title

Here’s some more supplemental body text to help describe your point. Suspendisse non porttitor urna, et gravida eros.

This is a link to somewhere


Graphic Icon Title

Here’s some more supplemental body text to help describe your point.

Primary button

 

Graphic Icon Title

Here’s some more supplemental body text to help describe your point.

Secondary button

 

Graphic Icon Title

Here’s some more supplemental body text to help describe your point.

Tertiary button

 

Graphic Icon Title

Here’s some more supplemental body text to help describe your point.

Accent1 button

 

Graphic Icon Title

Here’s some more supplemental body text to help describe your point.

Accent2 button

 

Graphic Icon Title

Here’s some more supplemental body text to help describe your point.

Accent3 button

 


Form Elements

Forms are an important part of your website. They should look nice and fit the theme.


Tables

Tables are an important part of your website. They should look nice and fit the theme.

A Table Title

Table Headers Another Header One More
Glenwood Elementary –
Streaming Flix
10/20/2017 – 10/20/2017 10:00 AM – 10:30 PM EST | 7:00 AM – 7:30 PM PST
Hartshorn Elementary –
Streaming Flix
10/20/2017 – 10/20/2017 10:00 AM – 10:30 PM EST | 7:00 AM – 7:30 PM PST
Lura A. White Elementary –
Streaming Flix
10/20/2017 – 10/20/2017 10:00 AM – 10:30 PM EST | 7:00 AM – 7:30 PM PST