## 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/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073948-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/render-com/a2f1bfec-cff8-46a3-938e-5c68bed6eccd-1789073879-full.webp
- Component on Kage: https://kage.design/component/render-navigation

# Build a promotional banner and split navigation header

## Before you start
Ask me what my product does, who it is for, and what brand personality, colours, typography, and navigation items I want to use. Then apply the principles below to my product rather than reproducing any reference literally.

## Design objective
Create a two-tier website header for a developer-oriented software product. The first tier is a compact promotional announcement, and the second tier is the main navigation. The result should feel confident, minimal, technical, and highly scannable.

## Structure and layout
- Use a full-width header with two stacked rows.
- Keep the announcement row approximately 40–42px tall. Give it a subtle horizontal gradient moving from deep violet on the left through muted plum toward warm amber on the right.
- Centre the announcement content as a single horizontal group: short promotional message, followed by a compact dark call-to-action button and a right-pointing chevron.
- Keep announcement text small, white, and medium weight. Do not let the message wrap on desktop.
- Make the primary navigation row approximately 66–68px tall with a white or near-white background and a thin neutral bottom border.
- Use a wide, centred content container with generous horizontal padding. On large screens, divide it into three logical zones: brand slot on the left, primary links in the middle-left, and utility links plus the main CTA on the right.
- Align every item vertically to the centre of the navigation row.
- Give the brand slot enough width to create breathing room before the first navigation item, but do not force equal-width columns.
- Group primary navigation links together with consistent gaps. Group utility links separately on the right, followed by a high-contrast rectangular CTA.
- The CTA should extend to the full height of the navigation row or sit flush against its top and bottom edges, making it feel like an integrated navigation segment rather than a floating button.
- Preserve a clear vertical boundary between the utility area and the CTA.
- On smaller screens, collapse primary links into a menu button, keep the announcement message concise, and allow the CTA to remain visible only if space permits.

## Typography hierarchy
- Use a clean sans-serif with excellent legibility at small sizes; use the product’s existing brand font if available.
- Announcement message: approximately 12–13px, medium weight, tight line height.
- Navigation links: approximately 16px, regular to medium weight, dark charcoal rather than pure black.
- Utility links can use the same size but slightly stronger contrast or weight.
- Main CTA: approximately 16px, medium weight, white text.
- Avoid oversized type, decorative display fonts, and excessive weight variation.

## Colour guidance
Use approximate values and adapt them to the product’s brand:
- Page/header background: #FFFFFF or #FAFAFA.
- Main text: #171717.
- Secondary navigation text: #2B2B2B.
- Announcement gradient: #240047 at the left, blending through #513057 and #C88762 toward #E5A86A at the right.
- Announcement CTA: #171717 with white text.
- Main navigation CTA: #111111 with white text.
- Dividers: #D9D9D9 or rgba(0, 0, 0, 0.14).

## Borders, sizing, and shape
- Use a 1px bottom border under the navigation row.
- Keep the announcement strip borderless.
- Use square or very subtly rounded corners for the integrated navigation CTA; avoid pill-shaped controls.
- If the announcement CTA is visually inset, use a small radius of 1–3px.
- Maintain a compact, architectural feel with no shadows unless required for contrast over page content.

## Interaction and states
- Make all links and CTAs keyboard accessible with visible focus rings.
- On hover, darken or underline text links subtly rather than adding large motion.
- The announcement CTA may shift its chevron a few pixels on hover.
- The main CTA should use a restrained hover colour change, such as #2A2A2A, while preserving strong contrast.
- If the header becomes sticky, add only a very subtle shadow or divider after scrolling.
- Ensure the mobile menu has a clear open, close, and focus state; do not hide navigation content from keyboard or screen-reader users.
- Respect reduced-motion preferences.

## Responsive behaviour
- Desktop: show both announcement content and all navigation groups in one line.
- Tablet: reduce horizontal gaps and padding before collapsing anything.
- Mobile: shorten the promotional message or allow a controlled two-line announcement; replace primary links with a menu control; keep the brand and the most important action easy to reach.
- Prevent accidental horizontal scrolling at every viewport width.

## Content guidance
Use realistic placeholder labels based on the user’s product and audience. Keep labels short and sentence case. The announcement should communicate one timely benefit or offer, while the navigation should distinguish primary discovery links from utility actions and one dominant conversion action.

## Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never reproduce the reference brand mark or its exact navigation labels.
- Never copy the exact gradient stops, dimensions, spacing values, or visual proportions if they do not suit the user’s product.
- Never add unnecessary dropdowns, decorative artwork, shadows, or animation that weakens the clear hierarchy.
- Never sacrifice keyboard accessibility, contrast, or mobile usability for visual similarity.