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

JORDAN (Her)Itage Suit Pant FB5119-010 JORDAN (Her)Itage Suit Pant FB5119-010
sustainable
Saldo
JORDAN

(Her)Itage Suit Pant

€46,00
€46,00 €92,00
Size
EU
UK
US
MEDICOM TOY 100%+400% Allen Iverson 14IVERSON
MEDICOM TOY

100%+400% Allen Iverson

€200,00
€200,00
Size
EU
UK
US
MEDICOM TOY 100%+400% Shaquille O'neal 14ONEAL MEDICOM TOY 100%+400% Shaquille O'neal 14ONEAL
MEDICOM TOY

100%+400% Shaquille O'neal

€200,00
€200,00
Size
EU
UK
US
DR MARTENS 101 Black Virginia Boots 30700001 DR MARTENS 101 Black Virginia Boots 30700001
Saldo
DR MARTENS

101 Black Virginia Boots

€94,50
€94,50 €189,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