## 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/workos-com/c1ef5d6b-8620-4482-aad7-47f439cf35f9-1789073890-0.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/workos-com/c1ef5d6b-8620-4482-aad7-47f439cf35f9-1789073860-full.webp
- Component on Kage: https://kage.design/component/workos-navigation

## Before you start
Ask me what my product is, who it is for, and what its brand personality, colours, and type preferences are. Then apply the principles below to create a navigation header for my product—do not reproduce the reference literally.

## Design language

Build a clean, premium SaaS website header that feels calm, trustworthy, and highly legible.

### Layout and alignment
- Use a full-width header with a white or near-white background and a centered content container.
- Keep the header approximately 72–88px tall, with generous horizontal padding that reduces smoothly on smaller screens.
- Align the brand mark and wordmark at the far left on one baseline.
- Align the primary navigation and account action to the right, keeping the navigation in a single horizontal row on desktop.
- Use moderate, consistent gaps between navigation items—large enough to scan quickly without making the header feel sparse.
- Include dropdown indicators only on items that open menus; use a small, simple chevron rather than decorative icons.
- On narrow screens, replace the desktop links with a compact menu button. Preserve the brand’s left alignment and keep the menu interaction accessible.

### Typography hierarchy
- Use the product’s brand sans-serif or a similarly modern sans-serif.
- Keep navigation labels at approximately 14–15px with medium or regular weight and comfortable line height.
- Make the wordmark slightly larger and heavier than the navigation labels so it acts as the primary anchor.
- Avoid oversized typography in this component; the header should support the page content rather than compete with it.
- Use sentence case for labels and maintain consistent text treatment across all links.

### Colour
- Use a white or warm off-white background, approximately `#FFFFFF` or `#FCFCFD`.
- Use a deep charcoal for the wordmark and primary navigation, approximately `#25252A` or `#303038`.
- Use a muted grey for secondary or inactive states, approximately `#6F707A`.
- Choose one restrained brand accent for the mark or active interaction, such as a violet-blue around `#6657D9`; adapt this to the user’s brand palette.
- Keep contrast accessible, especially for text and focus states.

### Borders, radius, and depth
- Keep the header visually flat with no heavy shadow.
- If a divider is needed, use a very subtle bottom border around `#F0F0F3`.
- Style the account action as a light outlined pill or softly rounded button with a 1px border around `#E5E5EA`.
- Use a compact radius, approximately 999px for a pill action or 10–12px for a rounded rectangular action.
- Avoid excessive borders, gradients, glass effects, or strong elevation.

### Interaction
- Make every navigation label a clear, keyboard-accessible link.
- Add a subtle colour shift or underline on hover, and a visible focus ring using the brand accent.
- Dropdown items should reveal a tidy, well-spaced menu with clear ownership and enough padding for comfortable pointer and touch use.
- Keep hover and open-state transitions quick and understated, around 150–200ms.
- Ensure the account action has distinct hover, pressed, and focus states without becoming visually dominant.
- Make the mobile menu keyboard accessible, dismissible, and usable with touch.

## Never
- Never copy the reference site’s logos, product names, navigation labels, or exact copy.
- Never use the WorkOS brand mark or any other reference-specific identity.
- Never reuse reference-specific illustrations, imagery, icons, or decorative assets.
- Never reproduce the exact spacing, proportions, typography, or colour values as a pixel-for-pixel clone.
- Never hide essential navigation behind an inaccessible interaction or rely on hover alone.