Skip to content
Design Tokens for the Foundation Design System
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
package.json update lerna.js to 2.2.0 Sep 18, 2017

Foundation Design System Tokens

Design Tokens are essential particles of a design system, specifically, they are variables that store visual design attributes. They can contain colors (hex, RGBA or other values), sizing units (pixels, rems, etc.) and many more. They're essential for creating and maintaing a consistent visual system.

This is a monorepository for all Envato Foundation Design System tokens build with lerna.js.

Package Version
@envato/foundation-design-system-tokens npm
@envato/foundation-design-system-tokens-colors npm
@envato/foundation-design-system-tokens-glyphs npm
@envato/foundation-design-system-tokens-typography npm
@envato/foundation-design-system-tokens-breakpoints npm
@envato/foundation-design-system-tokens-spacing npm


To install all the tokens from the Foundation Design System:

$ npm i @envato/foundation-design-system-tokens

To install only the colors tokens from the Foundation Design System:

$ npm i @envato/foundation-design-system-tokens-colors

Each package includes a .css, .js, .sass, .scss that can be imported in your projects:



@import "@envato/foundation-design-system-tokens-colors/dist/index.css";


Make sure you have lerna.js installed globally:

npm install --global lerna@2.2.0

Install dependencies for all packages:

$ lerna bootstrap

To build target style files from tokens run:

$ lerna run build

Publishing pacakge(s) to NPM

To publish a version for all packages run:

$ lerna publish

Note: When you make changes to one of the packages, lerna.js will auto detect which version has been updated and only prompt you to bump the version of that particular package.

To publish a beta version for packages run:

$ lerna publish --npm-tag=beta

To publish a scoped package as public, you need to add the following into the package.json in each package.

"publishConfig": {
  "access": "public"



You can’t perform that action at this time.