Typography

Font Families

Prompt (Default, Light 300)

Playfair Display (Regular 400)

Appearance

Prompt Light 300

Prompt Regular 400

Prompt Medium 500

Prompt SemiBold 600

Playfair Display Regular 400

Headings

Prompt H1

Prompt H2

Prompt H3
uses: section title, faq questions

Prompt H4

Prompt H5
Prompt H6

Playfair Display H1
uses: site title

Playfair Display H2
uses: page title

Playfair Display H3

Playfair Display H4

Playfair Display H5
Playfair Display H6

Font Size

Giant – 64

Huge – 48

Extra Large – 40

Large -36

Medium – 24

Default

Body – 16

Small -14

Extra Small -10

Suggested Color Palette

Primary #4B9015

Secondary #A6CF86

White Transparent – Opacity 92%

Black Transparent – Opacity 60%

White #FFFFFF

White Smoke #F5F5F5

Black #000000

Grayish Black #282828

Grayish Mauve #857E80

Medium Oat #D2c5A0

Light Oat #EBE8DE

Helper Classes

Layer Order

Overlaps row
0: bottom – 5: top

layer-order-0

layer-order-1

layer-order-2

layer-order-3

layer-order-4

layer-order-5

Order

reverse-order-mobile
reverses the order of the columns for mobile

Borders

  • has-left-border
    adds a border to the left of the item
  • has-left-border-desktop
    adds a border to the left of the item from the desktop display
  • has-left-border-mobile
    adds a border to the left of the item from the mobile display
  • has-right-border
    adds a border to the right of the item
  • has-right-border-desktop
    adds a border to the right of the item from the desktop display
  • has-right-border-mobile
    adds a border to the right of the item from the mobile display

Margins

  • margin-top-small-desktop
    adds a border to the left of the item
  • margin-top-small-mobile
    adds a border to the left of the item from the desktop display
  • margin-top-medium-desktop
    adds a border to the left of the item from the mobile display
  • margin-top-medium-mobile
    adds a border to the left of the item from the mobile display
  • margin-top-large-desktop
    adds a border to the left of the item from the mobile display
  • margin-top-large-mobile
    adds a border to the left of the item from the mobile display
  • margin-bottom-small-desktop
    adds a border to the left of the item
  • margin-bottom-small-mobile
    adds a border to the left of the item from the desktop display
  • margin-bottom-medium-desktop
    adds a border to the left of the item from the mobile display
  • margin-bottom-medium-mobile
    adds a border to the left of the item from the mobile display
  • margin-bottom-large-desktop
    adds a border to the left of the item from the mobile display
  • margin-bottom-large-mobile
    adds a border to the left of the item from the mobile display

Visibility

  • hide
    hides an item
  • hide-desktop
    hides an item from the desktop display
  • hide-mobile
    hides an item from a mobile display
  • show
    shows an item
  • show-desktop
    shows an item from the desktop display
  • show-mobile
    shows an item from a mobile display

Drop Shadow

Adds a drop shadow to a grouped item

has-drop-shadow

Example:

We were so happy to host our event at Woodend. The setting was perfect and peaceful, and we received so many compliments from guests about how lovely the venue was.

Blockquote

Adds double quotation marks to the start and the end of the blockquote block

is-client-quote or quote

Example:

We were so happy to host our event at Woodend. The setting was perfect and peaceful, and we received so many compliments from guests about how lovely the venue was.