@amsterdam/design-system-tokens/src/brand/ams/space.tokens.json

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

{
  "ams": {
    "space": {
      "$description": "A responsive spacing scale. All values scale fluidly between 320px and 1600px viewports.",
      "xs": {
        "$value": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
        "$description": "Scales from 4px to 6px.",
        "$extensions": {
          "nl.amsterdam.type": "dimension",
          "nl.amsterdam.subtype": "space"
        }
      },
      "s": {
        "$value": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
        "$description": "Scales from 8px to 12px.",
        "$extensions": {
          "nl.amsterdam.type": "dimension",
          "nl.amsterdam.subtype": "space"
        }
      },
      "m": {
        "$value": "clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)",
        "$description": "Scales from 16px to 24px.",
        "$extensions": {
          "nl.amsterdam.type": "dimension",
          "nl.amsterdam.subtype": "space"
        }
      },
      "l": {
        "$value": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)",
        "$description": "Scales from 24px to 36px.",
        "$extensions": {
          "nl.amsterdam.type": "dimension",
          "nl.amsterdam.subtype": "space"
        }
      },
      "xl": {
        "$value": "clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem)",
        "$description": "Scales from 36px to 60px.",
        "$extensions": {
          "nl.amsterdam.type": "dimension",
          "nl.amsterdam.subtype": "space"
        }
      },
      "2xl": {
        "$value": "clamp(3rem, 2.25rem + 3.75vw, 5.625rem)",
        "$description": "Scales from 48px to 90px.",
        "$extensions": {
          "nl.amsterdam.type": "dimension",
          "nl.amsterdam.subtype": "space"
        }
      }
    }
  }
}