Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Forma 36 Tokens

The design tokens for Forma 36, available as JSON, CSS, and SCSS.

These tokens are a key part of our design system and power both forma-36-react-components and forma-36-fcss.

Library usage

Install the package to your project

yarn add @contentful/forma-36-tokens

Or for NPM

npm i @contentful/forma-36-tokens

Import into your project


import F36Tokens from '@contentful/forma-36-tokens';


@import '@contentful/forma-36-tokens/dist/css/index.css';


@import '@contentful/forma-36-tokens/dist/scss/index.scss';


import tokens from '@contentful/forma-36-tokens/dist/json/transitions/transition-easings';


For local development run yarn from the root of this repo to install all dependencies and build all packages.

All tokens are kept in the src/tokens directory and organised as so:

├── box-shadows
│   ├── box-shadows.js
│   └── glows.js
├── colors
│   ├── colors-blue.js
│   ├── colors-contrast.js
│   ├── colors-coral.js
│   ├── colors-elements.js
│   ├── colors-green.js
│   ├── colors-ice.js
│   ├── colors-mint.js
│   ├── colors-orange.js
│   ├── colors-peach.js
│   ├── colors-red.js
│   ├── colors-semantic.js
│   ├── colors-text.js
│   └── colors-white.js
├── spacing.js
├── transitions
│   ├── transition-durations.js
│   └── transition-easings.js
├── typography
│   ├── font-base.js
│   ├── font-size.js
│   ├── font-stack.js
│   ├── font-weight.js
│   ├── letter-spacing.js
│   └── line-height.js
└── typography.js

Creating a build

yarn build

Running the build script will populate the dist directory with separately built JSON, CSS, SCSS and JS file with TS typings.

This script populates the dist folder with all tokens as JSON, CSS, SCSS and JS. For CSS and SCSS builds, an index file is included for ease of importing.

You can’t perform that action at this time.