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 UPF 40 - Navy
Die Jacke Abbey ist perfekt für heiße Tage, die Sie unabhängig vo
Abbey Polo UPF 40 - Platinum
Die Jacke Abbey ist perfekt für heiße Tage, die Sie unabhängig vo
Abbey Polo UPF 40 - White
Die Jacke Abbey ist perfekt für heiße Tage, die Sie unabhängig vo
3+Admirals Bootsschuh - Black
Dubarrys Original, ein sehr beliebter Klassiker. Der Admiral Boot
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
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
| 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 |