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

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

{
  "ams": {
    "typography": {
      "font-family": {
        "$value": ["Amsterdam Sans", "Arial", "sans-serif"],
        "$type": "fontFamily",
        "$description": "The corporate typeface with system fallbacks."
      },
      "hyphenate-limit-chars": {
        "$value": "auto",
        "$description": "Lets the browser decide the minimum character count for hyphenation.",
        "$extensions": {
          "nl.amsterdam.type": "hyphenateLimitChars"
        }
      },
      "body-text": {
        "$description": "Text styles for running body copy. Font sizes scale fluidly between 320px and 1600px viewports.",
        "font-size": {
          "$value": "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)",
          "$description": "Scales from 18px to 20px.",
          "$extensions": {
            "nl.amsterdam.type": "fontSize"
          }
        },
        "font-weight": {
          "$value": "400",
          "$type": "fontWeight"
        },
        "line-height": {
          "$value": 1.6,
          "$extensions": {
            "nl.amsterdam.subtype": "lineHeight"
          },
          "$type": "number"
        },
        "bold": {
          "font-weight": {
            "$value": "800",
            "$type": "fontWeight"
          }
        },
        "small": {
          "$description": "For supporting text like captions and metadata.",
          "font-size": {
            "$value": {
              "value": 1,
              "unit": "rem"
            },
            "$type": "dimension",
            "$description": "Fixed at 16px; does not scale."
          },
          "line-height": {
            "$value": 1.5,
            "$extensions": {
              "nl.amsterdam.subtype": "lineHeight"
            },
            "$type": "number"
          }
        },
        "large": {
          "$description": "For introductory or lead text.",
          "font-size": {
            "$value": "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)",
            "$description": "Scales from 21px to 25px.",
            "$extensions": {
              "nl.amsterdam.type": "fontSize"
            }
          },
          "line-height": {
            "$value": 1.5,
            "$extensions": {
              "nl.amsterdam.subtype": "lineHeight"
            },
            "$type": "number"
          }
        },
        "x-large": {
          "$description": "For short prominent text, e.g. blockquotes.",
          "font-size": {
            "$value": "clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem)",
            "$description": "Scales from 24px to 32px.",
            "$extensions": {
              "nl.amsterdam.type": "fontSize"
            }
          },
          "line-height": {
            "$value": 1.4,
            "$extensions": {
              "nl.amsterdam.subtype": "lineHeight"
            },
            "$type": "number"
          }
        }
      },
      "heading": {
        "$description": "Text styles for section headings. Larger headings use tighter line-heights for visual balance.",
        "font-weight": {
          "$value": "800",
          "$type": "fontWeight"
        },
        "text-wrap": {
          "$value": "balance",
          "$description": "Distributes heading text evenly across lines for a more balanced appearance.",
          "$extensions": {
            "nl.amsterdam.type": "textWrap"
          }
        },
        "1": {
          "font-size": {
            "$value": "clamp(2rem, 1.7143rem + 1.4286vw, 3rem)",
            "$description": "Scales from 32px to 48px.",
            "$extensions": {
              "nl.amsterdam.type": "fontSize"
            }
          },
          "line-height": {
            "$value": 1.2,
            "$extensions": {
              "nl.amsterdam.subtype": "lineHeight"
            },
            "$type": "number"
          }
        },
        "2": {
          "font-size": {
            "$value": "{ams.typography.body-text.x-large.font-size}",
            "$extensions": {
              "nl.amsterdam.type": "fontSize"
            }
          },
          "line-height": {
            "$value": 1.3,
            "$extensions": {
              "nl.amsterdam.subtype": "lineHeight"
            },
            "$type": "number"
          }
        },
        "3": {
          "font-size": {
            "$value": "{ams.typography.body-text.large.font-size}",
            "$extensions": {
              "nl.amsterdam.type": "fontSize"
            }
          },
          "line-height": {
            "$value": 1.3,
            "$extensions": {
              "nl.amsterdam.subtype": "lineHeight"
            },
            "$type": "number"
          }
        },
        "4": {
          "font-size": {
            "$value": "{ams.typography.body-text.font-size}",
            "$extensions": {
              "nl.amsterdam.type": "fontSize"
            }
          },
          "line-height": {
            "$value": 1.4,
            "$extensions": {
              "nl.amsterdam.subtype": "lineHeight"
            },
            "$type": "number"
          }
        },
        "5": {
          "font-size": {
            "$value": "{ams.typography.body-text.small.font-size}",
            "$extensions": {
              "nl.amsterdam.type": "fontSize"
            }
          },
          "line-height": {
            "$value": 1.4,
            "$extensions": {
              "nl.amsterdam.subtype": "lineHeight"
            },
            "$type": "number"
          }
        }
      }
    }
  }
}