Design Standards
Colors
The colors used on the FASTRAC site correspond to the pallette below. The formatting definitions can be found in the stylesheet for the site (css/graphic_view.css).
| Color | Value | Usage |
|---|---|---|
| #BBBEFF | Links: regular state | |
| #FF9900 | Links: hover state | |
| #080844 | Page background | |
| #D8D8D8 | Text | |
| #7580B4 | Borders | |
| #E8931C | Page titles (h2) | |
| #FFFFFF | Bold text |
Headings
The formatting of headings is performed in the site stylesheet (css/graphic_view.css).
Heading 1:
It has no margins and no padding, and it is used for the FASTRAC logo.
Heading 2:
Its font is bold Verdana and 200% in size with a top margin of 40px. It is used for page titles and has an orange color (#E8931C).
Heading 3:
Its font is bold Verdana and 150% in size with a top margin of 40px. It is used for subheadings within pages and has a white color.
Heading 4:
Its font is bold Verdana and 130% in size with a top margin of 40px. It is used for a second level of subheadings within pages and its color is the same as the text.
Heading 5:
Its font is bold Verdana and 150% in size with no margin. It is white in color. Heading 5 is used instead of heading 3, whenever one has a two column page layout.
Images
Preferred dimensions:
- no wider than 300px, if text is wrapping around it,
- no wider than 700px, if it takes up the whole page width.
Preferred resolution:
300 dpi for photos and 72 dpi for graphics.
Acceptable formats:
.jpg for photos and .gif for graphics.
Unacceptable formats:
.png due to large size and long loading times.
CSS Styles & Page Layout
The page layout is achieved through the use of CSS objects and classes. The chart below details the elements that control the page layout.
