# Header Top Part

## Essence

Transparent top layer of `Header` that places the brand/home action.

It exists so Header's brand layer is a named, inspectable component instead of hidden layout inside `Header`.

## Hook

Use when `Header` needs to render the `post-ai.systems` home action.

## Status

Private to `Header`

## Contract

- Used only inside `Header`.
- Contains `Header Home Button`.
- Aligns content to the left.
- Has transparent background.
- Uses `--spacing-header-top-part-top` top padding.
- Uses `--spacing-header-layer-y` bottom padding.
- Uses Header horizontal padding: `--spacing-header-left` and `--spacing-header-right`.
- Does not own scroll behavior; `Header` owns the scroll offset that hides or reveals this part.
- Scrolls away continuously with page content through Header-controlled height and transform variables.
- If page content scrolls by `10px`, this part hides by `10px`.
- Reveals only when page content scrolls back toward the top.
- Does not render primary navigation.
- Does not render Header Bottom Part.

## Related Components And Patterns

| Item | Relationship | Direction | Notes |
| --- | --- | --- | --- |
| `Header` | Parent | Parent -> Child | Header composes this part as its first visible layer. |
| `Header Home Button` | Composes | Component -> Child | Provides the brand/home action. |

## Code Paths

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