Docs
Systhema Design (opens in new tab)
Unreleased

Typography classes

Text style classes (`text-h1` … `text-small`) and text color classes (`color-heading`, …).

One class per text style sets family, size, weight, line height and letter spacing from the typography tokens, so the values change per breakpoint without modifiers. Values per breakpoint are on Typography tokens.

ClassStyles
text-h1font-family: var(--font-h1-font-family);font-size: var(--typography-h1-font-size);font-weight: var(--font-h1-font-weight);letter-spacing: var(--typography-h1-letter-spacing);line-height: var(--typography-h1-line-height);text-transform: none;text-decoration: none;font-style: var(--font-h1-font-style);
text-h2font-family: var(--font-h2-font-family);font-size: var(--typography-h2-font-size);font-weight: var(--font-h2-font-weight);letter-spacing: var(--typography-h2-letter-spacing);line-height: var(--typography-h2-line-height);text-transform: none;text-decoration: none;font-style: var(--font-h2-font-style);
text-h3font-family: var(--font-h3-font-family);font-size: var(--typography-h3-font-size);font-weight: var(--font-h3-font-weight);letter-spacing: var(--typography-h3-letter-spacing);line-height: var(--typography-h3-line-height);text-transform: none;text-decoration: none;font-style: var(--font-h3-font-style);
text-h4font-family: var(--font-h4-font-family);font-size: var(--typography-h4-font-size);font-weight: var(--font-h4-font-weight);letter-spacing: var(--typography-h4-letter-spacing);line-height: var(--typography-h4-line-height);text-transform: none;text-decoration: none;font-style: var(--font-h4-font-style);
text-h5font-family: var(--font-h5-font-family);font-size: var(--typography-h5-font-size);font-weight: var(--font-h5-font-weight);letter-spacing: var(--typography-h5-letter-spacing);line-height: var(--typography-h5-line-height);text-transform: none;text-decoration: none;font-style: var(--font-h5-font-style);
text-h6font-family: var(--font-h6-font-family);font-size: var(--typography-h6-font-size);font-weight: var(--font-h6-font-weight);letter-spacing: var(--typography-h6-letter-spacing);line-height: var(--typography-h6-line-height);text-transform: none;text-decoration: none;font-style: var(--font-h6-font-style);
text-label& { font-family: var(--font-label-font-family); font-size: var(--typography-label-font-size); font-weight: var(--font-label-font-weight); letter-spacing: var(--typography-label-letter-spacing); line-height: var(--typography-label-line-height); text-transform: uppercase; text-decoration: none; font-style: var(--font-label-font-style); }.post-card-label.text-label { color: color-mix(in srgb, currentColor 60%, transparent); }+ 1 more rule
text-leadfont-family: var(--font-lead-font-family);font-size: var(--typography-lead-font-size);font-weight: var(--font-lead-font-weight);letter-spacing: var(--typography-lead-letter-spacing);line-height: var(--typography-lead-line-height);text-transform: none;text-decoration: none;font-style: var(--font-lead-font-style);
text-bodyfont-family: var(--font-body-font-family);font-size: var(--typography-body-font-size);font-weight: var(--font-body-font-weight);letter-spacing: var(--typography-body-letter-spacing);line-height: var(--typography-body-line-height);text-transform: none;text-decoration: none;font-style: var(--font-body-font-style);
text-smallfont-family: var(--font-small-font-family);font-size: var(--typography-small-font-size);font-weight: var(--font-small-font-weight);letter-spacing: var(--typography-small-letter-spacing);line-height: var(--typography-small-line-height);text-transform: none;text-decoration: none;font-style: var(--font-small-font-style);
text-form-labelfont-family: var(--font-form-label-font-family);font-size: var(--typography-form-label-font-size);font-weight: var(--font-form-label-font-weight);letter-spacing: var(--typography-form-label-letter-spacing);line-height: var(--typography-form-label-line-height);text-transform: none;text-decoration: none;font-style: var(--font-form-label-font-style);
text-form-descriptionfont-family: var(--font-form-description-font-family);font-size: var(--typography-form-description-font-size);font-weight: var(--font-form-description-font-weight);letter-spacing: var(--typography-form-description-letter-spacing);line-height: var(--typography-form-description-line-height);text-transform: none;text-decoration: none;font-style: var(--font-form-description-font-style);
text-form-blockfont-family: var(--font-form-block-font-family);font-size: var(--typography-form-block-font-size);font-weight: var(--font-form-block-font-weight);letter-spacing: var(--typography-form-block-letter-spacing);line-height: var(--typography-form-block-line-height);text-transform: none;text-decoration: none;font-style: var(--font-form-block-font-style);
text-form-inlinefont-family: var(--font-form-inline-font-family);font-size: var(--typography-form-inline-font-size);font-weight: var(--font-form-inline-font-weight);letter-spacing: var(--typography-form-inline-letter-spacing);line-height: var(--typography-form-inline-line-height);text-transform: none;text-decoration: none;font-style: var(--font-form-inline-font-style);
text-cookie-consent-titlefont-family: var(--font-cookie-consent-title-font-family);font-size: var(--cookie-consent-title-font-size);font-weight: var(--font-cookie-consent-title-font-weight);letter-spacing: var(--cookie-consent-title-letter-spacing);line-height: var(--cookie-consent-title-line-height);text-transform: none;text-decoration: none;font-style: var(--font-cookie-consent-title-font-style);
text-cookie-consent-descriptionfont-family: var(--font-cookie-consent-description-font-family);font-size: var(--cookie-consent-description-font-size);font-weight: var(--font-cookie-consent-description-font-weight);letter-spacing: var(--cookie-consent-description-letter-spacing);line-height: var(--cookie-consent-description-line-height);text-transform: none;text-decoration: none;font-style: var(--font-cookie-consent-description-font-style);
text-cookie-consent-category-titlefont-family: var(--font-cookie-consent-category-title-font-family);font-size: var(--cookie-consent-category-title-font-size);font-weight: var(--font-cookie-consent-category-title-font-weight);letter-spacing: var(--cookie-consent-category-title-letter-spacing);line-height: var(--cookie-consent-category-title-line-height);text-transform: none;text-decoration: none;font-style: var(--font-cookie-consent-category-title-font-style);
text-cookie-consent-button-primaryfont-family: var(--font-cookie-consent-button-primary-font-family);font-size: var(--cookie-consent-button-primary-font-size);font-weight: var(--font-cookie-consent-button-primary-font-weight);letter-spacing: var(--cookie-consent-button-primary-letter-spacing);line-height: var(--cookie-consent-button-primary-line-height);text-transform: none;text-decoration: none;font-style: var(--font-cookie-consent-button-primary-font-style);
text-cookie-consent-button-secondaryfont-family: var(--font-cookie-consent-button-secondary-font-family);font-size: var(--cookie-consent-button-secondary-font-size);font-weight: var(--font-cookie-consent-button-secondary-font-weight);letter-spacing: var(--cookie-consent-button-secondary-letter-spacing);line-height: var(--cookie-consent-button-secondary-line-height);text-transform: none;text-decoration: none;font-style: var(--font-cookie-consent-button-secondary-font-style);
color-labelcolor: var(--color-typography-label);
color-headingcolor: var(--color-typography-heading);
color-bodycolor: var(--color-typography-body);