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

Desktop: Hero Heading - 50

Desktop: Section Headings - 40

Desktop: Paragraph - 18

Mobile

• Hero Headings: 26

• Section Headings: 24

• Paragraph: 16

Mobile: Hero Heading - 26

Mobile: Section Headings - 24

Mobile: 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.