# @netlify/netlify-design-tokens

> Netlify's design tokens for sharing across products and repos

Latest version **7.1.0** (published 2025-06-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @netlify/netlify-design-tokens
pnpm add @netlify/netlify-design-tokens
yarn add @netlify/netlify-design-tokens
bun add @netlify/netlify-design-tokens
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.1.0 |
| Published | 2025-06-24 |
| First published | 2020-12-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 164.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Netlify |
| Maintainers | seanroberts, biilmann, eduardoboucas, netlify-bot, sarahetter, mikewen, kathmbeck, hrishikeshk, vitaliyr, denar90, smnh, berdav, youvalv, serhalp-netlify, rmulligan-netlify, akardet |

## Links

- npm: https://www.npmjs.com/package/@netlify/netlify-design-tokens
- Repository: https://github.com/netlify/netlify-design-tokens
- Homepage: https://github.com/netlify/netlify-design-tokens#readme
- Issues: https://github.com/netlify/netlify-design-tokens/issues
- npm.io page: https://npm.io/package/@netlify/netlify-design-tokens

## Recent versions

- 7.1.0 (latest) — 2025-06-24
- 6.0.0-rc.3 (next) — 2023-11-03
- 7.0.0 — 2024-08-27
- 6.0.0 — 2023-11-27
- 6.0.0-rc.2 — 2023-11-03
- 6.0.0-rc.1 — 2023-11-03
- 6.0.0-beta.9 — 2023-10-26
- 6.0.0-beta.8 — 2023-10-26
- 6.0.0-beta.7 — 2023-10-26
- 6.0.0-beta.6 — 2023-10-26
- 6.0.0-beta.5 — 2023-10-25
- 6.0.0-beta.4 — 2023-10-11
- 6.0.0-beta.3 — 2023-10-10
- 6.0.0-beta.2 — 2023-10-05
- 6.0.0-beta.1 — 2023-10-04
- … 14 more at https://npm.io/package/@netlify/netlify-design-tokens/versions

## README

# Netlify Design Tokens [![NPM version](https://img.shields.io/npm/v/@netlify/netlify-design-tokens.svg)](https://npmjs.com/@netlify/netlify-design-tokens)

## Usage

Install the package in the project of your choice:

```bash
yarn add -D @netlify/netlify-design-tokens
```

From there, you may import any of the [`dist`](dist) files into your codebase for reuse as desired:

### CSS

Basic usage:

```css
@import '@netlify/netlify-design-tokens/dist/css/color.css';

.myComponent {
  color: var(--colorFacetsTeal200);
}
```

Global dark mode support:

```css
@import '@netlify/netlify-design-tokens/dist/css/color.css';

:root {
  --colorTeal: var(--colorFacetsTeal200);
}

@media (prefers-color-scheme: dark) {
  :root {
    --colorTeal: var(--colorFacetsTeal500);
  }
}

.myComponent {
  color: var(--colorTeal);
}
```

Alternatively, use the `rgb(<color> / <alpha>)` notation to vary color opacity:

```css
@import '@netlify/netlify-design-tokens/dist/css/color.rgb.css';

:root {
  --colorTeal: var(--colorRgbFacetsTeal200);
}

@media (prefers-color-scheme: dark) {
  :root {
    --colorTeal: var(--colorRgbFacetsTeal200);
  }
}

.myComponent {
  color: rgb(var(--colorTeal) / 50%);
}
```

### JavaScript

```js
import { colorFacetsTeal500 } from '@netlify/netlify-design-tokens';

const teal = colorFacetsTeal500;
```

or:

```js
import * as tokens from '@netlify/netlify-design-tokens';

const teal = tokens.colorFacetsTeal500;
const boldText = tokens.typographyWeightBold;
```

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