Design tokens are the smallest pieces of the Heartwood design system — basically anything that can be described using letters and numbers.
Design tokens for the Heartwood design system. https://sprucelabsai.github.io/heartwood-tokens/.
yarn install @sprucelabs/heartwood-tokens
npm install @sprucelabs/heartwood-tokens
The easiest way to consume Heartwood Tokens is to import them into a
.scss file and use the variables generated by Style Dictionary.
Note: depending on how you want to build your styles, it may be necessary to update your
gulpfile.js, or whatever other build tool you're using.
Once global tokens are imported, you can also use component tokens.
All of the variables generated in Heartwood Tokens use a
!default flag to make theming easy. The best way to override variables is to import your overrides first, and then import tokens:
@import "my-theme.scss"; @import "~@sprucelabs/heartwood-tokens/build/scss/tokens"; @import "~@sprucelabs/heartwood-tokens/build/scss/components";
my-theme.scss, you could for example change the primary color by adding:
Recommended: Make sure to look at https://sprucelabsai.github.io/heartwood-tokens/ to see all the available tokens. Heartwood Tokens don't automatically generate full color palettes, so theming requires attention to detail to avoid unexpected results.
Visit https://sprucelabsai.github.io/heartwood-tokens/assets to download brand assets. You can also use these and icons by importing from the build directory:
Checkout the Figma file to see and use Heartwood Tokens in your designs.
To get started,
git clone email@example.com:sprucelabsai/heartwood-tokens.git and run
To build the tokens, run
npm run build.
If you're adding assets like icons, these can be auto-generated with a script via:
You can run the project's web view locally with
npm run develop. This command cleans out the
build/ directory, generates assets, and builds tokens for all the platforms.