|H1||Moving colours||Avenir Next Bold - 56pt|
|H2||Moving colours||Avenir Next Bold - 45pt|
|H3||Moving colours||Avenir Next Bold - 36pt|
|H4||Moving colours||Avenir Next Bold - 30pt|
|H5||Moving colours||Avenir Next Demi Bold - 24pt|
|Lead Text||Moving colours||Avenir Next Regular - 20pt|
|Body Bold||Moving colours||Avenir Next Bold - 16pt|
|Body Regular||Moving Colours||Avenir Next Regular - 16pt|
|Body Small||Moving Colours||Avenir Next Regular - 14pt|
|Body X-Small||Moving Colours||Avenir Next Regular - 11pt|
|Big button label||Moving Colours||Avenir Next Regular - 26pt|
|Regular button label||Moving Colours||Avenir Next Regular - 16pt|
|Text-only button||Moving Colours||Avenir Next Regular - 20pt|
|Links||Moving Colours||Avenir Next Regular - #00B1FF|
Desktop > 1366 x 768
Desktop < 1366 x 768
Narrow spacing is used between elements of the same section
Wide spacing is used between different sections
Images that are not full width can have a “gradient shadow” behind.
If the image links to another page (for example on the featured products) the shadow appears when the mouse is over.
If the image does not contain any link, the shadow appears when scrolling down the page.
Shadow offset: 16px right, 16px bottom
Input stroke: 1px, color #000000
Placeholder text: style Lead Text, color #9B9B9B
Error messages are displayed under the input field where the error occured. The stroke of the field
Font style Small, color #FF00D0
Confirmation status is represented by the Submit button becoming round and changing color to #00B1FF with a checkmark icon in.
Thanks for checking this out!