Design tokens

Take advantage of Seeds' core styles in your code, no matter what technologies you use.

Design tokens documented on Seeds are available as variables for a variety of platforms that can be installed via your package manager of choice. Using the official Seeds packages means you'll get any future updates to our values and allows you to copy and paste variable names from the Seeds website directly into your code.

On versioning:
Seeds packages use Semantic Versioning so that consumers can easily understand the types of changes between two versions by comparing the version numbers. All version numbers follow this format: major.minor.patch

When we release updates to these packages, we follow these guidelines when bumping the version numbers:

  • major is incremented when there are breakinng changes
  • minor is incremented when non-breaking features are added
  • patch is incremented when a bug is fixed

Color

v2.2.0
Yarn
yarn add @sproutsocial/seeds-color
npm
npm install @sproutsocial/seeds-color --save

File structure

Network color

v2.20.0
Yarn
yarn add @sproutsocial/seeds-networkcolor
npm
npm install @sproutsocial/seeds-networkcolor --save

File structure

Typography

v3.7.0
Yarn
yarn add @sproutsocial/seeds-typography
npm
npm install @sproutsocial/seeds-typography --save

File structure

Space

v0.8.0
Yarn
yarn add @sproutsocial/seeds-space
npm
npm install @sproutsocial/seeds-space --save

File structure

Border

v1.6.2
Yarn
yarn add @sproutsocial/seeds-border
npm
npm install @sproutsocial/seeds-border --save

File structure

Motion

v1.7.0
Yarn
yarn add @sproutsocial/seeds-motion
npm
npm install @sproutsocial/seeds-motion --save

File structure

Depth

v3.4.0
Yarn
yarn add @sproutsocial/seeds-depth
npm
npm install @sproutsocial/seeds-depth --save

File structure

Dataviz

v0.7.0
Yarn
yarn add @sproutsocial/seeds-dataviz
npm
npm install @sproutsocial/seeds-dataviz --save

File structure