style guide

Colour Palette

Brand colours
Brand 01
#D93B20
Brand 02
#0072BC
Brand 03
#0A2435
Text colours
Text 01
#b2cc55
Text 02
#b2cc55
text 03
#bcd36a
text 04
#c8da86
UI colours
ui 01
#404040
ui 02
#484848
ui 03
#fafafa
ui 04
#ffffff
u
‍#ffffff
ui 06
#ffffff
u
‍#ffffff
Support
Support info
#404040
Support sucess
#484848
support error
#fafafa
support warning
#ffffff

Typography

heading style

Proxima-soft

This is Headline 1

Heading 01

font size: 48px • character spacing: normal • line height: 48px

This is Headline 2

Heading 02

font size: 32px • character spacing: 0.5 • line height: 39px

This is Headline 3

HEADLINE 03

font size: 24px • character spacing: 0.5 • line height: 29px

This is Headline 4

HEADLINE 04

font size: 18px • character spacing: 0.5 • line height: 27px

This is Headline 5

HEADLINE 05

FONT SIZE: 14PX • CHARACTER SPACING: 2 • LINE HEIGHT: 24PX

This is Headline 6

HEADLINE 06

font size: 14px • character spacing: 2 • line height: 24px

body style

Proxima-soft

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph

FONT SIZE: 16PX • CHARACTER SPACING: 0 • LINE HEIGHT: 24PX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

small paragraph

FONT SIZE: 14PX • CHARACTER SPACING: 0 • LINE HEIGHT: 21PX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

SubHeading

FONT SIZE: 14PX • CHARACTER SPACING: 0 • LINE HEIGHT: 21PX

Text Link

FONT SIZE: 12PX • CHARACTER SPACING: 0.5 • LINE HEIGHT: 21PX

subhead link

FONT SIZE: 12PX • CHARACTER SPACING: 0.5 • LINE HEIGHT: 21PX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Small- Semibold

FONT SIZE: 12PX • CHARACTER SPACING: 0.5 • LINE HEIGHT: 21PX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Caption

FONT SIZE: 12PX • CHARACTER SPACING: 0.5 • LINE HEIGHT: 21PX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text

FONT SIZE: 12PX • CHARACTER SPACING: 0.5 • LINE HEIGHT: 21PX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

LABEL

FONT SIZE: 12PX • CHARACTER SPACING: 0.5 • LINE HEIGHT: 21PX

Forms & Buttons

form elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
default buttons
Button Text

solid button

Button Text

outline button

TEXT BUTTON

text button

reversed buttons
Button Text

solid button

Button Text

outline button

TEXT BUTTON

text button

buttons with icon
TEXT BUTTON

Icon Right

TEXT BUTTON

Icon Left

Icons

Icon set

Icons are supplied in 64×64 dimension in pixel perfect form to ensure proper scaling and usability in every screen sizes.

Imagery

do's

Top view shot of sample products

Images that represents the company

dont's

Eye level shot of sample products

Cliché and staged stock photos

Grids

getting started

Columns need to be nested within  a row and a direct child of a container.  All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.

col
col
col
col
col
col
col
col
col
col
remove gutters

To remove all padding from columns, use the no-gutters class preceded by the initial class of col.

 no-gutters
no-gutters
no-gutters
no-gutters
full width container

Define your div with a class of container-fluid for full width.

col
col
col
col
grid - desktop

To define our 12 column grid, all classes must precede with the initial class of col

col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-12
grid - tablet

Defining our tablet breakpoints, all classes must precede with the class of col and if defined, your desktop class of col-(1-12)

col-m-1
col-m-11
col-m-2
col-m-10
col-m-3
col-m-9
col-m-4
col-m-8
col-m-5
col-m-7
col-m-6
col-m-6
col-m-12
grid - mobile landscape

Defining our mobile landscape breakpoints, all classes must precede with the class of col and if defined, your desktop and tablet classes of col-(1-12)

col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12
grid - mobile portrait

Defining our mobile portrait breakpoints, all classes must precede with the class of col and if defined, your desktop and tablet classes of col-(1-12)

col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12
column wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

col-4
col-8
col-6
col-6
col-3
col-2
col-7
vertical alignment - start

To align columns from the top, combine a class of  align-start preceded by the class of row

align-start
align-start
align-start
vertical alignment - center

To align columns from the top, combine a class of  align-center preceded by the class of row

align-center
align-center
align-center
vertical alignment - end

To align columns from the top, combine a class of  align-end preceded by the class of row

align-end
align-end
align-end
horizontal alignment - start

To align columns from the left, combine a class of  justify-start preceded by the by class of row

justify-start
justify-start
horizontal alignment - center

To align columns from the left, combine a class of  justify-center preceded by the by class of row

justify-center
justify-center
horizontal alignment - end

To align columns from the left, combine a class of  justify-end preceded by the by class of row

justify-end
justify-end
horizontal alignment - between

To align columns from the left, combine a class of  justify-between preceded by the by class of row

justify-between
justify-between
self-align columns

To individually self-align columns, combine a class of  self-start, self-center, self-end preceded by the by class of col

self-start
self-center
self-end
column reordering

To individually reorder columns, combine a class of either order-first, order-last, preceded by the by class of col

order-last
order-first