Introduction

This is some text inside of a div block.

Spacing

"P" rule

The rule for body padding. Where lift and right are measured from the corner of th
high resolution screens (XL) - 60px from top, 120px form left and right
desktop screens (L) - 60px from top, 90px form left and right
tablet screens (SM) - 50px for all sides
mobile screens (XS) - 30px for all sides

Typography

Heading Title

Roboto Slab, bold, font size 32px, letter spacing 0.5px

H2 Heading

Roboto Slab, bold, font size 28px, letter spacing 0.5px

H3 Heading

Roboto Slab, bold, font size: 22px, letter spacing 0.2px

H4 Heading

Quicksand, regular, font size 18px, letter spacing 0.5px

Paragraph

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.

Quicksand, regular, font-size 16px, color of main text

Golden paragraph

For short expressions within a paragraph or as stand alone quotation.

Quicksand, regular, font-size 16px, color #b5965b

Small text

Small text is used for drop-downs or pot selectors on mobile, same as for icon descriptions in botanical parameters and user benefits blocks.

Quicksand, regular, font-size 13px, colour of main text

Lables

Labels style is used for complimentary information like sizes or annotations. In some cases it can replace small text, like in botanical parameters block..

Quicksand, regular, font-size 13px, colour of secondary text

Definitions

Max width of the text block is 560px.

Dos and Don'ts

Use labels style only for complimentary information like sizes or annotations.

Colours

Main colour

Juniper
#5e8684

Secondary

Cascade
#88ab9d

Call to action

Muddy Gold
#b5965b

Highlight 

Yellow
#f3ff00

Input BG

Athens Gray
#eff0f2

Generic BG

White
#ffffff

Font colours

Main text

Tundora
#494949

Secondary

Silver Chalice
#a2a2a2

Dos and Don'ts

Don't use highlight colour as stand alone. It is aimed to highlight selection or a change.

Basic elements

Links

Quicksand, normal, font-size 16px, basic colour Secondary, on hover Main

Buttons

Call to actionCall to action
Quicksand, normal, font-size: 10px, letter-spacing: 1px. CTA button always comes with an icon sized 20px.

Frames

White

#white
no border

Gray

#eff0f2
border 15px

Dos and Don'ts

Link should be used everywhere where is no call to action placed.

Frames border is not part of  the "P" rule and should be calculated in the padding.

Iconography

Botanical parameters

Icon size 40x40px, color Main Text

User benefits

Icon size 30x30px, color #b5965b

Dos and Don'ts

Use only complimentary, line-work icons with 2pt line width.