Variable: typographyTokens¶

const typographyTokens: object

Typography tokens — single source of truth for all font sizes.

Mobile values are consumed by Mantine's createTheme(). Desktop values are exposed as CSS custom properties (--typo-desktop-*) and applied at the sm breakpoint (48em / 768px) in typography.css.

Type Declaration¶

fontSizes¶

readonly fontSizes: object

fontSizes.lg¶

readonly lg: object

fontSizes.lg.desktop¶

readonly desktop: "1.5rem" = "1.5rem"

fontSizes.lg.mobile¶

readonly mobile: "1.25rem" = "1.25rem"

fontSizes.md¶

readonly md: object

fontSizes.md.desktop¶

readonly desktop: "1.1875rem" = "1.1875rem"

fontSizes.md.mobile¶

readonly mobile: "1rem" = "1rem"

fontSizes.sm¶

readonly sm: object

fontSizes.sm.desktop¶

readonly desktop: "1rem" = "1rem"

fontSizes.sm.mobile¶

readonly mobile: "0.875rem" = "0.875rem"

fontSizes.xl¶

readonly xl: object

fontSizes.xl.desktop¶

readonly desktop: "2rem" = "2rem"

fontSizes.xl.mobile¶

readonly mobile: "1.625rem" = "1.625rem"

fontSizes.xs¶

readonly xs: object

fontSizes.xs.desktop¶

readonly desktop: "1rem" = "1rem"

fontSizes.xs.mobile¶

readonly mobile: "0.875rem" = "0.875rem"

fontWeights¶

readonly fontWeights: object

fontWeights.body¶

readonly body: 500 = 500

fontWeights.bold¶

readonly bold: 700 = 700

headings¶

readonly headings: object

headings.h1¶

readonly h1: object

headings.h1.desktop¶

readonly desktop: "2rem" = "2rem"

headings.h1.lineHeight¶

readonly lineHeight: "1.3" = "1.3"

headings.h1.mobile¶

readonly mobile: "1.625rem" = "1.625rem"

headings.h2¶

readonly h2: object

headings.h2.desktop¶

readonly desktop: "1.75rem" = "1.75rem"

headings.h2.lineHeight¶

readonly lineHeight: "1.35" = "1.35"

headings.h2.mobile¶

readonly mobile: "1.5rem" = "1.5rem"

headings.h3¶

readonly h3: object

headings.h3.desktop¶

readonly desktop: "1.5rem" = "1.5rem"

headings.h3.lineHeight¶

readonly lineHeight: "1.4" = "1.4"

headings.h3.mobile¶

readonly mobile: "1.25rem" = "1.25rem"

headings.h4¶

readonly h4: object

headings.h4.desktop¶

readonly desktop: "1.1875rem" = "1.1875rem"

headings.h4.lineHeight¶

readonly lineHeight: "1.5" = "1.5"

headings.h4.mobile¶

readonly mobile: "1rem" = "1rem"

headings.h5¶

readonly h5: object

headings.h5.desktop¶

readonly desktop: "1rem" = "1rem"

headings.h5.lineHeight¶

readonly lineHeight: "1.55" = "1.55"

headings.h5.mobile¶

readonly mobile: "0.875rem" = "0.875rem"

headings.h6¶

readonly h6: object

headings.h6.desktop¶

readonly desktop: "1rem" = "1rem"

headings.h6.lineHeight¶

readonly lineHeight: "1.55" = "1.55"

headings.h6.mobile¶

readonly mobile: "0.875rem" = "0.875rem"

sizes¶

readonly sizes: object

Semantic size aliases — map meaningful names to Mantine size tokens. Use these in components instead of raw "md" / "xs" strings.

Each resolves to a responsive CSS variable: - desktop: 19px — NHS/GOV.UK standard body text on large screens - mobile: 16px — NHS/GOV.UK standard body text on small screens

sizes.desktop¶

readonly desktop: "md" = "md"

sizes.mobile¶

readonly mobile: "xs" = "xs"