## 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/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060950-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/tally-so/8873d519-e012-4a77-bd60-f7e8803b75a7-1789060926-full.webp
- Component on Kage: https://kage.design/component/tally-navigation

## Before you start
Ask me what my product is, who it is for, and what visual brand it uses. Then apply the principles below to create a navigation header for my product rather than reproducing the reference literally.

## Design the component
Build a minimal SaaS website navigation bar with a white background and a single horizontal row. Keep the header visually light, spacious, and highly legible.

### Layout and alignment
- Use a full-width header with a centered inner container, approximately 1200–1280px wide on large screens.
- Give the container generous horizontal padding: about 20–24px on mobile and 32–48px on desktop.
- Align the brand or product mark to the far left and the navigation/actions to the far right.
- Keep all items vertically centered within a compact header around 60–72px tall.
- Place low-emphasis links first, followed by the primary action button with a small, consistent gap between items.
- On smaller screens, preserve the same visual priority: keep the brand visible, collapse secondary links into a menu when necessary, and retain an obvious primary action if space allows.

### Typography hierarchy
- Use the product’s own brand typeface or a clean sans-serif fallback for navigation controls.
- Make the brand treatment more prominent than the utility links, using a heavier weight or distinctive wordmark styling without making it oversized.
- Set navigation links around 14–16px with medium weight and comfortable line height.
- Use concise labels and avoid adding descriptive copy to the header.

### Colour
- Use a near-white or white background, approximately `#FFFFFF` or `#FCFCFB`.
- Use a dark neutral for the brand, approximately `#171717`.
- Use a softer gray for secondary links, approximately `#6B6B6B`, with a darker hover state around `#222222`.
- Use the product’s primary brand colour for the main CTA; for a saturated blue treatment, an approximate starting point is `#0B78C9` with white text.
- Ensure text and interactive states meet accessible contrast requirements.

### Borders, shape, and spacing
- Prefer no visible bottom border when the page background is also white; if separation is needed, use a subtle 1px line around `#EEEEEE`.
- Keep the header free of cards, shadows, and decorative effects.
- Give the primary button a softly rounded radius around 8–10px, with approximately 12–16px horizontal padding and 8–10px vertical padding.
- Use consistent spacing rather than large gaps: roughly 24–28px between text links and 16–20px between the final link and the CTA.

### Interaction
- Make every text link a clear interactive target with a subtle colour transition on hover and focus.
- Give the primary button a modest hover darkening or lift in contrast, not an exaggerated animation.
- Add a visible keyboard focus ring using the product’s brand colour or a high-contrast outline.
- Ensure the entire header remains usable with keyboard navigation and touch targets are at least approximately 44px tall.
- If a mobile menu is introduced, use a simple menu trigger with a clear expanded/collapsed state and do not hide the primary action without a deliberate responsive rationale.

## Never
- Never copy the reference’s logo, wordmark, product name, or exact labels.
- Never reuse the reference’s branded copy, exact colour treatment, or pixel-level spacing as a direct imitation.
- Never include logos, product names, copy, illustrations, or imagery from the reference.
- Never add decorative imagery, gradients, complex dropdowns, or unnecessary navigation items that weaken the minimal hierarchy.