@maggioli-design-system/design-tokens
Version:
This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.
185 lines (184 loc) • 5.66 kB
JSON
{
"typography": {
"title": {
"fontFamily": {
"value": [
"Roboto",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"'Segoe UI'",
"sans-serif"
]
},
"variants": {
"h1": {
"fontSize": { "value": "{typography.fontSize.4xl}" },
"fontWeight": { "value": 900 },
"letterSpacing": { "value": "-0.4px" },
"lineHeight": { "value": "{typography.leading.4xl}" }
},
"h2": {
"fontSize": { "value": "{typography.fontSize.3xl}" },
"fontWeight": { "value": 900 },
"letterSpacing": { "value": "-0.4px" },
"lineHeight": { "value": "{typography.leading.3xl}" }
},
"h3": {
"fontSize": { "value": "{typography.fontSize.2xl}" },
"fontWeight": { "value": 900 },
"letterSpacing": { "value": "-0.4px" },
"lineHeight": { "value": "{typography.leading.2xl}" }
},
"h4": {
"fontSize": { "value": "{typography.fontSize.xl}" },
"fontWeight": { "value": 700 },
"letterSpacing": { "value": "-0.4px" },
"lineHeight": { "value": "{typography.leading.xl}" }
},
"h5": {
"fontSize": { "value": "{typography.fontSize.lg}" },
"fontWeight": { "value": 700 },
"letterSpacing": { "value": "-0.4px" },
"lineHeight": { "value": "{typography.leading.lg}" }
},
"h6": {
"fontSize": { "value": "{typography.fontSize.md}" },
"fontWeight": { "value": 700 },
"letterSpacing": { "value": "-0.4px" },
"lineHeight": { "value": "{typography.leading.md}" }
},
"action": {
"fontSize": { "value": "{typography.fontSize.sm}" },
"fontWeight": { "value": 500 },
"lineHeight": { "value": "{typography.leading.md}" }
}
}
},
"info": {
"fontFamily": {
"value": [
"Karla",
"system-ui",
"-apple-system",
"BlinkMacSystemFont",
"'Segoe UI'",
"sans-serif"
]
},
"variants": {
"paragraph": {
"fontSize": { "value": "{typography.fontSize.lg}" },
"fontWeight": { "value": 400 },
"lineHeight": { "value": "{typography.leading.xl}" },
"variants": {
"bold": {
"fontWeight": { "value": 700 }
}
}
},
"detail": {
"fontSize": { "value": "{typography.fontSize.md}" },
"fontWeight": { "value": 400 },
"lineHeight": { "value": "{typography.leading.md}" },
"variants": {
"bold": {
"fontWeight": { "value": 700 }
}
}
},
"caption": {
"fontSize": { "value": "{typography.fontSize.sm}" },
"fontWeight": { "value": 400 },
"lineHeight": { "value": "{typography.leading.sm}" },
"variants": {
"bold": {
"fontWeight": { "value": 700 }
}
}
},
"label": {
"fontSize": { "value": "{typography.fontSize.xs}" },
"fontWeight": { "value": 700 },
"lineHeight": { "value": "{typography.leading.xs}" },
"textTransform": { "value": "uppercase" }
},
"option": {
"fontSize": { "value": "{typography.fontSize.2xs}" },
"fontWeight": { "value": 700 },
"letterSpacing": { "value": "-0.4px" },
"lineHeight": { "value": "{typography.leading.2xs}" },
"textTransform": { "value": "uppercase" }
},
"tip": {
"fontSize": { "value": "{typography.fontSize.xs}" },
"fontWeight": { "value": 400 },
"lineHeight": { "value": "{typography.leading.xs}" }
}
}
},
"read": {
"fontFamily": {
"value": [
"'Merriweather'",
"Times",
"'Times New Roman'",
"serif"
]
},
"variants": {
"paragraph": {
"fontSize": { "value": "{typography.fontSize.lg}" },
"fontWeight": { "value": 300 },
"lineHeight": { "value": "{typography.leading.xl}" },
"variants": {
"bold": {
"fontWeight": { "value": 700 }
}
}
},
"detail": {
"fontSize": { "value": "{typography.fontSize.md}" },
"fontWeight": { "value": 300 },
"lineHeight": { "value": "{typography.leading.md}" },
"variants": {
"bold": {
"fontWeight": { "value": 700 }
}
}
},
"caption": {
"fontSize": { "value": "{typography.fontSize.sm}" },
"fontWeight": { "value": 400 },
"lineHeight": { "value": "{typography.leading.sm}" },
"variants": {
"bold": {
"fontWeight": { "value": 700 }
}
}
}
}
},
"code": {
"fontFamily": {
"value": [
"'Roboto Mono'",
"'Courier New'",
"monospace"
]
},
"variants": {
"snippet": {
"fontSize": { "value": "{typography.fontSize.md}" },
"fontWeight": { "value": 400 },
"lineHeight": { "value": "{typography.leading.md}" }
},
"hack": {
"fontSize": { "value": "{typography.fontSize.sm}" },
"fontWeight": { "value": 400 },
"lineHeight": { "value": "{typography.leading.sm}" }
}
}
}
}
}