skip to Main Content

Design Grid: Layout Specifications

Desktop
  • Default Layout1140px Design Grid
    (header/footer, generic content, blog pages, 3-column grids)
    • 3 x 360px design columns
    • 30px gutters
  • Wide LayoutCSS 1440 Grid
    (wider home page content, 4-column grids for product listings etc)
    • 4 x 330px columns
    • 30px gutters
Mobile Devices

Colour Palette

Kournikova
#fdcb22

Conifer
#a6cf44

Elf Green
#198771

Scooter
#0888b0

Air Force Blue
#6192a8

Nile Blue
#123a5b

Schedule Colour Palette

Light Blue
#cadee9
[schedule]

Light Yellow
#fcf2b5
[schedule]

Light Green
#c8ded7
[schedule]

Light Pink
#e2d7e2
[schedule]

Lime Green
#e7f3c4
[schedule]

Light Grey
#e1e1e1
[schedule]

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

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





    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

    Heading Font: Nunito Sans. H1 Page Title looks like this

    Post H2 heading text looks like this heading text looks like this

    Post H3 heading text looks like this heading text looks like this

    Post H4 heading text looks like this heading text looks like this

    Call to Action

    Body font: Nunito Sans. This is a link.
    Managed in Customizing > Typography > General
    Font size: 1.25em.
    Managed in Customizing > Typography > Post Content

    Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec3 ullamcorper2 mattis, pulvinar dapibus leo.

    Blockquote

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

    Colour Palette (corrected from original vendor HEX conversions)

    Kournikova

    RGB: 253.203.34
    HEX: #fdcb22

    Conifer

    RGB: 166.207.68
    HEX: #a6cf44

    Elf Green

    RGB: 25.135.113
    HEX: #198771

    Scooter

    RGB: 29.138.175
    HEX: #0888b0

    Air Force Blue

    RGB: 97.146.168
    HEX: #6192a8

    Nile Blue

    RGB: 18.58.91
    HEX: #123a5b

    Form





      Bulleted List - bullets can be changed
      • List 1
      • List 2
        • Sub List 1
        • Sub List 2
        • Sub List 3
      • List 3
      • List 4
      • List 1
      • List 2
        • Sub List 1
        • Sub List 2
        • Sub List 3
      • List 3
      • List 4

      Tables

      Table Header 1 Table Header 2 Table Header 3
      Division 1 Division 2 Division 3
      Division 1 Division 2 Division 3
      Division 1 Division 2 Division 3
      Table Header 1 Table Header 2 Table Header 3
      Division 1 Division 2 Division 3
      Division 1 Division 2 Division 3
      Division 1 Division 2 Division 3

      To remove the banding add a class of “ruled” to your table

      Back To Top