B-Yond Website Brand & Layout Guidelines

I created this section so that you can easily reference B-Yond's brand guidelines and how we implement them on the website.


Contents:

  • B-Yond Brand Guidelines

  • B-Yond Website Guidelines

  • Font guidelines

  • Card layouts

  • Gradient line size standards

  • Video - How to implement your brand elements on your site.

 

B-YOND BRAND GUIDELINES

B-YOND - Brand guidelines - 16122020 - V1
.pdf
Download PDF • 1.35MB



 


WEBSITE BRAND GUIDELINES



Fonts

Font Style for Headings:

  • Avenir Light | Gray: #7f7f7f

  • Avenir | Black: #0000


Font Sizes


Desktop

  • Hero Headings: 50

  • Section Headings: 40

  • Paragraph: 18



Mobile

  • Hero Headings: 26

  • Section Headings: 24

  • Paragraph: 16


 

Card Layouts

 
Gradient Line Sizes

Desktop:
  • Hero line: 70px x 8px

  • Heading line: 45px x 6px

  • Card line: 45px x 6px

Mobile:
  • Hero line: 50px x 7px

  • Heading line: 44px x 6px

  • Card line: 24px x 6px


 
In this video, I review B-Yond's brand elements usage and how to resize the gradient lines.