@amsterdam/design-system-tokens/dist/compact.json

All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.

{
  "ams": {
    "border": {
      "width": {
        "s": "0.0625rem",
        "m": "0.0625rem",
        "l": "0.125rem",
        "xl": "0.1875rem",
        "negative": {
          "m": "-0.0625rem",
          "xl": "-0.1875rem"
        }
      }
    },
    "color": {
      "background": {
        "body": "#e8e8e8",
        "default": "#ffffff"
      }
    },
    "space": {
      "xs": "0.25rem",
      "s": "0.5rem",
      "m": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)",
      "l": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
      "xl": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
      "2xl": "clamp(2rem, 1.7143rem + 1.4286vw, 3rem)"
    },
    "typography": {
      "body-text": {
        "font-size": "1rem",
        "line-height": 1.5,
        "small": {
          "font-size": "0.875rem",
          "line-height": 1.4
        },
        "large": {
          "font-size": "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)",
          "line-height": 1.4
        },
        "x-large": {
          "font-size": "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)",
          "line-height": 1.3
        }
      },
      "heading": {
        "1": {
          "font-size": "clamp(1.5rem, 1.4286rem + 0.3571vw, 1.75rem)",
          "line-height": 1.2
        },
        "2": {
          "font-size": "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)",
          "line-height": 1.3
        },
        "3": {
          "font-size": "clamp(1.125rem, 1.1071rem + 0.0893vw, 1.1875rem)",
          "line-height": 1.3
        },
        "4": {
          "font-size": "1rem",
          "line-height": 1.4
        },
        "5": {
          "font-size": "0.875rem",
          "line-height": 1.4
        }
      }
    },
    "body": {
      "background-color": "#e8e8e8"
    },
    "grid": {
      "padding-inline": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)",
      "vi-medium": {
        "padding-inline": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)"
      },
      "vi-wide": {
        "padding-inline": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
      },
      "cell": {
        "background-color": "#ffffff",
        "padding-block": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)",
        "padding-inline": "clamp(0.75rem, 0.6786rem + 0.3571vw, 1rem)"
      }
    },
    "page-header": {
      "brand-name": {
        "font-size": "clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem)",
        "line-height": 1.3
      },
      "mega-menu": {
        "padding-block": "0"
      }
    },
    "page": {
      "background-color": "#e8e8e8"
    }
  }
}