design-tokens.json

{
  "grid": {
    "square": "4px"
  },
  "spacing": [
    {
      "factor": [
        {
          "no-space": 0
        },
        {
          "xxxs-space": "square"
        },
        {
          "xxs-space":  "square * 2"
        },
        {
          "xs-space": "square * 3"
        },
        {
          "s-space": "square * 4"
        },
        {
          "m-space": "square * 6"
        },
        {
          "l-space": "square * 12"
        },
        {
          "xl-space": "square * 24"
        }
      ]
    }
  ],
  "typography": [
    {
      "scale-ratio": "1.125"
    },
    {
      "base-font-size": "16px"
    },
    {
      "base-line-height": "m-space"
    },
    {
      "font-stack": "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif"
    },
    {
      "font-stack-monospace": "Monaco, Consolas, 'Lucida Console', monospace"
    },
    {
      "weights": [
        {
          "regular": 400
        },
        {
          "medium": 500
        },
        {
          "semi-bold": 600
        },
        {
          "bold": 700
        }
      ]
    },
    {
      "headers": [
        {
          "h1": [
            {
              "font-size": "pow(scale-ratio, 6)",
              "weight": "medium",
              "line-height-factor": "square * 10"
            }
          ],
          "h2": [
            {
              "font-size-power": "pow(scale-ratio, 4)",
              "weight": "medium",
              "line-height-factor": "square * 10"
            }
          ],
          "h3": [
            {
              "font-size-power": "pow(scale-ratio, 3)",
              "weight": "medium",
              "line-height-factor": "square * 8"
            }
          ],
          "h4": [
            {
              "font-size-power": "pow(scale-ratio, 2)",
              "weight": "medium",
              "line-height-factor": "square * 8"
            }
          ],
          "h5": [
            {
              "font-size-power": "pow(scale-ratio, 1)",
              "weight": "bold",
              "line-height-factor": "base-line-height"
            }
          ],
          "h6": [
            {
              "font-size-power": "base-font-size",
              "weight": "bold",
              "line-height-factor": "base-line-height"
            }
          ]
        }
      ]
    }
  ],
  "radiuses": [
    {
      "s-radius": "radius / 2"
    },
    {
      "radius": "square"
    },
    {
      "l-radius": "radius * 2"
    }
  ]
}