Unreleased

Typography

Text style classes, text color classes, font tokens and the Tailwind type scale Systhema sets.

On this page

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`