Component Library

Typography

H1 Headline

H2 Headline

H3 Headline

H4 Headline

H5 Headline
H6 Headline
Subtitle 1
Subtitle 2

Body 1

Body 2Caption
button
OVERLINE
Link

Colour Palette

Primary

palette.primary.light#9EAAED
palette.primary.main#3F51B5
palette.primary.darkrgb(44, 56, 126)

Secondary

palette.secondary.light#FF4081
palette.secondary.main#F50057
palette.secondary.darkrgb(171, 0, 60)

Error

palette.error.light#F88078
palette.error.main#F44336
palette.error.darkrgb(170, 46, 37)

Warning

palette.warning.lightrgb(247, 150, 51)
palette.warning.main#F57C00
palette.warning.dark#DC6F00

Info

palette.info.lightrgb(51, 138, 186)
palette.info.main#006DA9
palette.info.dark#006298

Success

palette.success.lightrgb(91, 152, 94)
palette.success.main#327F36
palette.success.dark#2D7230

Buttons

Upload button

Floating Action Button

Contained Buttons

Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

Link

Text Buttons

Text buttons are typically used for less-pronounced actions, including those located:

  • In dialogs
  • In cards

In cards, text buttons help maintain an emphasis on card content.

Link

Outlined Buttons

Link

Sizes

Buttons with icons and label

Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.

Icon Buttons