## 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/cron-com/13c2d880-1e0a-4e61-bc53-4a819d6c2d36-1789060776-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/cron-com/13c2d880-1e0a-4e61-bc53-4a819d6c2d36-1789060767-full.webp
- Component on Kage: https://kage.design/component/cron-navigation

## Before you start
Ask the user what their product does, who it is for, and what their brand identity is (including preferred colours, type style, and navigation items). Then apply the principles below to create a version for their product rather than reproducing the reference.

## Build a minimal dark navigation header
Create a wide website navigation bar for a modern software product. The header should feel calm, premium, and highly legible, with a compact brand area at the left, utility links grouped toward the right, and one clearly prioritised call-to-action.

### Layout and alignment
- Use a full-width header with a very dark near-black background, approximately `#121211` or `#141413`.
- Keep the content in a centered container with a maximum width around `1120–1200px`; allow approximately `32–48px` of horizontal padding on desktop.
- Use a single horizontal flex row, vertically centered, with a height around `112–124px` on large screens.
- Place the user's brand mark or wordmark on the left. Keep it visually compact, approximately `128px` wide or less, and do not let it dominate the navigation.
- Push the navigation group to the right using flexible empty space. Keep links in one row with roughly `36–44px` gaps.
- Put the primary action after the text links, with a slightly larger left gap of roughly `34–42px` so it reads as a separate priority.
- On smaller screens, collapse the links into a menu button or disclosure while preserving the brand at left and the primary action only if there is enough room.

### Typography hierarchy
- Use a clean contemporary sans-serif with a neutral or subtly humanist character.
- Navigation links should be medium-sized, around `20–22px` on desktop, with a weight near `400–500` and comfortable line height.
- Keep the link hierarchy intentionally quiet: links should be readable but less visually dominant than the primary action.
- Use a slightly stronger weight for the call-to-action label, around `500–600`.
- Avoid all-caps labels unless the user's existing brand system requires them.

### Colour
- Use a nearly black header surface such as `#121211` with a warm rather than blue-black tone.
- Set regular navigation text to a soft off-white, approximately `#F2F0ED` or `#E9E7E3`.
- Use a saturated warm orange or coral for the primary action, approximately `#FF4A0A` to `#FF5A12`; choose a shade that fits the user's brand.
- Keep the button label near-white, approximately `#FFF8F2`.
- Do not add unnecessary gradients, shadows, or decorative colour accents. If a separator is needed, use a barely visible warm charcoal such as `#242321`.

### Borders, shape, and spacing
- Make the primary action a pill-shaped button with a radius of `999px` and horizontal padding around `26–30px`.
- Give the button a height around `46–50px`, with enough vertical padding for a relaxed, balanced silhouette.
- Keep the header itself visually flat; avoid a prominent border or drop shadow.
- Use consistent spacing and align the optical center of the brand mark, links, and button along the same horizontal axis.
- Preserve generous empty space around the header so it feels editorial and deliberate rather than dense.

### Interaction
- Make every navigation link keyboard accessible with a clear focus treatment, such as a soft orange or off-white outline with a `3px` offset.
- On hover, transition link colour subtly toward pure white and optionally add a restrained opacity or underline change; avoid animated movement.
- On hover and focus, the primary button may shift slightly lighter, for example from `#FF4A0A` to `#FF6A24`, using a transition of roughly `150–200ms`.
- Ensure the button has an accessible contrast ratio and a visible pressed state.
- Support reduced-motion preferences by removing nonessential transitions.
- On mobile, ensure the menu control has a minimum target size of `44px` and exposes its expanded/collapsed state to assistive technology.

### Responsive behaviour
- At tablet widths, reduce link gaps and container padding before reducing type size.
- At narrow widths, switch to a compact menu pattern rather than allowing links to wrap awkwardly.
- Keep the primary action visible only if it does not cause crowding; otherwise place it inside the menu with a clear priority treatment.

## Never
- Never copy the reference product's logo, wordmark, iconography, product name, navigation labels, or call-to-action copy.
- Never reuse the reference's exact brand colours, proportions, typography, or pixel measurements as a direct replica.
- Never include illustrations, photographs, or imagery from the reference.
- Never assume the user's product is a calendar, productivity tool, or any other specific category.
- Never sacrifice keyboard navigation, focus visibility, contrast, or mobile usability for visual similarity.