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.