Typography

Text stylesLink to this section

Each text style is one class that sets font family, size, weight, line height and letter spacing from CSS variables. Size and line height change per breakpoint (sm, md, lg); the class picks up the right value automatically. Variables follow the class name: text-h1 reads --typography-h1-font-size, --typography-h1-line-height, --typography-h1-letter-spacing, --font-h1-font-family and --font-h1-font-weight.

Class	Size / line height (sm)	Size / line height (md)	Size / line height (lg)	Weight	Letter spacing	Transform
text-h1	33.31px / 42.2px	43.19px / 50.47px	54.07px / 59.21px	700	0px	none
text-h2	29.48px / 38.59px	36.6px / 45.07px	44.14px / 51.22px	700	0px	none
text-h3	26.09px / 35.07px	31.02px / 40.08px	36.03px / 44.58px	700	0px	none
text-h4	23.09px / 31.65px	26.29px / 35.29px	29.41px / 38.53px	700	0px	none
text-h5	20.43px / 28.36px	22.28px / 30.67px	24.01px / 32.74px	700	0px	none
text-h6	18.08px / 25.26px	18.88px / 26.34px	19.6px / 27.29px	700	0px	none
text-label	12px / 22px	14px / 24px	14px / 24px	700	3px · 4px · 4px	uppercase
text-lead	18px / 28px	20px / 28px	20px / 30px	400	0px	none
text-body	16px / 28px	16px / 28px	16px / 28px	400	0px	none
text-small	12px / 22px	14px / 24px	14px / 24px	400	0px	none
text-form-label	16px / 28px	16px / 28px	16px / 28px	500	0px	none
text-form-description	16px / 28px	16px / 28px	16px / 28px	400	0px	none
text-form-block	16px / 28px	16px / 28px	16px / 28px	400	0px	none
text-form-inline	16px / 28px	16px / 28px	16px / 28px	400	0px	none
text-cookie-consent-title	18.08px / 25.26px	18.88px / 26.34px	19.6px / 27.29px	700	0px	none
text-cookie-consent-description	16px / 28px	16px / 28px	16px / 28px	400	0px	none
text-cookie-consent-category-title	18.08px / 25.26px	18.88px / 26.34px	19.6px / 27.29px	700	0px	none
text-cookie-consent-button-primary	16px / 28px	16px / 28px	16px / 24px	600	0px	none
text-cookie-consent-button-secondary	16px / 28px	16px / 28px	16px / 24px	600	0px	none

Text colorsLink to this section

Text color classes set color from a color-system role, so they follow the theme.

Token	CSS variable	Class	Default	Dark
label	--color-typography-label	color-label	#000000	#ffffff
heading	--color-typography-heading	color-heading	#000000	#ffffff
body	--color-typography-body	color-body	#000000	#ffffff

Font tokensLink to this section

Font family and weight per role. Weights are emitted as numbers; each weight token also has a -font-style sibling (normal or italic).

