## 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/turso-tech/a01fe972-4603-42df-a7fd-1b66e57f2913-1789073738-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/turso-tech/a01fe972-4603-42df-a7fd-1b66e57f2913-1789073707-full.webp
- Component on Kage: https://kage.design/component/turso-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 header for their product—not a copy of the reference.

## Design the navigation header
Build a single-row desktop navigation bar for a modern software product, using the user's product name, brand, and actual navigation needs.

### Layout and alignment
- Use a full-width header with a constrained inner content row, approximately 1200–1320px wide, centered with responsive horizontal padding of 24–40px.
- Keep the header compact, around 84px tall on desktop, with all controls vertically centered.
- Place the brand lockup on the left: a small abstract brand mark followed by the product wordmark. Use an original mark or a simple neutral placeholder; do not reproduce another company's symbol.
- Follow the brand with a horizontal navigation group. Keep links evenly spaced, with approximately 28–32px between items.
- Align account access and the primary call-to-action to the far right. The login or secondary action should sit immediately before the CTA with generous separation.
- On smaller screens, collapse the navigation into a menu button while preserving easy access to the primary CTA or placing it inside the opened menu.

### Typography hierarchy
- Use a clean sans-serif family appropriate to the user's brand.
- Set the wordmark at roughly 18–20px, semibold or bold.
- Set navigation links around 14px, medium weight, with comfortable line height and no excessive letter spacing.
- Use the primary CTA at 14–15px, semibold, with a concise action label relevant to the product.

### Colour
- For a dark theme, use a near-black green/blue-tinted background around `#0B1113` or derive an equivalent from the user's brand.
- Use a soft white for primary text, around `#F2F5F4`, and a muted gray-green around `#AAB5B4` for less prominent states.
- Use a vivid brand accent for the CTA, approximately `#45E7C3` to `#5BE8C9`, but adapt the hue to the user's identity.
- Ensure text and controls meet accessible contrast ratios. If the user's brand is light, invert the surface and text roles while retaining the same hierarchy.

### Borders, shape, and spacing
- Add a subtle 1px bottom border in a low-contrast tone such as `#263034` to separate the header from the page.
- Keep the header surface visually flat; avoid heavy shadows, gradients, or decorative effects unless the user's brand calls for them.
- Use a pill-shaped CTA with approximately 999px radius and horizontal padding around 24px.
- Keep the logo area and navigation controls aligned to a consistent baseline and avoid crowded vertical spacing.
- Use small chevrons or down arrows for links that open menus. Keep them understated, aligned with the label, and separated by about 6–8px.

### Interaction
- Navigation links should have a clear hover and focus state, such as a brighter text colour, subtle underline, or low-contrast surface highlight.
- Dropdown indicators should rotate or change state when their menu is open; dropdown panels should be keyboard accessible and positioned predictably beneath the header.
- The CTA should gain a slightly brighter or darker background on hover and a visible focus ring on keyboard focus.
- Preserve a minimum 44px touch target for every interactive control, even if the visible text is smaller.
- Support keyboard navigation, Escape-to-close for menus, and an accessible mobile navigation state.

## Never
- Never reuse the reference company's logo, bull icon, wordmark, product names, navigation labels, or CTA copy.
- Never copy the exact spacing, typography, colours, or visual proportions if they conflict with the user's brand.
- Never include illustrations, imagery, or decorative graphics from the reference.
- Never ship inaccessible contrast, missing focus states, hover-only menus, or a desktop-only layout.