Colour Palette

Red Mars
#a73a26
[top bar]

Onyx
#363132
[main menu]

Cobalt
#275681
[sample location]

Dark Grey
#8c8c8c
[header etc]

Light Grey
#dadde0
[separator accents]

Design Grid: Layout Specifications

Desktop

Default Layout: 1140px Design Grid

(header/footer, generic content, blog pages, 3-column grids)
- 3 x 360px design columns
- 30px gutters
Wide Layout: CSS 1440 Grid

(wider home page content, 4-column grids for product listings etc)
- 4 x 330px columns
- 30px gutters

Mobile Devices

Tablet (iPad): 2 columns

Canvas width: 768px
Handheld (iPhone): 1 column

Canvas width: 375px
360px design columns from desktop layout may be pasted in and stacked

Typography: Font Pairing

Default Font: Open Sans

Font size: 1.5em
Font line height: 1.5em
Font weight: 400 (normal)

Managed in Appearance > Customize > Typography > Body

Heading Font: Raleway

Overriden in Appearance > Customize > Typography > Headings

For blogs that desire a special font for just the actual body of articles, fonts can be overridden in Appearance > Customize > Typography > Post Content and Appearance > Customize > Typography > Blog Entry Excerpt

Colour of Links, Buttons & Border: set the global accent colour in Appearance > Customize > General Theme Options > Accent Colors

H1 Heading goes here. H1 Heading goes here. H1 Heading goes here.

Override the global Heading styles such as size, line height and weight in Appearance > Customize > Typography > Post H1

H2 Heading goes here. H2 Heading goes here. H2 Heading goes here.

Override the global Heading styles such as size, line height and weight in Appearance > Customize > Typography > Post H2

H3 Heading goes here. H3 Heading goes here. H3 Heading goes here.

Override the global Heading styles such as size, line height and weight in Appearance > Customize > Typography > Post H3

H4 Heading goes here. H4 Heading goes here. H4 Heading goes here.

Override the global Heading styles such as size, line height and weight in Appearance > Customize > Typography > Post H4

Brand Files

Widget Header

[contact-form-7 id=”5″]

Type Samples

This is a text block with a Drop Cap. It uses the “Extra class name “has-drop-cap”. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Links

Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text.

Blockquote