# Caption

## Essence

Secondary compact text component for metadata and quiet supporting copy.

`Caption` renders small supporting text with Caption typography and secondary text color.

## Hook

Use when text should support nearby content without competing with primary body copy.

## Internal Rules

- Renders a paragraph element.
- Uses Caption typography.
- Uses `--color-secondary-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 body copy, headings, or links.

## Use When

- A component needs metadata.
- A label or helper note should feel secondary.
- Supporting text should be visually quieter than body copy.

## Do Not Use When

- Normal reading text is needed; use `Paragraph`.
- A section title is needed; use `Heading`.
- Text should navigate; use `Link`.
- Text must carry primary meaning alone.

## Edge Cases

- Caption should stay short.
- Avoid using Caption for dense paragraphs.
- Center and right alignment should be driven by the parent layout.
- Secondary color must still pass contrast for the intended background.

## Accessibility Notes

- Caption text should not be the only place where critical information appears.
- Keep text contrast tied to `--color-secondary-text`.
- Avoid tiny text treatments below the defined Caption token.

## Related Components And Patterns

- `Paragraph`: primary readable body copy.
- `Heading`: section titles.
- `Link`: navigation text.
- Secondary text color token: controls quiet text tone.

## Code Paths

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