# Header Home Button

## Essence

Header-only brand/home link.

`Header Home Button` renders the `post-ai.systems` brand signal inside the top layer of `Header`.

This is a temporary logo placeholder. It uses a local custom gradient treatment until it is replaced by a real logo component.

## Hook

Use when `Header` needs its single brand/home navigation item.

## Internal Rules

- Used only inside `Header`.
- Must not be used as a general navigation item.
- Must not replace `Header Menu Button`.
- Label is `post-ai.systems`.
- Link target is `/`.
- Uses native anchor navigation.
- Uses uppercase text.
- Uses custom typography: Heading 5 size, tight line height, and Extra Bold weight.
- Uses local custom internal padding.
- Uses `--gradient-brand` for its blue-to-pink-to-blue gradient background.
- Avoids bright gradient stops that reduce white text contrast.
- Animates the gradient horizontally in a slow seamless infinite loop.
- Uses pill-shaped corners.
- Uses white text.
- Header Top Part owns external placement and rhythm around Header Home Button.
- Uses custom interaction states because it behaves as a temporary brand mark, not a generic button.
- Hover dims the gradient with a black overlay at 20% opacity.
- Focus uses `--interaction-focus-extra-contrast-ring`.
- Focus visible uses `--interaction-focus-visible-extra-contrast-ring`.
- Does not expose classic pressed, selected, or disabled visual variants.

## Use When

- Header needs to render the brand/home link.

## Do Not Use When

- Rendering `Notes`, `Design System`, or other normal Header navigation items.
- Rendering homepage CTAs, article links, or generic links.
- A component needs a brand label outside the Header.

## Edge Cases

- If Header no longer uses a two-layer structure, update this essence and `Header` together.
- If the brand text changes, update this component and the Header essence in the same change.
- If this component is replaced by a real logo, remove the local gradient exception and review the new logo contract.
- If interaction behavior changes, keep the custom interaction rules documented here instead of silently inheriting generic button behavior.

## Accessibility Notes

- Must preserve readable contrast inside the gradient pill and against the white Header background.
- Must remain keyboard-focusable.
- Must have a clear home aria label.
- Must disable gradient motion when `prefers-reduced-motion` is enabled.

## Related Components And Patterns

- `Header`: only owner.
- `Header Menu Button`: sibling component for normal Header navigation.
- `Page Template`: only page-level owner of Header.

## Code Paths

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