# Header

## Essence

Brand bar locked to `Page Template`.

`Header` renders the `post-ai.system` brand signal across the top of page template compositions.

## Hook

Use when `Page Template` needs a stable page header with the Portfolio brand name.

## Internal Rules

- Used only inside `Page Template`.
- Must not be used as a general marketing site header.
- Renders brand name `post-ai.system`.
- Spans horizontally across the full available page width.
- Height stays around `50-60px`; current min-height is `3.5rem / 56px`.
- Sticks to the top of the viewport.
- When the user scrolls down, Header moves upward and leaves only the bottom `24px` visible.
- When the Header is peeked, hovering the visible `24px` reveals the full Header.
- When the user scrolls up, Header returns to full visibility.
- Uses existing color tokens only.
- Background uses `--color-bg-inverse`.
- Text uses `--color-text-inverse`.
- Contains one right-aligned `Header Menu Button`.
- Header Menu Button links to `/design-system/`.
- Does not own additional navigation, menus, breadcrumbs, or page actions.

## Use When

- A Page Template composition needs the brand bar.
- A Design System preview needs to show the page template shell.

## Do Not Use When

- A marketing page needs a public website header.
- A case study page needs site navigation.
- A component needs a title inside its own preview.
- A new black color token would be needed without approval.

## Edge Cases

- If the inverse background contract changes, update the Background color Essence instead of substituting an unrelated semantic token.
- If navigation is added later, create or update a dedicated navigation/header decision.
- Keep Header simple until the Page Template needs more structure.

## Accessibility Notes

- Brand text must preserve readable contrast against the inverse background.
- Header should not create extra landmark confusion; it is visual brand context for the template.
- Do not hide the brand name behind an icon-only treatment.

## Related Components And Patterns

- `Page Template`: the only owner of Header usage.
- `DesignSystemPageTemplate`: implementation layer that places Header above the menu/content area.
- `Colors`: owns the approved color tokens used by Header.
- `Typography`: owns the text styling foundation.
- `Header Menu Button`: locked navigation subcomponent used on the right.

## Code Paths

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