My personal website
1/**
2 * Heading Styles
3 *
4 * Uses the global typography system with fluid type scaling. All headings are bold (font-weight: 700) by default.
5 *
6 * Size prop controls visual appearance independent of semantic level. Example: <Heading level={3} size="xl"> renders an
7 * h3 with xl styling
8 */
9export const HeadingStyles = {
10 base: 'font-dm-sans',
11 sizes: {
12 sm: 'heading-sm',
13 base: 'heading-base',
14 md: 'heading-md',
15 lg: 'heading-lg',
16 xl: 'heading-xl',
17 '2xl': 'heading-2xl',
18 },
19} as const;