B&M TRADING

style guide
TABLE OF CONTENTS

logo 03

type 04

colors 05

buttons + icons 06

ui elements 07 + 08
LOGO
B&M Trading is a small business that was created out of a
love for diecast vehicles, games and toys. So naturally we
decided to create a logo that was light and fun. As you can
see, there are many varieties of this new logo, but the main
element we’d like the company to be recognized by is the
paper plane. B&M TRADING

B&M TRADING

B&M
03
TYPE
We’ll use the following type hierarchy as a guide to set type in the layout on the website. Following this style will
ensure a consistent look throughout all B&M Trading communications.

HEADER

GLACIAL INDIFFERENCE BOLD - 40 PT

SUB HEADER
Glacial Indifference Italic – 28 PT
BODY COPY
Glacial Indifference Regular – 18 PT

04
 COLORS
These are the colors that represent B&M Trading and their brand. Using these will ensure consistency and
will also allow B&M’s brand to be more recognizable. The way these colors are used on the website are as
follows:

#253140 #F7941E #FCFCFC

This color will primarily be used
as our header/footer
background and as the font
color. It’ll also be used
interchangeably in the logo.
This orange will mainly be used
in the logo and in some
secondary, small elements.
We recognize the importance
of white space and how it can
be used to our benefit. We’ll
use white to compliment our
logo and ensure to use it
between elements. 05
BUTTONS + ICONS
BUTTONS DROP DOWN MENU

ICONS - SOCIAL ICONS - GENERAL All these buttons on the website have a
clean-cut look to go along with our
logo. We went with the rounded edges
to make each element look less harsh.
It’s imperative this stays consistent
throughout the site.

06
 UI ELEMENTS
NAV BAR NAV BAR - HOVER

When hovered over, all buttons will change color. More examples:

07
UI ELEMENTS cont.
CONTACT FORM

SOCIAL MEDIA LINKS

Users will be able to use this to leave the site

and explore more of the company’s content.

This will allow users to contact B&M with ease.

08