@decisiv/design-tokens
TypeScript icon, indicating that this package has built-in type declarations

1.8.8 • Public • Published

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:

{
  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.

Readme

Keywords

none

Package Sidebar

Install

npm i @decisiv/design-tokens

Weekly Downloads

166

Version

1.8.8

License

MIT

Unpacked Size

54.1 kB

Total Files

58

Last publish

Collaborators

  • ddaniell
  • andrewtpoe
  • decisiv