Usage

Start with these tokens when customizing math:

--math-font-family for equation typography

--math-spacing for vertical rhythm around blocks

--math-label-gap, --math-label-font-weight, and --math-label-color for equation labels

--math-spacing derives from --content-spacing for responsive rhythm, and label tokens align with the shared label styling used by figures and tables.

Tokens

Math Block Tokens

Layout and styling controls for block-level mathematical expressions.

Token	Description	Default Value
`--math-font-family`	Font family for mathematical expressions	`var(--font-family-math)`
`--math-spacing`	Vertical spacing (top margin)	`var(--content-spacing)`
`--math-label-gap`	Spacing between equation and label	`var(--space-4)`
`--math-label-font-weight`	Font weight for equation labels	`var(--label-font-weight)`
`--math-label-font-style`	Font style for equation labels	`var(--label-font-style)`
`--math-label-color`	Text color for equation labels	`var(--label-color)`

Math Inline Tokens

Inline mathematical expressions inherit the --math-font-family token but otherwise integrate within text flow.

Examples

Default Math Block

Standard math block styling with centered equation and right-aligned label:

:root {
  /* No design token overrides */
}

E = m c^{2}

(1)

Custom Label Styling

Adjust label appearance for different document styles:

:root {
  --math-label-gap: var(--space-20);
  --math-label-color: var(--color-gray-400);
  --math-label-font-weight: normal;
}

\int_{0}^{\infty} e^{- x^{2}} d x = \frac{\sqrt{π}}{2}

(2)

Inline Math

Inline mathematical expressions like $e^{i π} + 1 = 0$ and $\sqrt{2}$ integrate within text flow using the same font family as block math but without layout tokens.

Image Fallbacks

Some math renderers may provide image fallbacks. When present, images are constrained to max-height: 1.1em for inline math and centered for blocks, matching the text flow and alignment.