Typography
Visual impact takes many forms and in this case, it’s our type fonts. This is another way we build consistency and awareness for our brand, letter by letter. Heavy, bold, light, italic, book style – all the fonts are here in one place.
Font Family
Primary Web Font
BSG’s primary typeface, Verdana, can be used when a Windows-safe font is needed. This typeface is meant to functionally complement our brand to ensure strong brand cohesion.
Headings
All HTML headings, <h1> through <h6> are available.
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
HTML
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
Body Copy
This is a sample paragraph. mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
<p>This is a sample paragraph. mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>Hyperlinks
Ancher Text Links use HEX #3865e0
Text Transform
lowercased text.
UPPERCASED TEXT.
Capitalized Text.
<p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p>Brand Colors
Color is one of the primary ways we set our brand apart. This palette gives us our personality, character and style. We want to own these particular colors for all our communication materials. There’s a range of colors that can be used online or in print to create different expressions of our brand.
Primary Colors
BSG Primary Blue
BSG Orange
BSG Light Blue
BSG Grey
Buttons
Button tags
Use the button classes on <submit>, <button>, or <input> element.
HTML
<button class="btn btn-primary-site">Click Here</button>
<button class="btn btn-light">Click Here</button>
Breadcrumbs
Example