styleguide

Buttons (click here and use tab key to check focus states)

Primary
Secondary
Primary outline
Secondary outline
Primary underline
Secondary underline
Ghost
Primary medium fill
Secondary medium fill
Primary outline medium outline
Secondary outline medium outline
Primary underline medium
Secondary underline medium
Ghost medium
Primary large
Secondary large
Primary outline large
Secondary outline large
Primary underline large
Secondary underline large
Ghost large
Primary arrow left
Secondary arrow left
Primary outline arrow left
Secondary outline arrow left
Primary underline arrow left
Secondary underline arrow left
Ghost arrow left
Primary arrow right
Secondary arrow right
Primary outline arrow right
Secondary outline arrow right
Primary underline arrow right
Secondary underline arrow right
Ghost arrow right

Typography:

Heading 1

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Small :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit dolor adipiscing ipsum lacus, ultricies mauris tellus. Ipsum proin libero, in sit varius pellentesque non lectus. Eu faucibus aliquam faucibus enim. Molestie at aliquet viverra lacus, mauris sagittis tincidunt sit. Placerat cras id sit quam elit cursus tempus non tortor.

Normal :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit dolor adipiscing ipsum lacus, ultricies mauris tellus. Ipsum proin libero, in sit varius pellentesque non lectus. Eu faucibus aliquam faucibus enim. Molestie at aliquet viverra lacus, mauris sagittis tincidunt sit. Placerat cras id sit quam elit cursus tempus non tortor.

Medium :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit dolor adipiscing ipsum lacus, ultricies mauris tellus. Ipsum proin libero, in sit varius pellentesque non lectus. Eu faucibus aliquam faucibus enim. Molestie at aliquet viverra lacus, mauris sagittis tincidunt sit. Placerat cras id sit quam elit cursus tempus non tortor.

Large:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit dolor adipiscing ipsum lacus, ultricies mauris tellus. Ipsum proin libero, in sit varius pellentesque non lectus. Eu faucibus aliquam faucibus enim. Molestie at aliquet viverra lacus, mauris sagittis tincidunt sit. Placerat cras id sit quam elit cursus tempus non tortor.

Huge:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit dolor adipiscing ipsum lacus, ultricies mauris tellus. Ipsum proin libero, in sit varius pellentesque non lectus. Eu faucibus aliquam faucibus enim. Molestie at aliquet viverra lacus, mauris sagittis tincidunt sit. Placerat cras id sit quam elit cursus tempus non tortor.

Colours:

Primary – 100

Primary – 200

Primary – 300

Primary – 400

Primary – 500

Primary – 600

Secondary – 100

Secondary – 200

Secondary – 300

Secondary – 400

Secondary – 500

Secondary – 600

White

Base – 100

Base – 200

Base – 300

Base – 400

Base – 500

Base – 600

Base – 700

Base – 800

Base – 900

Base – 1000

Black

Soft broccoli

Broccoli

Soft portobello

Portobello

Bright yellow

Beige sand

Success

Failure (alert)

Warning