Typography
The full Figma type scale as SCSS maps and mixins. The module is CSS-free — it declares only tokens and mixins, so it’s safe to @use from any component stylesheet without emitting CSS. The Avenir @font-face declarations live in a separate typography-fonts entry that you load once, globally.
@use '@presencelearning/styles/typography' as t;
.heading { @include t.h1;}.section { @include t.h6;}.label { @include t.overline;} // adds text-transform: uppercase.custom { @include t.apply(t.$body-1);}.foo { font-family: t.$font-family-base; font-weight: t.$font-weight-bold;}Type scale
Section titled “Type scale”h1 h2 h3 h4 h5 h6 subtitle-1 subtitle-2 body-1 body-2 button caption overline The Avenir @font-face declarations are a side effect — they emit CSS — so they live in their own entry, separate from the CSS-free typography tokens/mixins module. Load them once, globally (e.g. from your app’s top-level stylesheet), not from individual component stylesheets:
// Once, in a global stylesheet:@use '@presencelearning/styles/typography-fonts';A precompiled stylesheet is also available for consumers that prefer a plain CSS import:
@import '@presencelearning/styles/typography-fonts.css';| Weight | File | Style |
| ------ | ---------------------------------------- | ------------------- |
| 400 | avenir-roman-400-webfont.{woff,woff2} | Regular |
| 500 | avenir-medium-500-webfont.{woff,woff2} | Medium |
| 800 | avenir-heavy-800-webfont.{woff,woff2} | Bold (Avenir Heavy) |
| 900 | avenir-black-900-webfont.{woff,woff2} | Black |
The @font-face rules reference fonts via relative ./fonts/... URLs, which any modern bundler (Vite, webpack-sass-loader) resolves automatically when the entry is loaded globally. Direct file URLs are also available at @presencelearning/styles/fonts/....