Text

h1

primary

20% darker

30% darker

40% darker

50% darker

60% darker

70% darker

secondary

20% lighter

30% lighter

40% lighter

50% lighter

60% lighter

70% lighter

20% darker

30% darker

40% darker

50% darker

60% darker

70% darker

purple-grad

purple-grad-2

orange-grad

h2

primary

20% darker

30% darker

40% darker

50% darker

60% darker

70% darker

secondary

20% lighter

30% lighter

40% lighter

50% lighter

60% lighter

70% lighter

20% darker

30% darker

40% darker

50% darker

60% darker

70% darker

purple-grad

purple-grad-2

orange-grad

h3

primary

20% darker

30% darker

40% darker

50% darker

60% darker

70% darker

secondary

20% lighter

30% lighter

40% lighter

50% lighter

60% lighter

70% lighter

20% darker

30% darker

40% darker

50% darker

60% darker

70% darker

purple-grad

purple-grad-2

orange-grad

h4

primary

20% darker

30% darker

40% darker

50% darker

60% darker

70% darker

secondary

20% lighter

30% lighter

40% lighter

50% lighter

60% lighter

70% lighter

20% darker

30% darker

40% darker

50% darker

60% darker

70% darker

purple-grad

purple-grad-2

orange-grad

body24
primary
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker
secondary
20% lighter
30% lighter
40% lighter
50% lighter
60% lighter
70% lighter
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker

purple-grad

purple-grad-2

orange-grad

body22
primary
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker
secondary
20% lighter
30% lighter
40% lighter
50% lighter
60% lighter
70% lighter
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker

purple-grad

purple-grad-2

orange-grad

body20
primary
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker
secondary
20% lighter
30% lighter
40% lighter
50% lighter
60% lighter
70% lighter
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker

purple-grad

purple-grad-2

orange-grad

body16
primary
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker
secondary
20% lighter
30% lighter
40% lighter
50% lighter
60% lighter
70% lighter
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker

purple-grad

purple-grad-2

orange-grad

body14
primary
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker
secondary
20% lighter
30% lighter
40% lighter
50% lighter
60% lighter
70% lighter
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker

purple-grad

purple-grad-2

orange-grad

body12
primary
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker
secondary
20% lighter
30% lighter
40% lighter
50% lighter
60% lighter
70% lighter
20% darker
30% darker
40% darker
50% darker
60% darker
70% darker

purple-grad

purple-grad-2

orange-grad

loading spinner
sizes

size="small"

(24px)

size="med"

(40px)

size="large"

(60px)

custom sizes examples

size=100

(100px)

size=80

(80px)

size=50

(50px)

speeds

slow

(900ms)

med

(600ms)

fast

(400ms)

circle thickness

thin

(2px)

med

(4px)

thick

(6px)

colors

primary

secondary