Design System

Colours

Primary
500
400
300
200
100
Secondary
500
400
300
200
100
Tertiary
500
400
300
200
100
Shade
500
400
300
200
100
Neutral
500
400
300
200
100
Base Colour

Typography

Style Weight Letter Spacing Line Height
Hero Medium - 500 -0.02em 1.1em
H1 Heading Medium - 500 -0.02em 1.1em
H2 Heading Medium - 500 -0.02em 1.1em
H3 Heading Medium - 500 -0.02em 1.1em
H4 Heading Regular - 400 -0.02em 1.1em
H5 Heading Regular - 400 -0.02em 1.1em
H6 Heading Regular - 400 -0.02em 1.1em
Big Paragraph Regular - 400 0.0em 1.8em
Paragraph Regular - 400 0.0em 1.8em
Small Regular - 400 0.0em 1.8em

Themes

Theme White

Josh Salzmann Official

Pellentesque varius neque eget consectetur posuere. Aliquam in erat convallis, accumsan sem nec, malesuada eros. Nulla in arcu felis. Maecenas leo neque, hendrerit at volutpat sagittis, imperdiet in arcu.

Theme Light

Josh Salzmann Official

Pellentesque varius neque eget consectetur posuere. Aliquam in erat convallis, accumsan sem nec, malesuada eros. Nulla in arcu felis. Maecenas leo neque, hendrerit at volutpat sagittis, imperdiet in arcu.

Theme Primary

Josh Salzmann Official

Pellentesque varius neque eget consectetur posuere. Aliquam in erat convallis, accumsan sem nec, malesuada eros. Nulla in arcu felis. Maecenas leo neque, hendrerit at volutpat sagittis, imperdiet in arcu.

Theme Secondary

Josh Salzmann Official

Pellentesque varius neque eget consectetur posuere. Aliquam in erat convallis, accumsan sem nec, malesuada eros. Nulla in arcu felis. Maecenas leo neque, hendrerit at volutpat sagittis, imperdiet in arcu.

Theme Dark

Josh Salzmann Official

Pellentesque varius neque eget consectetur posuere. Aliquam in erat convallis, accumsan sem nec, malesuada eros. Nulla in arcu felis. Maecenas leo neque, hendrerit at volutpat sagittis, imperdiet in arcu.

Theme Black

Josh Salzmann Official

Pellentesque varius neque eget consectetur posuere. Aliquam in erat convallis, accumsan sem nec, malesuada eros. Nulla in arcu felis. Maecenas leo neque, hendrerit at volutpat sagittis, imperdiet in arcu.

Cards

card

Nullam vitae ipsum commodo, maximus purus vel, commodo libero. Praesent suscipit leo id augue malesuada dignissim. Ut cursus magna nec finibus congue.

card

Nullam vitae ipsum commodo, maximus purus vel, commodo libero. Praesent suscipit leo id augue malesuada dignissim. Ut cursus magna nec finibus congue.

card--hoverable

Nullam vitae ipsum commodo, maximus purus vel, commodo libero. Praesent suscipit leo id augue malesuada dignissim. Ut cursus magna nec finibus congue.

Read more

card--hoverable

Nullam vitae ipsum commodo, maximus purus vel, commodo libero. Praesent suscipit leo id augue malesuada dignissim. Ut cursus magna nec finibus congue.

Read more

Shadows / Elevation

elevation-100

elevation-200

elevation-300

elevation-400

Buttons

Colours and hover styles determined by 'Theme' choice.
Theme Preview