Colours

Primary / Light
#3630AF
Primary / DEFAULT
#000738
Primary / Dark
#1B1682
Secondary / Light
#D4432B
Secondary
#D4432B
Secondary / Dark
#9F3220
Contrast / Lightest
#FBFBFB
Contrast / Light
#7B7676
Contrast / Medium
#7B7676
Contrast / Quicklinks Background
#F2F2F2
Contrast / Border
#EBEBEB
Contrast / Dark
#747473
Contrast / Darker
#121212
Contrast / Darkest
#000000
Error
#FF2400
Warning
#FFCE2D
Success
#4E8B43

Typography

Header 1 / text-xxxxl

Font: Lora / Size: 61.04px

Header 2

Font: Lora / Size: 48.83px

Header 3

Font: Lora / Size: 39.06px

Header 4

Font: Lora / Size: 31.25px
Header 5
Font: Lora / Size: 25px

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

Abbey Polo - Navy

£29
£65 £29

One for the hot days, the Abbey will help keep you cool regardles

Add to Cart
Select Sizes - EU / UK

Abbey Polo - Platinum

£29
£65 £29

One for the hot days, the Abbey will help keep you cool regardles

Add to Cart
Select Sizes - EU / UK

Abbey Polo - White

£29
£65 £29

One for the hot days, the Abbey will help keep you cool regardles

Add to Cart
Select Sizes - EU / UK

Abbeylara Ladies throw - Grey

£250
£250

Abbeylara throw, luxurious quality, 100% Merino lambswool. Suita

Add to Cart

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
Grey - 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