Token	CSS variable	Value
default.body.fontFamily	--font-default-body-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
default.body.fontWeight	--font-default-body-font-weight	400
default.heading.fontFamily	--font-default-heading-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
default.heading.fontWeight	--font-default-heading-font-weight	700
h1.fontFamily	--font-h1-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
h1.fontWeight	--font-h1-font-weight	700
h2.fontFamily	--font-h2-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
h2.fontWeight	--font-h2-font-weight	700
h3.fontFamily	--font-h3-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
h3.fontWeight	--font-h3-font-weight	700
h4.fontFamily	--font-h4-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
h4.fontWeight	--font-h4-font-weight	700
h5.fontFamily	--font-h5-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
h5.fontWeight	--font-h5-font-weight	700
h6.fontFamily	--font-h6-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
h6.fontWeight	--font-h6-font-weight	700
lead.fontFamily	--font-lead-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
lead.fontWeight	--font-lead-font-weight	400
body.fontFamily	--font-body-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
body.fontWeight	--font-body-font-weight	400
small.fontFamily	--font-small-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
small.fontWeight	--font-small-font-weight	400
extrasmall.fontFamily	--font-extrasmall-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
extrasmall.fontWeight	--font-extrasmall-font-weight	400
label.fontFamily	--font-label-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
label.fontWeight	--font-label-font-weight	700
button.primary.fontFamily	--font-button-primary-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
button.primary.fontWeight	--font-button-primary-font-weight	600
button.secondary.fontFamily	--font-button-secondary-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
button.secondary.fontWeight	--font-button-secondary-font-weight	600
gallery.navigation.pagination.fontFamily	--font-gallery-navigation-pagination-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
gallery.navigation.pagination.fontWeight	--font-gallery-navigation-pagination-font-weight	400
gallery.navigation.buttons.fontFamily	--font-gallery-navigation-buttons-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
gallery.navigation.buttons.fontWeight	--font-gallery-navigation-buttons-font-weight	600
carousel.bottom.pagination.fontFamily	--font-carousel-bottom-pagination-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
carousel.bottom.pagination.fontWeight	--font-carousel-bottom-pagination-font-weight	400
carousel.bottom.buttons.fontFamily	--font-carousel-bottom-buttons-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
carousel.bottom.buttons.fontWeight	--font-carousel-bottom-buttons-font-weight	600
chip.fontFamily	--font-chip-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
chip.fontWeight	--font-chip-font-weight	400
accordion.fontFamily	--font-accordion-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
accordion.fontWeight	--font-accordion-font-weight	700
form.label.fontFamily	--font-form-label-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
form.label.fontWeight	--font-form-label-font-weight	500
form.description.fontFamily	--font-form-description-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
form.description.fontWeight	--font-form-description-font-weight	400
form.block.fontFamily	--font-form-block-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
form.block.fontWeight	--font-form-block-font-weight	400
form.inline.fontFamily	--font-form-inline-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
form.inline.fontWeight	--font-form-inline-font-weight	400
header.navigation.item.fontFamily	--font-header-navigation-item-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
header.navigation.item.fontWeight	--font-header-navigation-item-font-weight	400
header.navigation.menuToggle.fontFamily	--font-header-navigation-menu-toggle-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
header.navigation.menuToggle.fontWeight	--font-header-navigation-menu-toggle-font-weight	400
header.menu.navigation.item.fontFamily	--font-header-menu-navigation-item-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
header.menu.navigation.item.fontWeight	--font-header-menu-navigation-item-font-weight	400
header.menu.navigation.menuToggle.fontFamily	--font-header-menu-navigation-menu-toggle-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
header.menu.navigation.menuToggle.fontWeight	--font-header-menu-navigation-menu-toggle-font-weight	400
footer.main.navigation.item.fontFamily	--font-footer-main-navigation-item-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
footer.main.navigation.item.fontWeight	--font-footer-main-navigation-item-font-weight	400
cookieConsent.title.fontFamily	--font-cookie-consent-title-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
cookieConsent.title.fontWeight	--font-cookie-consent-title-font-weight	700
cookieConsent.description.fontFamily	--font-cookie-consent-description-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
cookieConsent.description.fontWeight	--font-cookie-consent-description-font-weight	400
cookieConsent.button.primary.fontFamily	--font-cookie-consent-button-primary-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
cookieConsent.button.primary.fontWeight	--font-cookie-consent-button-primary-font-weight	600
cookieConsent.button.secondary.fontFamily	--font-cookie-consent-button-secondary-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
cookieConsent.button.secondary.fontWeight	--font-cookie-consent-button-secondary-font-weight	600
cookieConsent.category.title.fontFamily	--font-cookie-consent-category-title-font-family	Geist, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
cookieConsent.category.title.fontWeight	--font-cookie-consent-category-title-font-weight	700

Tailwind type scaleLink to this section

Systhema keeps Tailwind's text-* and tracking-* utilities but sets their values in px. Prefer the text style classes above for content; use these for one-off UI text.

Class	Font size	Line height
text-xs	12px	calc(1 / 0.75)
text-sm	14px	calc(1.25 / 0.875)
text-base	16px	calc(1.5 / 1)
text-lg	18px	calc(1.75 / 1.125)
text-xl	20px	calc(1.75 / 1.25)
text-2xl	24px	calc(2 / 1.5)
text-3xl	30px	calc(2.25 / 1.875)
text-4xl	36px	calc(2.5 / 2.25)
text-5xl	48px	1
text-6xl	60px	1
text-7xl	72px	1
text-8xl	96px	1
text-9xl	128px	1

Class	Letter spacing
tracking-tighter	-0.8px
tracking-tight	-0.4px
tracking-normal	0px
tracking-wide	0.4px
tracking-wider	0.8px
tracking-widest	1.6px