# Brand Gradient

## Essence

Primary animated brand gradient for the temporary brand/home treatment.

## Token

- `--gradient-brand`

## Visual Role

Balanced blue-pink-blue seamless gradient. It should feel like a brand signal, not a generic decoration.

## Use When

- Rendering `Header Home Button`.
- Rendering a direct brand moment that needs the same animated blue-pink-blue language.

## Do Not Use When

- A component only needs an accent color.
- A surface needs quiet background color.
- The gradient would reduce text contrast.

## Rules

- Preserve the A-B-A loop so animation can scroll seamlessly.
- Keep the consuming component responsible for animation timing and `prefers-reduced-motion`.
- Do not use this token as a general page background.

## Code Paths

- `packages/design-system/src/styles/tokens.css`
- `packages/design-system/src/components/HeaderHomeButton.astro`
- `packages/design-system/src/components/GradientGridAnimation.astro`