How Design Tokens Work
Each design token is stored in the Figma Nova Tycho Library and is translated into:
- A CSS variable, ready to use in raw CSS styles.
- A Tailwind utility class, mapped to its corresponding CSS variable for easy use in different frameworks.
Example using Nova CSS variables:
Ready to use CSS variables (included in the package)
:root {
--color-level-00-background: var(--color-gray-spark-00);
--color-content-medium-text: var(--color-gray-spark-550);
}
<div class="custom-component">
This content will have a background of level 00 and medium emphasis color text.
</div>
<style>
.custom-component {
background-color: var(--color-level-00-background);
color: var(--color-content-medium-text);
}
</style>
Example using Nova utility classes:
Ready to use Nova Utility classes (created with Tailwind and included in the package)
<div class="bg-level-00 text-medium">
This content will have a background of level 00
</div>
