design-tokens-compiled.json

{
  "grid": {
    "square": "4px"
  },
  "spacing": [
    {
      "factor": [
        {
          "no-space": 0
        },
        {
          "xxxs-space": "4px"
        },
        {
          "xxs-space":  "8px"
        },
        {
          "xs-space": "12px"
        },
        {
          "s-space": "16px"
        },
        {
          "m-space": "24px"
        },
        {
          "l-space": "48px"
        },
        {
          "xl-space": "96px"
        }
      ]
    }
  ],
  "typography": [
    {
      "scale-ratio": "1.125"
    },
    {
      "base-font-size": "16px"
    },
    {
      "base-line-height": "24px"
    },
    {
      "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": "32px",
              "weight": "medium",
              "line-height-factor": "square * 10"
            }
          ],
          "h2": [
            {
              "font-size-power": "26px",
              "weight": "medium",
              "line-height-factor": "square * 10"
            }
          ],
          "h3": [
            {
              "font-size-power": "23px",
              "weight": "medium",
              "line-height-factor": "square * 8"
            }
          ],
          "h4": [
            {
              "font-size-power": "20px",
              "weight": "medium",
              "line-height-factor": "square * 8"
            }
          ],
          "h5": [
            {
              "font-size-power": "18px",
              "weight": "bold",
              "line-height-factor": "base-line-height"
            }
          ],
          "h6": [
            {
              "font-size-power": "16px",
              "weight": "bold",
              "line-height-factor": "base-line-height"
            }
          ]
        }
      ]
    }
  ],
  "radiuses": [
    {
      "s-radius": "2px"
    },
    {
      "radius": "4px"
    },
    {
      "l-radius": "8px"
    }
  ]
}