## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/lull/1eb36b3c-9a0d-499b-8ae4-8916c2d1f7b6-1789884096-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/lull/1eb36b3c-9a0d-499b-8ae4-8916c2d1f7b6-1789884066726-full.webp
- Component on Kage: https://kage.design/component/lull-navigation

## Before you start
Ask what the user's product is, who it serves, and what its brand personality and primary action should be. Apply the principles below to that product rather than reproducing the reference.

Build a minimal, overlay navigation for a dark, cinematic product site. Keep the header full width with generous horizontal padding, position the brand mark at the left, and place one compact outlined or translucent pill action at the right. Use a warm near-white wordmark in an elegant serif or custom display style and a small neutral sans-serif label for the action. Use an almost-black transparent background so the hero remains visible underneath; add only a very subtle bottom border or blur if needed. Keep the header height compact, align everything to one horizontal centerline, and make the action keyboard accessible with a clear hover state that slightly brightens its border and background. On mobile, preserve the two-sided layout and reduce padding rather than adding a hamburger unless the product genuinely needs more navigation.

Approximate design language: background rgba(8,8,8,.35), text #f2eee8, muted text #aaa49d, border rgba(255,255,255,.18), 999px radius, 16–18px side padding, 28–36px vertical breathing room. Use restrained motion only.

### Never
- Never copy the reference logo, product name, wording, imagery, or illustrations.
- Never crowd the header with links or promotional badges.
- Never make the navigation brighter than the hero content.