Appearance
Typography
The FastTrack type system uses two font families and a consistent scale from display to caption. All values are defined as CSS custom properties in public/assets/styles/typography.css.
The token tiles below are generated at build time from that CSS file via typography.data.js. To add, remove, or rename a token, edit the CSS — this page updates automatically.
Font Families
Font Families
Inter — The quick brown fox jumps over the lazy dog
Noto Sans Mono — 0123456789
css
font-family: var(--font-primary); /* Inter */
font-family: var(--font-monospaced); /* Noto Sans Mono */font-family: var(--font-primary); /* Inter */
font-family: var(--font-monospaced); /* Noto Sans Mono */Font Weights
Font Weights
--font-weight-bold700--font-weight-regular400Type Scale (FTDNA)
Each style groups its font-size, line-height, font-weight, and (where defined) letter-spacing / text-decoration under a --text-{category}-{variant}-* namespace.
Display
display.l
--text-display-l-font-size72px--text-display-l-line-height72px--text-display-l-font-weight700--text-display-l-letter-spacing-4pxdisplay.m
--text-display-m-font-size38px--text-display-m-line-height38px--text-display-m-font-weight700--text-display-m-letter-spacing-2pxHeading
heading.m-bold
--text-heading-m-bold-font-size20px--text-heading-m-bold-line-height24px--text-heading-m-bold-font-weight700heading.s
--text-heading-s-font-size16px--text-heading-s-line-height20px--text-heading-s-font-weight400heading.s-bold
--text-heading-s-bold-font-size16px--text-heading-s-bold-line-height20px--text-heading-s-bold-font-weight700Body
body.l
--text-body-l-font-size15px--text-body-l-line-height24px--text-body-l-font-weight400body.l-bold
--text-body-l-bold-font-size15px--text-body-l-bold-line-height24px--text-body-l-bold-font-weight700body.m
--text-body-m-font-size14px--text-body-m-line-height20px--text-body-m-font-weight400body.bold
--text-body-bold-font-size14px--text-body-bold-line-height20px--text-body-bold-font-weight700body.s
--text-body-s-font-size12px--text-body-s-line-height16px--text-body-s-font-weight400body.s-bold
--text-body-s-bold-font-size12px--text-body-s-bold-line-height16px--text-body-s-bold-font-weight700Caption
caption.m
--text-caption-m-font-size12px--text-caption-m-line-height16px--text-caption-m-font-weight400caption.m-bold
--text-caption-m-bold-font-size12px--text-caption-m-bold-line-height16px--text-caption-m-bold-font-weight700caption.s
--text-caption-s-font-size10px--text-caption-s-line-height12px--text-caption-s-letter-spacing0.2px--text-caption-s-font-weight400caption.s-bold
--text-caption-s-bold-font-size10px--text-caption-s-bold-line-height12px--text-caption-s-bold-letter-spacing0.2px--text-caption-s-bold-font-weight700Variant
variant.cta
--text-variant-cta-font-size12px--text-variant-cta-font-weight700variant.link
--text-variant-link-font-weight400--text-variant-link-text-decorationunderlineLegacy Tokens
These tokens predate the FTDNA --text-* namespace. New code should prefer the FTDNA tokens or utility classes above.
Legacy Tokens
--headline-font-size120px--headline-line-height124px--headline-letter-spacing-0.2px--headline-font-weightvar(--font-weight-bold)--section-font-size72px--section-line-height76px--section-letter-spacing-0.2px--section-font-weightvar(--font-weight-bold)--heading-font-size38px--heading-line-height45px--heading-letter-spacing-0.2px--heading-font-weightvar(--font-weight-bold)--title-font-size20px--title-line-height25px--title-font-weightvar(--font-weight-bold)--sub-title-font-size16px--sub-title-line-height23px--sub-title-font-weightvar(--font-weight-regular)--sub-title-bold-font-sizevar(--sub-title-font-size)--sub-title-bold-line-heightvar(--sub-title-line-height)--sub-title-bold-font-weightvar(--font-weight-bold)--ai-body-font-size15px--ai-body-line-height20px--ai-body-font-weightvar(--font-weight-regular)--body-font-size14px--body-line-height17px--body-font-weightvar(--font-weight-regular)--body-bold-font-sizevar(--body-font-size)--body-bold-line-heightvar(--body-line-height)--body-bold-font-weightvar(--font-weight-bold)--hyperlink-font-sizevar(--body-font-size)--hyperlink-line-heightvar(--body-line-height)--hyperlink-font-weightvar(--font-weight-bold)--cta-font-size12px--cta-line-height12px--cta-font-weightvar(--font-weight-bold)--note-font-size12px--note-line-height12px--note-font-weightvar(--font-weight-regular)--note-bold-font-sizevar(--note-font-size)--note-bold-font-weightvar(--font-weight-bold)--caption-font-size10px--caption-line-height12px--caption-letter-spacing0.4px--caption-font-weightvar(--font-weight-bold)--meta-overline-font-size9px--meta-overline-line-height12px--meta-overline-letter-spacing0.4px--meta-overline-font-weightvar(--font-weight-bold)Utility Classes
.text-* classes apply the full style (size, line-height, weight, letter-spacing where applicable):
css
.text-body-m {
font-size: var(--text-body-m-font-size);
line-height: var(--text-body-m-line-height);
font-weight: var(--text-body-m-font-weight);
}
.text-caption-s {
font-size: var(--text-caption-s-font-size);
line-height: var(--text-caption-s-line-height);
letter-spacing: var(--text-caption-s-letter-spacing);
font-weight: var(--text-caption-s-font-weight);
}
/* All styles have a matching class — see typography.css for the full list */.text-body-m {
font-size: var(--text-body-m-font-size);
line-height: var(--text-body-m-line-height);
font-weight: var(--text-body-m-font-weight);
}
.text-caption-s {
font-size: var(--text-caption-s-font-size);
line-height: var(--text-caption-s-line-height);
letter-spacing: var(--text-caption-s-letter-spacing);
font-weight: var(--text-caption-s-font-weight);
}
/* All styles have a matching class — see typography.css for the full list */Import path (from consuming projects):
js
import '@fasttrack-solutions/vue-components-lib/dist/assets/styles/typography.css';import '@fasttrack-solutions/vue-components-lib/dist/assets/styles/typography.css';