## 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/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106637-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/thousand/cb10af68-535d-4246-97d9-03dbd24306a9-1789106570706-full.webp
- Component on Kage: https://kage.design/component/thousand-navigation

## Before you start
Ask the user what their product is, who it is for, and what their brand personality and visual identity are. Then apply the principles below to create an original navigation component for their product—not a copy of the reference.

## Design language
Build a polished desktop-first website header for a modern software product. Keep it intentionally quiet and spacious so the navigation establishes trust without dominating the page.

### Layout and alignment
- Use a full-width header with a warm, very light neutral background, approximately `#F5F1E7`.
- Place the content in a single horizontal row with a generous maximum width, approximately `1180–1240px`, centered in the viewport.
- Vertically center all items in a header approximately `112–128px` tall.
- Align the brand lockup to the left and the navigation actions to the right.
- Use a compact brand mark placeholder plus a bold wordmark treatment; create a mark appropriate to the user’s product rather than reproducing any reference logo.
- Keep the main navigation links in one row, with approximately `28–36px` between links.
- Put the primary action at the far right, separated from the final text link by approximately `28–36px`.
- On smaller screens, preserve the horizontal padding, hide the desktop links behind a menu button, and keep the primary action visible only if it remains comfortable; otherwise move it into the menu.

### Typography hierarchy
- Use a contemporary sans-serif with a clean, slightly humanist feel.
- Set navigation links around `14–16px`, medium weight, with a line height near `1.2`.
- Set the wordmark around `17–19px`, semibold or bold, with tight but readable letter spacing.
- Use concise, sentence-case labels. Avoid uppercase labels unless they are central to the user’s brand system.
- Keep text color near-black, approximately `#24231F`, rather than pure black.

### Colour, borders, and shape
- Use the warm neutral background as the dominant surface and near-black for primary text.
- Make the primary CTA a dark filled pill, approximately `#24231F`, with light text near `#F8F5EC`.
- Use a fully rounded CTA with a radius of `999px`, horizontal padding around `20–24px`, and vertical padding around `11–13px`.
- Keep the header free of a visible bottom border by default. If separation is necessary, use a subtle one-pixel line such as `rgba(36,35,31,0.08)`.
- Avoid shadows, gradients, excessive decoration, and dense UI chrome.

### Interaction
- Give navigation links a restrained hover state: slightly darken the text, add a subtle opacity or underline transition, or use a small shift in emphasis without moving the layout.
- On CTA hover, lighten the dark surface slightly or add a minimal upward/scale transition of roughly `1–2%`; keep it refined and fast.
- Ensure visible keyboard focus rings with a clear, accessible warm or dark contrast.
- Use a 150–220ms ease-out transition and ensure all controls have comfortable click targets.
- Include an accessible menu button and responsive navigation behavior for mobile.

## Never
- Never use the reference product’s logo, wordmark, product name, navigation copy, or exact CTA text.
- Never reproduce the reference brand mark or create a visually confusingly similar logo.
- Never copy the reference screenshot’s content, proportions, or branding literally; adapt the layout principles to the user’s product.
- Never add logos, product names, copy, illustrations, or imagery from the reference.
- Never sacrifice accessibility for visual minimalism: maintain semantic navigation, keyboard support, focus states, and sufficient contrast.