Typography

Font

--heading-m

The quick brown fox jumps over the lazy dog

--heading-l

The quick brown fox jumps over the lazy dog

--heading-xl

The quick brown fox jumps over the lazy dog

--heading-xxl

The quick brown fox jumps over the lazy dog

--title-s

The quick brown fox jumps over the lazy dog

--title-m

The quick brown fox jumps over the lazy dog

--title-l

The quick brown fox jumps over the lazy dog

--title-xl

The quick brown fox jumps over the lazy dog

--title-xxl

The quick brown fox jumps over the lazy dog

--body-s

The quick brown fox jumps over the lazy dog

--body-m

The quick brown fox jumps over the lazy dog

--body-l

The quick brown fox jumps over the lazy dog

--body-xl

The quick brown fox jumps over the lazy dog

--body-xxl

The quick brown fox jumps over the lazy dog

Whenever you want to apply this style to text, you can use the corresponding placeholder.

.myBodyClass {
  font: var(--body-m);
}

.myTitleClass {
  font: var(--title-m);
}

.myHeadingClass {
  font: var(--heading-m);
}

Whenever you want to apply a typography style to the block element, you can use the corresponding className.

Token	Value
--ff-base	'Inter', Helvetica, sans-serif
--ff-heading	'Roobert', Helvetica, sans-serif

Token	Value
--fw-medium	500
--fw-semibold	600