Styleguide

Buttons

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

Typography:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

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.

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.

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.

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.

Hello

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

Base – 0

Base – 100

Base – 200

Base – 300

Base – 400

Base – 500

Base – 600

Base – 700

Base – 800

Base – 900

Base – 1000

Success notification, which is long enough to explain how well you did and give alternatives
Error notification, which is long enough to explain the problem and give alternatives
Warning notification, which is long enough to explain the problem and give alternatives

Loading