styleguide-hero

STOREMASTA® Style guide

Last Updated: September 14, 2018

This style guide is a byproduct of the recent website redesign of STOREMASTA®. By documenting and assembling a reference page of the website style, we are able to ensure consistency and high standards of delivery are kept when making changes.

This guide serves as a learning tool and a compass to aid in creating design solutions. As design elements are created and adjusted this guide will evolve accordingly, acting as a living resource to uphold the STOREMASTA® online presence.

storemasta-1
storemasta-2
storemasta-3
storemasta-4

STM Red

#D12229

Background Grey

#F3F3F3

Charcoal One

#282828

Charcoal Two

#202122

Text Grey

#8B8B8B

Line Break Grey

#DADADA

Below is a list of the fonts and sizing used across the site. When creating new modules, careful consideration should be take when deviating from these sizes.

Deviation from these text styles will prolong development time and hinder the continuity of the STOREMASTA® brand.

Primary Typefaces

Usual Regular
Usual Medium
Usual Bold

Font Sizes

display-1
50px

Display one

h1
36px

Heading One

h2
30px

Heading Two

h3
23px

Heading Three

h4
23px

Heading Four

h5
16px
Heading Five
h6
12px
Heading Six
p
16px

Paragraph Copy

Below are examples of imagery that has been across the site. For hero imagery, presenting STOREMASTA® as an Australian made and high quality product is key. In some circumstances, related images to a particular topic or industry can be used.

Images in the hero should always be in black and white with a light drop in contrast to soften the image. On the blog, full colour images can be used in the hero.

Where possible, product images should always be of high image quality with little pixelation. Products should always be cut out on a white background, unless the particular module has products in a real scenario (visual consistency is key).

Hero Imagery

DSCF9689
DSCF9694

Example of inconsistent product imagery (Success Stories Module)

Screen_Shot_2018-09-07_at_2.04.34_pm
Screen_Shot_2018-09-07_at_2.04.47_pm

Icons should always be distinctly related to the subheading, this helps users scan web content and land on areas of interest. Icons should be bold and when creating should avoid using outlines or thin elements.

50 x 50 Red Square

icon-checklist
icon-finity
icon-spanner
icon-world
icon-diamond
icon-lightbulb
icon-search
icon-certified
icon-protect
icon-australia
icon-work

50 x 50 Transparent Square

icon-checklist-0
icon-infinity-0
icon-spanner-0
icon-world-0
icon-diamond-0
icon-lightbulb-0
icon-search-0
icon-certified-0
icon-protect-0
icon-australia-0
icon-worker-0

The two primary button styles can be used interchangeably depending on the what creates the most visual harmony. An icon can sometimes replace the arrow, however this should be done sparingly. The secondary button should be reserved  for below inputs as seen in the forms.

Primary Solid Buttons

Primary Outline Buttons

Secondary Button

Team Slider

aaron-1
Aaron Caratello

National Field Specialist

braden-1
Braden Urquhart

Sales Consultant

caleb-1
Caleb Urquhart

CEO

david-1
David Urquhart
Director
emmalene
Emmalene Selby

Customer Service Manager

gen
Gen Briggs

Customer Service

jordan-1
Jordan Myhill

Sales Consultant

joseph-1
Joseph Mckinnon

National Field Specialist

khan
Khan Riley

Customer Service

lincoln-1
Lincoln Penhall

Special Project Manager

matthew
Mathew Kenney

Design and Engineering

michelle
Michelle Rose

Accounts Manager

rachel
Rachel Cunningham

Sales Consultant

ronald-1
Ronald Harris

Sales Consultant

Fill out the form below and one of our consultants will be in touch within the next 24 hours.