Usage
Usage
This section provides instructions and code snippets showing how to access and apply typography in Figma and code, ensuring that both designers and engineers work with a consistent, shared source of truth.
Typography in design
In Figma, typefaces are available as text styles that can be assigned to any text element.
Typography in code
In Code, tokens are available as variables and Custom CSS Properties and can be used in CSS
SCSS
@import (css) "@vandeer/foundation/primitives/typefaces/index.css";
@use "@vandeer/foundation/primitives" as *;
.my-title {
font-family: $vandeer-typography-title-typeface;
}
.my-title-large {
font-family: $vandeer-typography-title-large-size-desktop;
}
.my-text {
font-family: $vandeer-typography-text-typeface;
}
.my-label {
font-family: $vandeer-typography-label-typeface;
}CSS
<!--
Replace x.y.z with the latest version of @vandeer/foundation (e.g. 1.20.0)
-->
<link rel="stylesheet" href="https://rbds-static.redbull.com/@vandeer/foundation/x.y.z/primitives/typefaces/index.css" />
<link rel="stylesheet" href="https://rbds-static.redbull.com/@vandeer/foundation/x.y.z/primitives/index.css" />
<style>
.my-title {
font-family: var(--vandeer-typography-title-typeface);
}
.my-title-large {
font-family: var(--vandeer-typography-title-large-size-desktop);
}
.my-text {
font-family: var(--vandeer-typography-text-typeface);
}
.my-label {
font-family: var(--vandeer-typography-label-typeface);
}
</style>