## 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/planetscale-com/b4abfdd8-cd39-4289-8914-c1bd40d118b4-1789060671-1.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/planetscale-com/b4abfdd8-cd39-4289-8914-c1bd40d118b4-1789060620-full.webp
- Component on Kage: https://kage.design/component/planetscale-navigation

# Before you start
Ask what the user's product is, who it serves, and what its brand personality and visual system are. Then apply the principles below to create an original version for that product rather than reproducing this reference.

## Build this component
Create a responsive website header with two stacked parts: a slim announcement bar and a primary navigation row. The result should feel like a polished developer-focused SaaS product: compact, editorial, high contrast, and practical.

## Design language

### Layout and alignment
- Use a full-width announcement strip at the very top, around 24–28px tall on desktop, with its message centered horizontally.
- Place a full-width navigation row beneath it, around 88–104px tall on desktop, with a centered content container capped near 1200–1280px.
- Align the brand mark and navigation links to the left, and the account link plus calls to action to the right.
- Keep all items vertically centered on one baseline. Use a flexible middle area so the left and right groups remain separated.
- On smaller screens, preserve the announcement bar but allow its text to wrap or truncate gracefully; collapse the navigation links into a menu button while keeping the most important action visible.
- Use generous horizontal padding: roughly 32–40px on desktop and 20–24px on mobile.

### Typography hierarchy
- Use a highly legible sans-serif or technical grotesk for navigation and controls; a restrained monospace or semi-monospace accent may be used for compact announcement text if it suits the product brand.
- Announcement text: 13–14px, medium weight, tight line height.
- Navigation links: 15–16px, medium or semibold weight, with clear spacing between items.
- Account link: the same size as navigation links, but visually quieter than primary actions.
- Buttons: 15–16px, semibold, with concise labels and comfortable horizontal padding.
- Avoid excessive uppercase text; rely on weight, colour, and borders to establish hierarchy.

### Colour
- Use a warm, very light neutral navigation background such as #F7F7F5 or #FAFAF8.
- Use near-black charcoal for primary text, approximately #252525 or #292929.
- Use a vivid announcement colour such as golden yellow #F4C400–#FFD000 with dark text for strong contrast.
- Make the main filled CTA a saturated warm orange, approximately #E85A24–#F06423, with white text.
- Use a transparent or light-background secondary CTA with a dark orange border, approximately #C85A2A, and charcoal text.
- Check all text and control states for WCAG-appropriate contrast.

### Borders, radius, and spacing
- Keep the announcement bar borderless and visually flat.
- Give the navigation row a subtle bottom rule, approximately 1px solid #E6E4DF, if separation from the page is needed.
- Use mostly square or lightly rounded controls: 0–3px radius for a crisp technical feel.
- Buttons should have approximately 10–14px vertical padding and 12–16px horizontal padding.
- Use 20–28px gaps within each navigation group, with a larger flexible gap between left and right groups.
- If the brand mark is circular or geometric, keep it compact at approximately 32px square and align it optically with the text.

### Interaction
- Make every navigation label an accessible link with a visible hover and keyboard-focus state.
- On hover, slightly darken text or introduce the brand accent without shifting layout.
- For the outlined CTA, strengthen the border and add a subtle tinted background on hover.
- For the filled CTA, darken the background slightly on hover and preserve strong contrast.
- Use a clearly visible focus ring, such as 2px in the brand accent with a 2px offset.
- Ensure the announcement's inline action is visually emphasized but remains part of the same readable sentence.
- On mobile, the menu button must have an accessible label, a minimum 44px touch target, and a simple open/close state.

## Content behaviour
- Keep the announcement to one short sentence plus one emphasized action.
- Use a small set of primary navigation links; group related destinations only when the product genuinely needs them.
- Provide one quiet account action, one outlined secondary CTA, and one filled primary CTA when those actions exist in the user's product.
- If the product has no announcement, retain the space only when it communicates timely, valuable information; otherwise omit the strip.

## Never
- Never copy the reference's logos, product names, navigation labels, announcement copy, or button text.
- Never reuse the reference's exact branding, wording, iconography, or visual assets.
- Never include illustrations or imagery from the reference.
- Never make the header depend on colour alone to communicate interaction or state.
- Never let the announcement bar or navigation overpower the page's main content.
- Never sacrifice keyboard navigation, responsive behaviour, or readable contrast for visual similarity.