Files
greyhaven-design-system/tokens/typography.json
2026-04-13 15:33:00 -05:00

156 lines
4.2 KiB
JSON

{
"typography": {
"$description": "Greyhaven Design System — Typography Tokens",
"fontFamily": {
"sans": {
"$type": "fontFamily",
"$value": ["Aspekta", "Inter", "ui-sans-serif", "system-ui", "sans-serif"],
"$description": "UI labels, buttons, nav, forms — Aspekta primary, Inter fallback"
},
"serif": {
"$type": "fontFamily",
"$value": ["Source Serif 4", "Source Serif Pro", "Georgia", "serif"],
"$description": "Headings, body content, reading — Source Serif primary"
},
"mono": {
"$type": "fontFamily",
"$value": ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"],
"$description": "Code blocks and monospaced content"
}
},
"fontSize": {
"xs": {
"$type": "dimension",
"$value": "0.75rem",
"$description": "12px — metadata, fine print"
},
"sm": {
"$type": "dimension",
"$value": "0.875rem",
"$description": "14px — captions, nav, labels, buttons"
},
"base": {
"$type": "dimension",
"$value": "1rem",
"$description": "16px — body text"
},
"lg": {
"$type": "dimension",
"$value": "1.125rem",
"$description": "18px — large body, subtitles"
},
"xl": {
"$type": "dimension",
"$value": "1.25rem",
"$description": "20px — H3"
},
"2xl": {
"$type": "dimension",
"$value": "1.5rem",
"$description": "24px — H2"
},
"3xl": {
"$type": "dimension",
"$value": "1.875rem",
"$description": "30px — large H2"
},
"4xl": {
"$type": "dimension",
"$value": "2.25rem",
"$description": "36px — H1"
},
"5xl": {
"$type": "dimension",
"$value": "3rem",
"$description": "48px — hero heading"
}
},
"fontWeight": {
"normal": {
"$type": "fontWeight",
"$value": 400,
"$description": "Regular body text"
},
"medium": {
"$type": "fontWeight",
"$value": 500,
"$description": "H3, labels, nav items"
},
"semibold": {
"$type": "fontWeight",
"$value": 600,
"$description": "H1, H2, buttons"
},
"bold": {
"$type": "fontWeight",
"$value": 700,
"$description": "Strong emphasis"
}
},
"lineHeight": {
"tight": {
"$type": "dimension",
"$value": "1.25",
"$description": "Headings"
},
"normal": {
"$type": "dimension",
"$value": "1.5",
"$description": "Default"
},
"relaxed": {
"$type": "dimension",
"$value": "1.625",
"$description": "Body content for readability"
}
},
"letterSpacing": {
"tight": {
"$type": "dimension",
"$value": "-0.025em",
"$description": "Headings — tracking-tight"
},
"normal": {
"$type": "dimension",
"$value": "0em",
"$description": "Body text"
},
"wide": {
"$type": "dimension",
"$value": "0.05em",
"$description": "Uppercase labels"
}
},
"composite": {
"$description": "Pre-composed typography styles for common use cases",
"h1": {
"$description": "Page heading — serif, text-4xl, font-semibold, tracking-tight"
},
"h2": {
"$description": "Section heading — serif, text-2xl, font-semibold, tracking-tight"
},
"h3": {
"$description": "Subsection heading — serif, text-xl, font-medium"
},
"body": {
"$description": "Body text — serif, text-base, leading-relaxed"
},
"caption": {
"$description": "Caption text — sans, text-sm"
},
"nav": {
"$description": "Navigation — sans, text-sm, font-medium"
},
"button": {
"$description": "Button label — sans, text-sm, font-semibold"
},
"label": {
"$description": "Form label — sans, text-sm, font-medium"
},
"metadata": {
"$description": "Metadata — sans, text-xs, font-medium"
}
}
}
}