## 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/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106475-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/typewise-nova/b4948f23-79f3-4392-9236-ca27a7b6b602-1789106444891-full.webp
- Component on Kage: https://kage.design/component/typewise-nova-navigation

## Before you start
Ask the user what their product does, who it is for, and what brand personality, colours, and navigation structure they want. Then apply the principles below to create an original version for their product rather than reproducing the reference.

## Build a two-tier SaaS site header
Create a responsive website header composed of a slim promotional announcement bar above a dark primary navigation row. The result should feel modern, confident, and conversion-focused, with enough flexibility to support different product names, links, and promotional messages.

### Layout and alignment
- Use two full-width horizontal bands stacked at the top of the page.
- Make the announcement bar approximately 54px tall on desktop, with its content centred horizontally and vertically.
- Make the main navigation approximately 80px tall on desktop, with a maximum content width around 1180–1240px and equal left/right breathing room.
- In the navigation row, place the brand mark and wordmark on the left, the main navigation links in the centre, and account access plus the primary CTA on the right.
- Keep the central navigation visually balanced rather than tightly packed. Use approximately 28–38px between link groups.
- Align every item to the same vertical centreline; avoid independently positioned elements that drift out of alignment.
- On smaller screens, collapse the navigation links into a menu button, preserve the CTA where space allows, and keep the announcement message readable without forcing horizontal overflow.

### Typography hierarchy
- Use a clean contemporary sans-serif with strong legibility at small sizes.
- Announcement text should be 14–15px, medium or semibold, with the offer as the primary phrase and the action link slightly more emphatic through an underline or brighter contrast.
- Navigation links should be 14–15px with regular-to-medium weight and a calm, low-contrast presence.
- The primary CTA should use 14–15px semibold text.
- Keep the brand wordmark slightly larger than navigation labels, around 20–22px, while ensuring it does not dominate the header.

### Colour and visual tone
- Use a near-black navy for the main navigation, approximately #080A11 or #090B12.
- Use a saturated blue-to-indigo gradient for the announcement strip, approximately #2149B8 through #426CF5. Keep the gradient subtle and horizontal.
- Use warm white for high-priority text, approximately #F5F7FF.
- Use muted cool grey for secondary navigation and account text, approximately #AEB5C7.
- Use a vivid blue for the primary CTA, approximately #3F6FF2, with white text.
- Ensure all text has sufficient contrast and do not rely on colour alone to communicate links or states.

### Borders, radius, and spacing
- Avoid heavy borders in the main navigation; separation should come primarily from the colour change between the announcement bar and the dark header.
- If needed, add a very subtle bottom border in approximately #171B29.
- Give the CTA a pill shape with a radius around 999px and horizontal padding around 18–22px.
- Use small chevrons beside dropdown labels, sized around 14px, with consistent spacing of 7–9px.
- Keep the brand-to-edge and CTA-to-edge spacing generous; the header should feel premium rather than dense.
- Use a compact underline or opacity change for announcement-link hover states instead of adding decorative effects.

### Interaction and states
- Navigation items with submenus should show a small downward chevron and reveal a dropdown on click or keyboard activation; support hover on desktop but do not make hover the only access method.
- The dropdown should inherit the dark theme, use a subtle shadow or border, and have rounded corners around 10–14px.
- Navigation links should transition smoothly between muted grey and near-white on hover and focus.
- The CTA should slightly brighten or lift on hover, and display a clearly visible focus ring for keyboard users.
- Make the announcement action an actual link with a visible hover and focus treatment.
- Ensure the header remains usable with keyboard navigation, screen readers, reduced-motion preferences, and a sticky or static positioning choice appropriate to the product.

### Responsive behaviour
- At tablet widths, reduce horizontal gaps before removing essential actions.
- At mobile widths, use a compact header around 64–72px tall and a shorter announcement bar, allowing the message to wrap to two lines if necessary.
- Keep the menu control and CTA large enough to tap, with at least roughly 44px of touch target area.
- Do not let the announcement bar push the main navigation content below the fold unnecessarily.

## Never
- Never use the reference's logos, product names, promotional copy, navigation labels, or exact CTA wording.
- Never copy the exact gradient, spacing measurements, typography, or visual proportions; adapt them to the user's product and brand.
- Never include illustrations, background imagery, or decorative graphics from the reference.
- Never hard-code a layout that only works for the supplied desktop screenshot.
- Never hide important navigation or account functionality without providing an accessible mobile alternative.