# @decisiv/design-tokens

> Design tokens for Decisiv's design system

Latest version **1.8.8** (published 2019-12-18) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.8.8 |
| Published | 2019-12-18 |
| First published | 2019-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 52.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Decisiv UI Development Team |
| Maintainers | andrewtpoe, ddaniell, decisiv |

## Links

- npm: https://www.npmjs.com/package/@decisiv/design-tokens
- npm.io page: https://npm.io/package/@decisiv/design-tokens

## Dependencies (1)

- [polished](https://npm.io/package/polished.md) ^3.4.1

## Recent versions

- 1.8.8 (latest) — 2019-12-18
- 1.8.9-alpha.297 (alpha) — 2026-09-24
- 1.8.9-alpha.294 (next) — 2023-06-16
- 1.8.9-alpha.296 — 2026-05-20
- 1.8.9-alpha.295 — 2026-05-20
- 1.8.9-alpha.273 — 2023-01-16
- 1.8.9-alpha.259 — 2022-09-07
- 1.8.7 — 2019-11-22
- 1.8.6 — 2019-10-24
- 1.8.5 — 2019-10-16
- 1.8.4 — 2019-10-15
- 1.8.3 — 2019-10-10
- 1.8.2 — 2019-10-09
- 1.8.1 — 2019-10-09

## README

# Key Design System: Design Tokens

This package provides the core, shared design tokens that define various aspects
of the look and feel of the Key Design System.

The basic structure of the design token dictionary is as follows:

```js
{
  color: {
    base: {
      snowWhite: ...,
      fullMoon: ...,
      halfMoon: ...,
      quarterMoon: ...,
      alaskanHusky: ...,
      blackSheep: ...,
      midnight: ...,
      charcoal: ...,
    },
    interaction: {
      pacificOcean: ...,
      indianOcean: ...,
      pacificOcean15: ...,
      pacificOcean40: ...,
      redWine: ...,
      arcticOcean: ...,
      atlanticOcean: ...,
      arcticOcean15: ...,
      arcticOcean40: ...,
      roseWine: ...,
    },
    opacity: {
      fullMoon50: ...,
      midnight50: ...,
      snowWhite15: ...,
      snowWhite40: ...,
      charcoal15: ...,
      charcoal40: ...,
      charcoal75: ...,
    },
    shadow: {
      light: { ... },
      dark: { ... },
    },
    status: {
      information: { ... },
      success: { ... },
      warning: { ... },
      danger: { ... },
    },
    visualInterest: {
      berryCrisp: { ... },
      koolaidCake: { ... },
      cookieMonster: { ... },
      cottonCandy: { ... },
      fizzyLime: { ... },
      mamboMango: { ... },
      carrotCake: { ... },
      roseGummy: { ... },
      licoriceMousse: { ... },
    },
  },
  iconography: { ... },
  skyplanes: { ... },
  spacing: {
    base: ...,
  },
  typography: {
    height: { ... },
    size: { ... },
    typeface: { ... },
    weight: { ... },
  },
}
```

For details on the design token values, color usage, etc., see the
[Key Design System documentation](https://key-design-system.decisiv.com).

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