# Music Constants

## Essence

Typography-only mathematical constants for generating the type scale.

`Music Constants` are source values used only to calculate Typography size tokens. They are not visual component tokens.

## Hook

Use when explaining or recalculating the Typography scale.

## Internal Rules

- Used only for Typography token generation.
- Must not be used directly by components.
- `--music-fifth-ratio` is `2`.
- `--music-steps-per-fifth` is `5`.
- `--music-step-ratio` is `2^(1/5)`, approximately `1.149`.
- The scale rounds generated type sizes to whole pixels before expressing them as `em` values.
- `--font-size-base` remains the base size: `1em = 16px`.

## Use When

- Rebuilding Typography size tokens.
- Explaining why type sizes follow a consistent interval.
- Reviewing whether a new text size belongs in the generated scale.

## Do Not Use When

- A component needs a font size; use a Typography token.
- A component needs a text component; use `Heading`, `Paragraph`, or `Caption`.
- A component needs local visual tuning.
- A non-typography token needs spacing, color, or interaction behavior.

## Edge Cases

- If the ratio changes, Typography tokens must be recalculated as a set.
- If the base size changes, generated `em` values must be reviewed together.
- Do not add ad hoc type sizes outside this system without a Design System decision.

## Accessibility Notes

- Mathematical consistency does not replace readability checks.
- Generated sizes still need to be tested in actual page layouts.
- Body text should remain anchored to readable default size and line height.

## Related Components And Patterns

- `Typography`: the only token family that directly consumes Music Constants.
- `Line Heights`: paired rhythm constants for Typography tokens.
- `Heading`: consumes generated heading sizes.
- `Paragraph`: consumes Body typography.
- `Caption`: consumes Caption typography.

## Code Paths

- `apps/portfolio-site/src/pages/design-system/index.astro`
- `packages/design-system/src/styles/tokens.css`