Style Guide

Logo

The logo is available in 3 formats:

Use the logo version best suited to the available space.

Minimum clear space around the logo:

25% of the total logo width.

Minimum size: 

Stacked:

18 pixels wide/0.25 inch wide/0.635 centimeter wide.

 

Horizontal:

18 pixels wide/0.25 inch wide/0.635 centimeter wide.

Stacked
Horizontal
Inverted on black
Inverted on red

Display the logo and/or icon in any colour that strongly contrasts with the background colour.

Icon
BME site icon 512

The icon is designed for use as a Favicon, social media icon or watermark.

Use the icon when the logo is to appear in perfectly square or round space of limited size (e.g. Twitter, Browser Tab, etc).

Don’t:

  • Alter the logo elements in any way
  • Apply effects or patterns to the logo
  • Stretch or alter the proportions of the logo
Logo usage
No tagline
Single colour

Display the logo and/or icon in any colour that strongly contrasts with the background colour.

Minimum size: 
Stacked:
18 pixels wide/0.25 inch wide/0.635 centimeter wide.

Horizontal:
18 pixels wide/0.25 inch wide/0.635 centimeter wide.

Minimum clear space around the logo:
25% of the total logo width.

Branch logos
BME USA with padding png
BME USA icon
Colour BME Mining Canada512 px
No tagline
Partnership logos
Consbec.png
Single colour

Typography

Typography expresses hierarchy and brand presence.

Font Syles

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body Copy

Usage Example

h1 Pizza Recipe

h2 Ingredients

h3 Ingredients for the base

Body Copy

  • 4 ½ cups flour
  • a pinch fine sea salt
  • 1 packet instant yeast
  • ½ T caster sugar
  • 2 T extra virgin olive oil
  • 375 ml warm water

h3 Ingredients for the toppings

h2 Instructions

h3 Preperation

h3 Cooking

Accent Colours

Accent Colors change the default style for LinksButton backgroundsTab and Accordion headings, and Badges.

 

Theme colours

Primary

#BD2C26

Secondary

#4C4C4C

Extended palette

#191919

#4c4c4c

#7f7f7f

#cccccc

#333333

#666666

#b2b2b2

#e5e5e5

Accordions

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Tabs

Links

Buttons

Icons

Icons are useful because images can communicate an idea faster than text, they give context to your message and they can help overcome language barriers.

Consistency, as with everything, is key. When adding icons, avoid mixing and matching icons with very different styles or variations in line-thickness, and avoid mixing Line and Solid icons.

It is important that your icon matches your message. Don’t use an icon if it doesn’t enhance the message being communicated!

Line

Solid

Default

Stacked

Framed

De-clutter: Leave lots of white space – keep it practical and clean.

Label fields clearly: Keep the field close to it’s label to avoid any confusion.

Try to keep things optional: Name, Surname and email should be the only required fields.

Test responsiveness: Ensure it’s easy to complete on any device.

Go with the flow: The design should visually guide the users – from completing details to submission!

Partners

Colour Mining Canada512 px
Consbec.png

Toll free:
888 511-6128

BME USA Branch
323 Orleans Rd
Office 6
North Chatham, MA 02650
USA

© 2020 OMNIA Group. All rights reserved.

All rights reserved.