# @contentful/f36-tokens

> Forma 36 Tokens

Latest version **6.3.1** (published 2026-08-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @contentful/f36-tokens
pnpm add @contentful/f36-tokens
yarn add @contentful/f36-tokens
bun add @contentful/f36-tokens
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.3.1 |
| Published | 2026-08-21 |
| First published | 2021-03-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 93.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | it-internal, whydah-gally, contentful-ecosystem, michaelpearce |

## Links

- npm: https://www.npmjs.com/package/@contentful/f36-tokens
- npm.io page: https://npm.io/package/@contentful/f36-tokens

## Recent versions

- 6.3.1 (latest) — 2026-08-21
- 6.0.0-alpha.2 (alpha) — 2025-11-13
- 4.0.1-beta.2540 (beta) — 2021-11-19
- 4.0.1-beta.2483 (canary) — 2021-11-03
- 4.0.1-next-v4-10931.2481 (next-v4) — 2021-11-03
- 6.3.0 — 2026-08-20
- 6.2.1 — 2026-06-29
- 6.2.0 — 2026-06-25
- 6.1.3 — 2026-06-15
- 6.1.2 — 2026-02-19
- 6.1.1 — 2026-02-18
- 6.1.0 — 2026-02-02
- 6.0.0 — 2026-02-02
- 6.0.0-alpha.1 — 2025-10-13
- 5.1.0 — 2025-08-29
- … 244 more at https://npm.io/package/@contentful/f36-tokens/versions

## README

# 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 [`f36-components`](https://github.com/contentful/forma-36/tree/main/packages/components).

## Library usage

### Install the package to your project

```bash
yarn add @contentful/f36-tokens
```

Or for NPM

```bash
npm i @contentful/f36-tokens
```

### Import into your project

#### JS

```js
import F36Tokens from '@contentful/f36-tokens';
```

#### CSS

```css
@import '@contentful/f36-tokens/dist/css/index.css';
```

#### JSON

```js
import tokens from '@contentful/f36-tokens/dist/json/transitions/transition-easings.json';
```

## Development

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

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

```
.
├── border-radius
│   ├── border-radius.js
├── 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

```bash
pnpm build
```

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

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

---
_Source: https://npm.io/package/@contentful/f36-tokens · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._