B-Yond Website Brand & Layout Guidelines
May 19, 2022
1 min read
Updated: May 19, 2022
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
WEBSITE BRAND GUIDELINES
Fonts
Font Style for Headings:
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