Colours

Primary / light
#918ED6
Primary / Light
#DF7260
Primary
#D4432B
Primary / Dark
#9F3220
Primary / Darkest
#120F57
Secondary / light
#E9A195
Secondary / Light
#DF7260
Secondary
#D4432B
Secondary / Dark
#9F3220
Secondary / Darkest
#6A2115
Tertiary / light
#F2E9D9
Tertiary / Light
#EAD2B0
Tertiary
#E1BB87
Tertiary / Dark
#B38C5A
Tertiary / Darkest
#84622D
Error
#FF2400
Warning
#FFCE2D
Success
#4E8B43
Tertiary / Dark
#B38C5A
Tertiary / Darkest
#84622D

Typography

Header 1

Font: Helvetica Neue / Color: #000000 / Size: 50px/52px

Header 2

Font: Georgia / Color: #747473 / Size: 36px

Header 3

Font: Georgia / Color: #747473 / Size: 30px

Header 4

Font: Georgia / Color: #747473 / Size: 24px
Header 5
Font: Georgia / Color: #747473 / Size: 12px
Header 6
Font: Georgia / Color: #747473 / Size: 10px

This is body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Product Cards

DICKIES 13Inch Multi Pocket Short Rec Whitecap Gray DK0A4XOZF901 DICKIES 13Inch Multi Pocket Short Rec Whitecap Gray DK0A4XOZF901
DICKIES

13Inch Multi Pocket Short Rec Whitecap Gray

UOMO
65,00
65,00
Size
EU
UK
US
1460 Ben Alpha Dms Olive+Black Bentex Nylon+Smooth Boots 1460 Ben Alpha Dms Olive+Black Bentex Nylon+Smooth Boots
DR MARTENS

Placeholder Title

45,80
45,80 229,00
Size
EU
UK
US
DR MARTENS 1460 J Black Softy T 15382001 DR MARTENS 1460 J Black Softy T 15382001
DR MARTENS

1460 J Black Softy T

BAMBINO
17,80
17,80 89,00
Size
EU
UK
US
NEW BALANCE 1906 Black Metallic Sneakers U1906ROF NEW BALANCE 1906 Black Metallic Sneakers U1906ROF
NEW BALANCE

1906 Sneakers Nere Metallizzate

UNISEX
160,00
160,00
Size
EU
UK
US

Grid

As agreed with design, we will use CSS Grid for the over-arching layout of the website. For this, we have created a twelve column grid ( with spacing and gaps ), use .moonbase mb-10 to create a grid use the grid. Children of the grid will want to use .col-span-1, .col-span-2

6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
2
3
4
5
6
7
8
9
10
11
12

Buttons

Primary - Default
Hover State
Disabled State
Secondary - Default
Hover State
Disabled State
Tertiary - Default
Hover State
Disabled State
Outline - Default
Hover State
Disabled State

Form

Accordions

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Table

Statement Summary
Account Due Date Amount Period
Visa - 3412 04/01/2016 $1,190 03/01/2016 - 03/31/2016
Visa - 6076 03/01/2016 $2,443 02/01/2016 - 02/29/2016
Corporate AMEX 03/01/2016 $1,181 02/01/2016 - 02/29/2016
Visa - 3412 02/01/2016 $842 01/01/2016 - 01/31/2016

Drawers