@amsterdam/design-system-tokens
Version:
All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.
114 lines (113 loc) • 3 kB
JSON
{
"ams": {
"heading": {
"1": {
"font-size": {
"$value": "{ams.typography.heading.1.font-size}",
"$extensions": {
"nl.amsterdam.type": "fontSize"
}
},
"line-height": {
"$value": "{ams.typography.heading.1.line-height}",
"$extensions": {
"nl.amsterdam.subtype": "lineHeight",
"nl.amsterdam.type": "number"
}
}
},
"2": {
"font-size": {
"$value": "{ams.typography.heading.2.font-size}",
"$extensions": {
"nl.amsterdam.type": "fontSize"
}
},
"line-height": {
"$value": "{ams.typography.heading.2.line-height}",
"$extensions": {
"nl.amsterdam.subtype": "lineHeight",
"nl.amsterdam.type": "number"
}
}
},
"3": {
"font-size": {
"$value": "{ams.typography.heading.3.font-size}",
"$extensions": {
"nl.amsterdam.type": "fontSize"
}
},
"line-height": {
"$value": "{ams.typography.heading.3.line-height}",
"$extensions": {
"nl.amsterdam.subtype": "lineHeight",
"nl.amsterdam.type": "number"
}
}
},
"4": {
"font-size": {
"$value": "{ams.typography.heading.4.font-size}",
"$extensions": {
"nl.amsterdam.type": "fontSize"
}
},
"line-height": {
"$value": "{ams.typography.heading.4.line-height}",
"$extensions": {
"nl.amsterdam.subtype": "lineHeight",
"nl.amsterdam.type": "number"
}
}
},
"5": {
"font-size": {
"$value": "{ams.typography.heading.5.font-size}",
"$extensions": {
"nl.amsterdam.type": "fontSize"
}
},
"line-height": {
"$value": "{ams.typography.heading.5.line-height}",
"$extensions": {
"nl.amsterdam.subtype": "lineHeight",
"nl.amsterdam.type": "number"
}
}
},
"color": {
"$value": "{ams.color.text.default}",
"$extensions": {
"nl.amsterdam.type": "color"
}
},
"font-family": {
"$value": "{ams.typography.font-family}",
"$extensions": {
"nl.amsterdam.type": "fontFamily"
}
},
"font-weight": {
"$value": "{ams.typography.heading.font-weight}",
"$extensions": {
"nl.amsterdam.type": "fontWeight"
}
},
"text-wrap": {
"$value": "{ams.typography.heading.text-wrap}",
"$extensions": {
"nl.amsterdam.type": "textWrap"
}
},
"inverse": {
"color": {
"$value": "{ams.color.text.inverse}",
"$extensions": {
"nl.amsterdam.type": "color"
}
}
}
}
}
}