Skip to content
This repository has been archived by the owner on Jun 1, 2022. It is now read-only.


Folders and files

Last commit message
Last commit date

Latest commit



30 Commits

Repository files navigation

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"