This style guide outlines the main styles on https://www.truckman.co.uk.

This guide is to be used as a reference for amending the theme in Magento 2. Due to various factors it may not be possible to preserve the exact style when moving to Magento 2.

Typography

Fonts

The fonts used on the site

Roboto Condensed

This font is hosted on https://fonts.googleapis.com/css?family=Roboto+Condensed.
For a full sample https://fonts.google.com/specimen/Roboto+Condensed

This font is used for Headings, Buttons, prices and tabs.

abcdefghijklmnopqrstuvwxyz.,:;
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
£ $ € 99.99

Lato

This font is hosted on https://fonts.googleapis.com/css?family=Lato.
For a full sample https://fonts.google.com/specimen/Lato

This font is the default for Body text.

abcdefghijklmnopqrstuvwxyz.,:;
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Headings

Example headings and sizes. Headings are Dark Grey (#333333).

H1. This is a sample heading 1 28px

H2. This is a sample heading 2 22px

H3. This is a sample heading 3 18px

H4. This is a sample heading 4 16px

H5. This is a sample heading 5 15px

H6. This is a sample heading 6 14px

Paragraphs

The default font size is 14px and the colour is Grey (#666666).

Etiam mi odio, egestas et diam in, ullamcorper pulvinar lacus. Morbi eu velit pharetra, condimentum velit et, condimentum lectus. Donec ultrices erat ut neque pretium eleifend. Vestibulum porta erat at metus aliquam, sed.

pellentesque ligula imperdiet. Aenean neque ante, ultrices vel leo nec, molestie tincidunt felis. Aliquam ornare ut libero ut rutrum. Quisque dolor ante, auctor maximus bibendum at, sollicitudin a ante. Fusce lorem magna, ultrices eu dui at, tincidunt euismod justo. Integer quis justo condimentum lectus sodales pharetra maximus non erat. Proin ac purus molestie risus fermentum dignissim.

Colours

The colours used on the site.

Primary Colours

Truckman Red / Primary
#e2231a

Main brand colour.

Supporting Colours

Dark Grey
#333333

e.g. Heading Colour.

Grey
#666666

e.g. Body Text colour.

Lighter Grey
#b2b2b2

e.g. Sku on PDP

Very Light Grey
#d1d1d1

Border bottom on Buttons

Lightest Grey
#f3f3f3

Page element backgrounds

Semantic Colours

These colours are used to convey messages such as Success, Warning, Information & Error. This conforms with common web best practices. To avoid confusion, these colours will not be used in any other contexts.

Success
#13a600

Success e.g. Passes validation

Warning
#feb900

Warning e.g. Low stock

Information
#1f7bc9

Information e.g. Highlights an active tab.

Error - Red
#cb2245

Error e.g. form validation.

Tables

Column 1	Column 2	Column 3	Column 4	Column 5
One	Two	Three	Four	Five
One	Two	Three	Four	Five
One	Two	Three	Four	Five
One	Two	Three	Four	Five

Lists

Unordered List

Apple
Orange
Banana
Pear

Ordered List

Apple
Orange
Banana
Pear

Links

Example link

A link in its default state Example Link

A link when hovered Example Link

Buttons

Example Buttons

This is a standard button This is a standard button in the disabled state this is 20% lighter (#ef7973).

This is a big button This is a big button in the disabled state this is 20% lighter (#ef7973).

Supporting Imagery And 3rd Party Services

Any supporting imagery or 3rd party services which can be customised should use the Truckman Red / Priamry branding colour (#E2231A).

Example Review Stars

2.3 out of 5

4.6 out of 5