# Brand Blue Dominant Gradient

## Essence

Blue-dominant brand gradient for animated foreground treatments.

## Token

- `--gradient-brand-blue-dominant`

## Visual Role

Uses the same brand gradient family as `--gradient-brand`, but blue occupies most of the cycle and pink behaves as a shorter accent.

## Use When

- Rendering animated text/icon foreground masks.
- A brand-accented control needs motion while staying mostly blue.

## Do Not Use When

- A filled brand surface should use the balanced `--gradient-brand`.
- A normal interaction state should use Interaction States.
- The text/icon would become harder to read during motion.

## Rules

- Keep blue visually dominant.
- Keep motion slow and aligned with the brand gradient direction.
- The consuming component must respect `prefers-reduced-motion`.

## Code Paths

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