Style Guide
Navigation
The header site navigation bar should be under the actual header, and a smaller sub navigation bar directly under that to indicate current page.
The Side site navigation will list every main page, and will drill down to the current selected page.
The footer navigation bar will include school assignments, copyright, and legal information.
Colors
Variant |
Hex Code |
RGB Code |
Example |
Primary Color |
|||
| Var 1 | #3E13AF | RGB(62,19,175) | |
| Var 2 | #442B83 | RGB(68,43,131) | |
| Var 3 | #240672 | RGB(36,6,114) | |
| Var 4 | #6F47D7 | RGB(111,71,215) | |
| Var 5 | #8B6ED7 | RGB(139,110,215) | |
Secondary Color A |
|||
| Var 1 | #B4F200 | RGB(180,242,0) | |
| Var 2 | #93B52D | RGB(147,181,45) | |
| Var 3 | #759D00 | RGB(117,157,0) | |
| Var 4 | #C9F83E | RGB(201,248,62) | |
| Var 5 | #D6F870 | RGB(214,248,112) | |
Secondary Color B |
|||
| Var 1 | #FF8E00 | RGB(255,142,0) | |
| Var 2 | #BF8030 | RGB(191,128,48) | |
| Var 3 | #A65C00 | RGB(166,92,0) | |
| Var 4 | #FFAA40 | RGB(255,170,64) | |
| Var 5 | #FFC173 | RGB(255,193,115) | |
Logos
Currently working on acquiring a logo. Once one is acquired, it will be placed here for use.
Typography
Image taken from http://colorschemedesigner.com/
Item |
Font |
Size |
Color |
| 1. Site Name | Times New Roman | 24pt Font | #442B83 |
| 2. Header Site Navigation, non selected | Arial, Helvetica | 10pt Font | #759D00 |
| 3. Header Site Navigation, selected | Arial, Helvetica | 10pt Font | #D6F870 |
| 4. Page Title | Arial, Helvetica | 16pt Font | #FFAA40 |
| 5. Paragraph Text | Arial, Helvetica | 12pt Font | #000000 |
| 6. Footer Navigation | Arial, Helvetica | 8pt Font | #759D00 |
| 7. Subtitle | Arial, Helvetica | 14pt Font | #FFAA40 |
| Side Site Navigation | Arial, Helvetica | 10pt Font | #442B83 |
| Side Site Navigation, current page link | Arial, Helvetica, Italicized | 10pt Font | #8B6ED7 |
Graphics
Depeding on the menu, these are the arrow graphics to use for the navigation.
 |
brownarrowvar1.gif |  |
greenarrowvar1.gif |
 |
brownarrowvar2.gif |  |
greenarrowvar2.gif |
 |
brownarrowvar3.gif |  |
greenarrowvar3.gif |
 |
brownarrowvar4.gif |  |
greenarrowvar4.gif |
 |
brownarrowvar5.gif |  |
greenarrowvar5.gif |
Content
The main will consist of a Page title, subtitle, and paragraph text. The common font will be Arial, Helvetica. Paragraph text will be black, but subtitles and page titles will be different colors – see the typography section.
Best Practices
To ensure a pleasant user experience, all sites will need to follow these rules:
- Navigation must remain consistent throughout the site, and easily be able to return to the home page
- All images must include an “ALT” tag and height and width information
- Use Cascading Style Sheets to create the layout and style
- Each page must be validated by the W3C markup validation tool
- Links should checked, and then double checked to ensure they are working and live
- Links must be informative
- Pages must conform to XHTML standards