Typography

Typography system with heading hierarchies, body text sizes, font families, and text formatting options. Includes responsive sizing specs for desktop and mobile.

Font Families

Heading: custom-heading

Light Mode: #000000

Dark Mode: #FFFFFF

Line Height: 1.2

Letter Spacing: -0.03em

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()_+-=[]{}|;':",./<>?

Subheading: custom-subheading

Light Mode: #000000

Dark Mode: #FFFFFF

Line Height: 1.3

Letter Spacing: -0.03em

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()_+-=[]{}|;':",./<>?

Paragraph: custom-paragraph

Light Mode: #000000

Dark Mode: #FFFFFF

Line Height: 1.5

Letter Spacing: -0.03em

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()_+-=[]{}|;':",./<>?

Headings

Heading 1 Jumbo

77px / 44px

Heading 1

61px / 37px

Heading 2

51px / 31px

Heading 3

41px / 26px

Subheading 4

31px / 20px

Subheading 5

26px / 17px

Subheading 6

22px / 15px

Body

Body XXS. Fox jumps over the lazy dog quickly.

10px / 8px

Body XS. Fox jumps over the lazy dog quickly.

12px / 10px

Body SM. Fox jumps over the lazy dog quickly.

14px / 12px

Body MD (default). Fox jumps over the lazy dog quickly.

16px / 14px

Body LG. Fox jumps over the lazy dog quickly.

20px / 16px

Body XL. Fox jumps over the lazy dog quickly.

24px / 20px

Body XXL. Fox jumps over the lazy dog quickly.

28px / 24px

Other

Label (110% of Body MD)

18px / 15px

Link: Link example

Unordered list item 1
Unordered list item 2
Unordered list item 3
Unordered list item 4
Unordered list item 5

Ordered list item 1
Ordered list item 2
Ordered list item 3
Ordered list item 4
Ordered list item 5

const code = Preformatted "mono" text type for code examples;