Button Varients
Button
Button
Button
Button
Color Schemes
Base colors
Grey
Border-radius
rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-4xl
rounded-5xl
rounded-full
Font-style
font-family
SF Pro
Font-sizes
heading-style-h1
Heading-style-h1
heading-style-h2
Heading-style-h2
heading-style-h3
Heading-style-h3
heading-style-h4
Heading-style-h4
heading-style-h5
Heading-style-h5
heading-style-h6
Heading-style-h6
Paragraph-body
Paragraph-style-body
Small-text
Small-text
Font-weight
font-weight-H1-bold
Heading-style-h1
font-weight-H2-semi-bold
Heading-style-h2
font-weight-H3-semi-bold
Heading-style-h3
font-weight-H4-medium
Heading-style-h4
font-weight-H5-medium
Heading-style-h5
font-weight-H6-medium
Heading-style-h6
Paragraph-body-medium
Paragraph-body
Small-text-medium
Small-text
Line-height
Line-height-H1
88px
Line-height-H2
64px
Line-height-H3
48px
Line-height-H4
40px
Line-height-H5
32px
Line-height-H6
28px
Line-height-paragraph-body
28px
Line-height-small-text
24px
Letter-spacing
Line-height-H1
-1.2 px
Line-height-H2
-0.5 px
Line-height-H3
-0.25 px
Line-height-H4
0 px
Line-height-H5
0.25 px
Line-height-H6
0.5 px
Line-height-paragraph-body
0.25 px
Line-height-small-text
0.5 px
Margin
Margin_0
0
Margin_2
2
Margin_4
4
Margin_8
8
Margin_12
12
Margin_16
16
Gap_20
20
Margin_24
24
Margin_28
28
Margin_32
32
Margin_36
36
Margin_40
40
Margin_44
44
Margin_48
48
Margin_56
56
Margin_64
64
Margin_80
80
Margin_96
96
Padding
Padding_0
0
Padding_2
2
Padding_4
4
Padding_8
8
Padding_12
12
Padding_16
16
Padding_20
20
Padding_24
24
Padding_28
28
Padding_32
32
Padding_36
36
Padding_40
40
Padding_44
44
Padding_48
48
Padding_56
56
Padding_64
64
Padding_80
80
Padding_96
96
Gap
Gap_0
0
Gap_2
2
Gap_4
4
Gap_8
8
Gap_12
12
Gap_16
16
Gap_20
20
Gap_24
24
Gap_28
28
Gap_32
32
Gap_36
36
Gap_40
40
Gap_44
44
Gap_48
48
Gap_56
56
Gap_64
64
Gap_80
80
Gap_96
96