Leekes Style Guide

Colour Pallete

Primary Colour

colour code:#000000

.bkg-full-black

.c-full-black

@c-full-black

Neutral Swatches

colour code:#000000

.bkg-full-black

.c-full-black

@c-full-black

colour code:#2C2C2C

.bkg-black

.c-black

@c-black

colour code:#666666

.bkg-darkergray

.c-darkergray

@c-darkergray

colour code:#757575

.bkg-darkgray

.c-darkgray

@c-darkgray

colour code:#9B9A9A

.bkg-midgray3

.c-midgray3

@c-midgray3

colour code:#B2B2B2

.bkg-midgray2b

.c-midgray2b

@c-midgray2b

colour code:#D1D1D1

.bkg-midgray2

.c-midgray2

@c-midgray2

colour code:#F2F2F2

.bkg-midgray

.c-midgray

@c-midgray

colour code:#FFFFFF

.bkg-white

.c-white

@c-white

Sales Red

colour code:#c4122e

.bkg-sale

.c-sale

@c-red

IFC Green

colour code:#a1ab36

.ifc-bkg-green1

.ifc-c-green1

@ifc-green1

colour code:#949916

.ifc-bkg-green2

.ifc-c-green2

@ifc-green2

Installations Blue

colour code:#133250

.bkg-blue

.c-blue

@c-blue

Brand Green

colour code:#477628

.bkg-brand-green

.c-brand-green

@brand-green

colour code:#14210B

.bkg-green1

.c-green1

@c-green1

colour code:#213613

.bkg-green2

.c-green2

@c-green2

colour code:#2E4C1A

.bkg-green3

.c-green3

@c-green3

colour code:#3B6121

.bkg-green4

.c-green4

@c-green4

colour code:#688E4F

.bkg-green5

.c-green5

@c-green5

colour code:#89A776

.bkg-green6

.c-green6

@c-green6

colour code:#ABC09D

.bkg-green7

.c-green7

@c-green7

colour code:#CCD9C4

.bkg-green8

.c-green8

@c-green8

colour code:#EEF2EB

.bkg-green9

.c-green9

@c-green9

System Feedback

colour code:#CCD9C4

.bkg-green8

.c-green8

@c-green8

colour code:#EEBEC6

.bkg-pink

.c-pink

@c-pink

Text Components

Default H1 - H6 Desktop

H1 (S29px/H36px - Bold). The quick brown fox jumps over the lazy dog

H2 (S26px/H33px - Bold). The quick brown fox jumps over the lazy dog

H3 (S23px/H29px - Bold). The quick brown fox jumps over the lazy dog

H4 (S20px/H25px - Bold). The quick brown fox jumps over the lazy dog

H5 (S18px/H23px - Bold). The quick brown fox jumps over the lazy dog

H6 (S16px/H20px - Bold). The quick brown fox jumps over the lazy dog

Display

Largest (S41px/H51px - Bold). The quick brown fox jumps over the lazy dog

Largest (S41px/H51px - Regular). The quick brown fox jumps over the lazy dog

Larger (S36px/H45px - Bold). The quick brown fox jumps over the lazy dog

Larger (S36px/H45px - Regular). The quick brown fox jumps over the lazy dog

Large (S32px/H40px - Bold). The quick brown fox jumps over the lazy dog

Large (S32px/H40px - Regular). The quick brown fox jumps over the lazy dog

Label & Section

Small (14px/18px - Bold). The quick brown fox jumps over the lazy dog

Small (14px/18px - Regular). The quick brown fox jumps over the lazy dog

Smallest (12px/15px - Bold). The quick brown fox jumps over the lazy dog

Smallest (12px/15px - Regular). The quick brown fox jumps over the lazy dog

Paragraph Styling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus vulputate diam eu pretium. Mauris elit orci, ultricies id fermentum vel, porta et eros. Vestibulum condimentum lectus in convallis feugiat. Sed vulputate fringilla felis. Aliquam ut arcu et dui feugiat scelerisque eu quis diam. Mauris placerat congue dui sit amet blandit. Phasellus condimentum libero vel velit auctor, sit amet tincidunt velit varius.

.text-feature

List item 1
List item 2
List item 3
List item 4
List item 5

List item 1
List item 2
List item 3
List item 4
List item 5

hose people who think they know everything are a great annoyance to those of us who do.

Isaac Asimov

Button Styles

Primary Buttons

Secondary Buttons

Text Buttons & Links

Text button

Disabled Text button

Call to action

Add to bag Buttons

Form Element

Divider

Black divider

Regular divider

green divider

Tables

Striped rows

Name	age
Name	age
Name	age
Name	age
Name	age

Borders rows

Firstname	Lastname	Birthday	Age
Firstname	Lastname	Birthday	Age	Action
Firstname	Lastname	Birthday	Age	Action
Firstname	Lastname	Birthday	Age	Action
Firstname	Lastname	Birthday	Age	Action

Catgeory Icons

.icon-drawer-three-side

.icon-cabord

.icon-cabord-big

.icon-computer-chair

.icon-computer-table

.icon-cross-sofa

.icon-drawer-one

.icon-drawer-with-chair

.icon-drawer-with-height

.icon-drawer-one-side

.icon-drawer-two-side

.icon-drawer-with-book

.icon-drawer-with-sige

.icon-friz

.icon-icons-chair

.icon-icons-bed-small

.icon-icons-bed

.icon-icons-chair

.icon-icons-dining-table-big

.icon-icons-dining-table-s

.icon-icons-stend-smal

.icon-single-sofa

.icon-sofa

.icon-sofa-l

.icon-sofa-m

.icon-sofa-only

.icon-sofa-rounded

.icon-sofa-set

.icon-stand

.icon-table

.icon-table-lamp

.icon-table-with-stend

.icon-tv-stand

Helper Classes

.f-left (float left)

.f-right (float right)

.clearfix (clear both)

.text-center (text align centre)

.text-left (text align left)

.text-right (text right)

.nopad (no padding)

.border-all

.border-top

.border-bottom

.border-left

.border-right

.border-c-black

.border-c-grey

.border-c-green

marging, padding and font-size common

.mb0(margin-bottom:0px) to .mb100(margin-bottom:100px)

.mt0(margin-top:0px) to .mt100(margin-top:100px)

.ml0(margin-left:0px) to .ml100(margin-left:100px)

.mr0(margin-right:0px) to .mr100(margin-right:100px)

.fnt0(font-size:0px) to .fnt100(font-size:100px)

marging, padding and font-size only mobile

.m-mb0(margin-bottom:0px) to .m-mb100(margin-bottom:100px)

.m-mt0(margin-top:0px) to .m-mt100(margin-top:100px)

.m-ml0(margin-left:0px) to .m-ml100(margin-left:100px)

.m-mr0(margin-right:0px) to .m-mr100(margin-right:100px)

.m-fnt0(font-size:0px) to .m-fnt100(font-size:100px)