# Paragraph

## Essence

Primary body-copy component for readable text.

`Paragraph` renders normal reading text with the Body typography token and primary text color.

## Hook

Use when content needs comfortable body text.

## Internal Rules

- Renders a paragraph element.
- Uses Body typography.
- Uses `--color-text`.
- Default alignment is `left`.
- Supports `alignment = left | center | right`.
- Falls back to left alignment for invalid values.
- Does not own external spacing.
- Does not replace headings, captions, menu items, or links.

## Use When

- Normal text should be read as body copy.
- A component needs descriptive text.
- A page needs explanatory copy.

## Do Not Use When

- The text is a title or section heading; use `Heading`.
- The text is compact secondary metadata; use `Caption`.
- The text itself navigates; use `Link`.
- The text is a menu navigation item; use `Menu Item`.

## Edge Cases

- Center and right alignment should be intentional and layout-driven.
- Long paragraphs should stay within readable line lengths at page-layout level.
- Inline links may appear inside paragraph content when needed.
- Do not use Paragraph to fake list, menu, heading, or button components.

## Accessibility Notes

- Paragraph text should remain readable at Body size and line height.
- Do not communicate meaning by alignment alone.
- Keep contrast tied to `--color-text`.

## Related Components And Patterns

- `Heading`: introduces the content.
- `Caption`: secondary/supporting text.
- `Link`: inline or standalone navigation text.
- Body typography token: defines size, weight, and line height.

## Code Paths

- `packages/design-system/src/components/Paragraph.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`