(604) 723-3206 info@westmount-electrical.ca

Website Theme + Style Guide

Colour Palette

Teal
#4f8693

Dark Blue
#748e9e

Light Blue
#8ca7ba

Brand Logo
#508694

Brand Logo
#7b838b

Typography: Font Pairing

Default Font: Lato

Font size: 14px
Font line height: default
Font weight: 400 (normal)

Managed in Appearance > Customize > Typography > Body

Heading Font: Lato

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

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
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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Bulleted List Example
  • List 1
  • List 2
    • Sub List 1
    • Sub List 2
    • Sub List 3
  • List 3
  • List 4
Call to Action
Back To Top