## 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/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060436-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/loom-com/c384a931-6938-4c5e-b36b-e07415522afb-1789060413-full.webp
- Component on Kage: https://kage.design/component/loom-navigation

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

## Build a minimal SaaS header navigation
Create a clean, single-row website header for a modern software product. The header should feel calm, premium, and highly usable, with a clear split between brand identity on the left and account or conversion actions on the right.

### Layout and alignment
- Use a full-width header with a centered inner container, approximately 1200–1280px wide, and generous horizontal padding that reduces on smaller screens.
- Keep the header height around 80–90px on desktop.
- Align every element vertically to the center of the row.
- Place a compact brand lockup on the left: a small rounded-square product mark followed by a two-line or single-line wordmark treatment. Use the user’s own product identity.
- Place navigation actions on the right in this order: low-emphasis sign-in or utility link, prominent primary CTA, softer secondary CTA, then a compact menu button.
- Maintain approximately 16–20px between controls, with larger separation before the action group if needed.
- On narrow screens, hide or collapse low-priority links and preserve the primary CTA plus menu control. Ensure the brand does not collide with the actions.

### Typography hierarchy
- Use a modern sans-serif with strong legibility, such as an available system or geometric sans-serif.
- Brand text should be visibly stronger than utility links, using approximately 16–18px and medium-to-semibold weight.
- Utility links should use 14–16px, regular-to-medium weight.
- Button labels should use 14–15px, medium weight, with comfortable line height and no forced uppercase styling.

### Colour
- Use a white or near-white header background, approximately `#FFFFFF` or `#FCFCFD`.
- Use deep charcoal for text, approximately `#17202A`.
- Use a saturated product-led blue or the user’s brand colour for the primary CTA, approximately `#1769D5` to `#2474D8`, with white text.
- Use a very pale blue-gray or neutral tint for the secondary CTA and menu button, approximately `#EEF5FC` or `#F1F4F8`.
- Keep contrast accessible and avoid introducing extra accent colours without a product reason.

### Borders, shape, and spacing
- Prefer a borderless header; if separation is necessary, use a subtle bottom border around `#EEF1F5`.
- Give the primary and secondary buttons a pill shape with approximately 999px radius.
- Use generous horizontal padding: roughly 18–24px for the main CTA and 16–20px for the secondary CTA.
- Make the menu control a compact circular or near-square button, approximately 48px by 48px, with a soft tinted background and a simple three-line menu icon.
- The product mark may use a rounded-square shape around 48px by 48px, but it must be designed for the user’s brand rather than copied from the reference.
- Keep the visual density low: plenty of white space, restrained shadows, and no decorative clutter.

### Interaction and responsive behaviour
- Add clear hover and focus-visible states to every interactive element.
- On hover, slightly darken the primary CTA, subtly increase contrast on secondary controls, and use an understated text colour shift for links.
- Use a visible keyboard focus ring with a brand-colour outline and sufficient offset.
- The menu button should expose the mobile navigation or an action drawer when activated; use an accessible label and a clear expanded state.
- Preserve touch targets of at least 44px, and ensure the header remains usable at mobile widths without horizontal scrolling.

### Never
- Never copy the reference’s logos, product names, wordmarks, icons, or exact brand assets.
- Never use the reference product’s copy, CTA wording, or visual identity.
- Never include illustrations or imagery from the reference.
- Never reproduce the exact spacing, proportions, or pixel arrangement; adapt the system to the user’s product and brand.
- Never sacrifice accessibility, responsive behaviour, or clear action hierarchy for visual similarity.