FE Styleguide

Primary Colours

$primary $brand-primary $brand-blue #1E1E32
Accent $secondary $brand-teal #00E6C8
$brand-navy #373755
$brand-blue-grey #879BC8
White $brand-white #FFF

Background Colours

$brand-teal-light #DFFAF7
$brand-blue-light #EEF0F6
$brand-navy-ligh #DDDDE0
$brand-grey-light #E1E1E5

Notification Colours

$brand-success $brand-teal
$brand-invalid #FC7988

Text Styles

Heading 1

  • Family: Museo Sans
  • Weight: Bold (700)
  • Desktop
  • Size: 45px
  • Line Height: 53px
  • Mobile
  • Size: 35px
  • Line Height: 43px

Heading 1

Heading 2

  • Family: Museo Sans
  • Weight: Bold (700)
  • Desktop
  • Size: 35px
  • Line Height: 43px
  • Mobile
  • Size: 31px
  • Line Height: 39px

Heading 2

Heading 3

  • Family: Museo Sans
  • Weight: Bold (700)
  • Desktop
  • Size: 31px
  • Line Height: 39px
  • Mobile
  • Size: 25px
  • Line Height: 33px

Heading 3

Heading 4

  • Family: Museo Sans
  • Weight: Bold (700)
  • Desktop
  • Size: 25px
  • Line Height: 33px
  • Mobile
  • Size: 28px
  • Line Height: 24px

Heading 4

Heading 5

  • Family: Museo Sans
  • Weight: Bold (700)
  • Desktop
  • Size: 20px
  • Line Height: 28px
  • Mobile
  • Size: 18px
  • Line Height: 28px
Heading 5

Heading 6

  • Family: Museo Sans
  • Weight: Bold (700)
  • Desktop
  • Size: 20px
  • Line Height: 28px
  • Mobile
  • Size: 18px
  • Line Height: 28px
Heading 6

Paragraph

  • Family: Museo Sans
  • Weight: Regular (300)
  • Desktop
  • Size: 18px
  • Line Height: 28px
  • Mobile
  • Size: 18px
  • Line Height: 28px

Paragraph

Paragraph - Bold

  • Family: Museo Sans
  • Weight: Bold (700)
  • Desktop
  • Size: 18px
  • Line Height: 28px
  • Mobile
  • Size: 18px
  • Line Height: 28px

Paragraph - Bold

Button Text

  • Family: Museo Sans
  • Weight: Bold (700)
  • Size: 18px
  • Line Height: 28px

Button Text

Flexible content section with background colour

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque si Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu era.

  • Unordered list item
  • List item
  • Unordered list item with more text to see how it wraps. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue praesent dapibus, neque id cursus faucibus, tortor neque egestas augue
  • Another unordered list item
  • Another list item

Donec eu libero sit amet quam semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque si Ut felis.

  1. Ordered list item 1
  2. List item
  3. Ordered list item with more text to see how it wraps. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue praesent dapibus, neque id cursus faucibus, tortor neque egestas augue
  4. Another Ordered list item
  5. Another list item

Donec eu libero sit amet quam. I am a link Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque si Ut felis. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque si Ut felis.

Blockquote example aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque si Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu era.

-Author Name, Publication Name
Month Savings Another Column
January £100 More information
February £200 More information
March £300 More information

Buttons and link examples

links

I am a link
I am a external link
I am a external link with a very long long text for test
I am a link
I'm an external link
I'm an external link with a very long text for test

Filter buttons btn-link--transparent

Buttons and link examples blue background

links

I am a link
I am a external link
I am a link
I'm an external link
I'm an external link with a very long text for test

Filter buttons btn-link--transparent

Gravity Forms example

Contact

"*" indicates required fields

Name*
Email*
Please let us know what's on your mind. Have a question for us? Ask away.
This field is for validation purposes and should be left unchanged.

contact-info component

Lorem ipsum dolor sit amet consectetur. Id nunc odio amet vitae congue vitae. Dis quis metus bibendum morbi ipsum.

News Cards

Events Cards

Members Cards

Team Cards

Icomoon icon

  • .icon-calendar
  • .icon-clock
  • .icon-web
  • .icon-partner
  • .icon-sector
  • .icon-location-map
  • .icon-search-mag
  • .icon-chevron-down
  • .icon-external
  • .icon-check
  • .icon-close
  • .icon-twitter
  • .icon-linkedin
  • .icon-facebook
  • .icon-right-arrow
  • .icon-left-arrow