Before you start...

Please do not make any changes to the site  (even simple text ones), before you have:

Page dimensions

  • Desktop:
  • Full width inc margins - 1370 pixels
  • Full width excluding margins - 1130 (note this is where text would start and stop - there is module margin to the left and right of this)
  • Full width Margins - 70 each side - defined by global row margins so top, bottom, left and right all equal 70)

Tablet (Portrait ipad, landscape behaves as desktop)

  • breakpoint: 992px
  • margins (set by global row margins): 15px each side

Mobile

  • breakpoint: 767px (Just below below portrait ipad of 768)

Danielle is designing to subtlely different scales so the site will not be a pixel perfect version of XDs

image (8)
image (9)

Row padding and column margins

Second row (column 1)

Second row (column2)

A second column layer - not a row (although added by adding a row within the row!)

A third row (single column like the first)

A fourth row (column 1)

Text area beneath the header

Fourth row (column 2)

Text area beneath the right hand header

@austin - why do the two column rows not align to the edge on mobile?

Columns (light grey area above) are contained within rows (the dark grey areas above show the row going into the margins).

Note the beaver builder editor (row settings > advanced tab) suggests the default mobile and tablet padding is 0, not the 20 it actually appears to be.

Row margins

BB only allows us to set one row margin that applies to all (top, bottom, left and right).  They have been set to 20px. However the style guidelines dictate that the top margin should be 80px. As such when creating rows* from scratch (as oppossed to using  saved rows or templates) the top margin needs to be manually set to 80px.

*not rows within rows which aren't techncially rows 🙂

  • Desktop:
    • Top: 70px
    • Bottom: 70px
  • Tablet:
    • Top: 15px (*need to be manually set to 60 for each row)
    • Right: 15px
    • Bottom: 15px (*need to be manually set to 60 for each row)
    • Left: 15px
  • Mobile:
    • Top: 0px (*need to be manually set to 40 for each row)
    • Right: 0px
    • Bottom: 0px (*need to be manually set to 40 for each row)
    • Left: 0px

For reference row margins (top and bottom) increase the space between rows and the edge of the page margin (right and left)

Column margins and padding

  • Desktop:
    • Top: 0px
    • Right: 0px
    • Bottom: 0px
    • Left: 0px
  • Tablet:
    • Top: 0px
    • Right: 0px
    • Bottom: 0px
    • Left: 0px
  • Mobile:
    • Top: 0px
    • Right: 0px
    • Bottom: 0px
    • Left: 0px

Module Margins

  • Desktop:
    • Top: 10px
    • Right: 10px
    • Bottom: 10px
    • Left: 10px
  • Tablet (note: BB global settings suggest they could be zero - they inherit from desktop):
    • Top: 10px
      Right: 10px
      Bottom: 10px
      Left: 10px
  • Mobile (note: BB global settings suggest they could be zero - they inherit from desktop) :
    • Top: 10px (*need to be manually set to 0 for text and header modules directly beneath other text or header modules)
      Right: 10px
      Bottom: 10px (*need to be manually set to 0 for text and header modules directly above other text or header modules)
      Left: 10px

Headings

Austin - I haven't checked all of these headings but suspect some are out a bit (e.g. heading 5 is 17px on mobile by the looks of things?

Heading 1 - Desktop 53px, Mobile 36px

A top section sub header (a saved module). 36px/25px

Heading 2 - Desktop 43px, Mobile 30px

Heading 3 - Desktop 34px, Mobile 24px

Heading 4 - Desktop 24px, Mobile 21px

Heading 5 - Desktop 21px, Mobile 18px
Heading 6 - Desktop 18px, Mobile 16px

All headings:

  • Colour: #323232
  • Line height: 1.5 (i.e. 1.5 x height of the font)
  • margin-bottom: 16px
  • font-weight: semi-bold
  • font-family: 'Inter'

Paragraphs

Large Paragraph - Desktop 21px, Mobile 19px

Default para - Desktop 18px, Mobile 18px

Micro Text - Desktop 16px, Mobile 14px

Hero para text - Desktop 21px, Mobile 19px - Danielle is there a heavier weight to this? If so please specify. (I haven't used one so far, however we can update if we use in a new template)

All paragraphs:

  • Colour: #424242
  • Line height: 1.3 (i.e. 1.3 x height of the font)
  • margin-bottom: 20px
  • font-weight: Light
  • font-family: 'Inter'

Text Edits

Links

Unvisted and visited link format is underlined

Hover format is underlined and medium weight.

See here for design spec.

  • Bullet point
  • Bullet point
  • Indented bullet point (Unable to show this Austin do you know how?)

Danielle do you envisage that all bulleted lists will be bold text?  Short bullets will be bold yes, if the copy is really long and it looks over welming we can switch to medium, It is hard to decide yet without seeing in context. Is there a template with agreed copy that has this that I I can design next?

  1. Numbered list - short
  2. Numbered list
  3. Numbered List

Below is how I would want a longer text numbered list to appear. I couldn't create in BB. All text is 18px Desktop, 16px Mobile. Main copy medium weight, Number is bold. Line height desktop 28px, mobile 26px. I would like 40px between number 1 copy and number 2. If possible 25px between number and copy on the right. Does this make sense?

List

Icons

Choose from Font Awesome 5 Solid

  • Colour: #ABABAB
  • Hover Colour: #424242
  • Standard Size: 36px

 

Partner and client logos

  • Single Colour: #ABABAB
  • Hover Colour: #424242 Or could we have the capability to change to the coloured version of the logo?
  • Standard Size Partner logos: Width approx 230px, height approx 50px (However this needs to be assessed logo by logo)
  • Standard Size Client logos: Height 40px max
Hubspot-logo
PLO-logo
Verdant-logo

Forms

Defined by Hubspot. Use the Hubspot form Saved Row.

CTAs

Main calls to actionshould appear like links, style below and have an arrow at the end of copy.

  • Colour: #323232
  • Hover Colour: #323232
  • Hover effect: See CTA https://www.squarespace.com/ (Underline disappears and arrow shifts forward)
  • Text Size: 21px Desktop, 19px Mobile
  • font-weight: semi-bold
  • font-family: 'Inter'

Greyscale photos

Summary

  • Human and upbeat emotions
  • Greyscale
  • less than 30% straight edges
  • need to blend into the background (use png for invisible background)
  • can include the page's artwork blended in

Subject matter

We aspire to upbeat, positive and very human imagery that projects people benefiting from our work in some way (clients, team, end customers or partners)

Human rather than objects where-ever practical.

Client or Attacat imagery preferred to stock.

Technical

No colour!  The only colour should be the injected artwork.

All photos should be made grey scale using Photoshops Greyscale functionality and brightness/contrast tweaked accordingly.

To minimise the rectilinear aspects of the site, images should have backgrounds that blend into the site background. This will also help highlight the subject matter.

Where the subject matter does extend to the edge of the image, this should not be blurred so we need to choose images where the subject matter only reaches some of the edge or edges, not most or all the edges.

Combining with artwork

If adding artwork to the imagery, ideally it should feel like it’s part of the image rather than just added to it. The viewer (with an abstract lens) should be able to see what the art is, at least when pointed out e.g in the below the artwork could be seen as trees and a river. In the baby photo the art could be a fly that the baby is trying to turn to see.

 

Case study flyer template (text right) (1)
Copy of Case study flyer template (text right) - baby test (1)