Let's have some fun with Sketch's 💎 new embed feature 😺💪 and use it for documenting our design systems design decisions (design tokens).

All design tokens autogenerated by Stratos Tokens 2021 that has built in Style Dictionary support, works with macOS and Windows and supports any design tokens you can dream of 🌈🎉

Click on the Sketch icon to download this Style Dictionary Sketch file 💎

Click on the Sketch icon to download this Style Dictionary Sketch file 💎

Design tokens {color}

{
  "color": {
    "base": {
      "primary": {
        "value": "rgba(254,85,85,1)"
      },
      "secondary": {
        "value": "rgba(252,122,165,1)"
      }
    },
    "background": {
      "value": "rgba(222,246,255,1)"
    },
    "text": {
      "value": "rgba(0,0,0,1)"
    }
  }
}

Design tokens {spacing}

{
  "spacing": {
    "small": {
      "value": "10px"
    },
    "medium": {
      "value": "30px"
    },
    "large": {
      "value": "40px"
    }
  }
}

Design tokens {sizes}

{
  "size": {
    "text": {
      "small": {
        "value": 0.75
      },
      "medium": {
        "value": 1
      },
      "base": {
        "value": 1
      },
      "large": {
        "value": 1.5
      }
    }
  }
}

Design tokens {font}

{
  "font": {
    "family": {
      "base": {
        "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
      },
      "code": {
        "value": "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace"
      }
    }
  }
}

🥁

Okey now lets impress your developers by running all the raw design token data through the built-in Style Dictionary magic machine.

Style Dictionary Builds📗