Font size: 80px | line-height: 96px

Class name: 'h1'

Heading 1

Font size: 36px | Line height: 43.px

Class name: 'h1'

Heading 1

Font size: 40px | Line height: 48px

Class name: 'h2'

Heading 2

Font size: 32px | Line height: 38px

Class name: 'h2'

Heading 2

Font size: 14px | Line height: 20px

Class name: 'body-xs'

Text small

Font size: 14px | Line height: 20px

Class name: 'body-xs'

Text small

Font size: 18px | Line height: 27px

Class name: 'body-md'

Text medium

Font size: 16px | Line height: 24px

Class name: 'body-md'

Text medium

Font size: 20px | Line height: 30px

Class name: 'body-lg'

Text large

Font size: 18px | Line height: 27px

Class name: 'body-lg'

Text large

Font size: 16px | Line height: 24px | font-weight: 600

Class name: 'util'

Util text

Font size: 16px | Line height: 24px | font-weight: 600

Class name: 'util'

Util text

Font size: 17px | Line height: 20px | font-weight: 700

Class name: 'button button--primary'

NOTE: Use an already created button.liquid snippet or Button.tsx component

Font size: 17px | Line height: 20px | font-weight: 700

Class name: 'button button--primary'

NOTE: Use an already created button.liquid snippet or Button.tsx component

Font size: 17px | Line height: 20px | font-weight: 700

Class name: 'button button--secondary'

NOTE: Use an already created button.liquid snippet or Button.tsx component

Font size: 17px | Line height: 20px | font-weight: 700

Class name: 'button button--secondary'

NOTE: Use an already created button.liquid snippet or Button.tsx component