Colours

BRAND COLOURS

Used for buttons, top bar, some icons and text.

TYPOGRAPHY COLOURS

Used for H1, H2, H3, H4 and H5 text.

Used for paragraph text.

Used for paragraph text that needs to be lighter.

BACKGROUND COLOURS

Used for the background colour on some content blocks.

ADDITIONAL COLOURS

Used for dividing lines and field outlines/borders.

Used for error messages and sale badge/price.

Used for page background colour.

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Paragraph

This is a paragraph style omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Large Paragraph

This is a larger paragraph style omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Text Links

Buttons

PRIMARY SECONDARY HOLLOW BUTTON HEIGHTS
STANDARD 40PX (SMALL)
INACTIVE 48PX (STANDARD)
ARROW 54PX (LARGE)

Notification Banners

Success notification Error notification Standard notification

Inputs

Icons



Selectors

Navigation, Labels, Elements

Carousel
Breadcrumbs
Tooltip
Pagination
Quantity

Table

Order Date Payment Status Fulfillment Status Tracking number Total
#1003 Jul 12, 2018 Pending Fulfilled WN247245s64 $281.20
#1003 Jul 12, 2018 Pending Fulfilled WN247245s64 $281.20
#1003 Jul 12, 2018 Pending Fulfilled WN247245s64 $281.20
#1003 Jul 12, 2018 Pending Fulfilled WN247245s64 $281.20
#1003 Jul 12, 2018 Pending Fulfilled WN247245s64 $281.20
#1003 Jul 12, 2018 Pending Fulfilled WN247245s64 $281.20

Products